27 August 2022

Tutorial Membuat Testimoni Sliding Animasi dengan Javascript

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Testimoni Versi Sliding Animasi dengan Javascript

TESTIMONI adalah sebuah bentuk pernyataan mereview dari subyek sebuah produk atau jasa yang telah digunakan oleh mereka. Review ini mengungkapkan hasil baik buruknya sebuah produk atau jasa yang mereka nilai. Dari penilaian di dari sudut pandang mereka, barulah muncul testimoni yang beragam. Dan testimoni ini tidak akan sama, karena setiap individu menyatakan pernyataan sesuai apa yang mereka alami secara pribadi. Kemudian setelah itu barulah mereka berkomentar dan memberikan penilaian.

Dalam sebuah blog atau website yang berisikan tema penjualan produk atau jasa, maka pemasangan testimoni adalah hal yang wajib tersedia. Karena dari testimoni para pemakailah, sang pemilik produk atau jasa dapat meningkatkan mutunya. Peningkatan ini dimaksudkan supaya barang atau jasa yang mereka tawarkan dan berikan telah sesuai dengan apa yang customer cari. Sehingga nantinya dapat memuaskan para customer yang telah menggunakan produknya.



Bilamana testimoni itu sangat penting, tidak berlebihan bila pemasangannya bisa ditempelkan pada bagian footer blog setelah produk atau jasa diposting. Selain itu pemasangan yang bagus juga dilakukan dibawah postingan setelah update posting. Sehingga ketika selesai membaca sebuah artikel tentang produk dan jasa yang ditawarkan, dibawahnya sudah ada kolom khusus review produk. Berikan penilaian berupa icon bintang mulai dari bintang 1 hingga bintang 5. Biarlah para customer / pengunjung blog yang menilainya kemudian. Setelahnya barulah diambil tindakan untuk memperbagus produk dan jasa tersebut.

Dalam tutorial kali ini, saya akan memberikan sedikit cara membuat Testimoni Versi Sliding Animasi dengan Java. Hasilnya bisa dilihat pada Demo yang ada dibagian akhir dari postingan ini. Sekarang saya berikan tutorialnya dulu. Silakan disimak sampai habis ya tutorialnya. Semoga berkenan.

Testimoni Versi Sliding Animasi dengan Javascript


1. Masuk ke Template
2. Cari kode ]]></b:skin>
3. Terus tempelkan kode dibawah ini persis diatas kode ]]></b:skin> tersebut
*{padding:0;margin:0;box-sizing:border-box;font-family:"Poppins",sans-serif;}
body{background-color:#D64541;}
.wrapper{background-color:#F0E2C5;position:absolute;width:80vw;max-width:41em;min-height:25em;border-radius:0.6em;transform:translate(-50%,-50%);left:50%;top:50%;box-shadow:0 1.8em 3em rgba(1,17,39,0.15);display:flex;}
.testimonial-container{width:85%;height:100%;position:relative;margin:auto;padding:1.8em 1.2em;}
.wrapper button{font-size:1.8em;height:2.2em;width:2.2em;background-color:#F2784B;position:absolute;margin:auto;top:0;bottom:0;border:none;color:#000;box-shadow:0 0 1em rgba(1,17,39,0.25);cursor:pointer;border-radius:50%;}
button#next{right:-1.1em;}
button#prev{left:-1.1em;}
.testimonial-container p{color:#000;text-align:center;font-size:0.9em;line-height:2em;letter-spacing:0.05em;}
.testimonial-container img{display:block;margin:1.8em auto 1.25em auto;border-radius:50%;width:4.4em;}
.testimonial-container h3{color:#000;font-size:1em;text-align:center;}
.testimonial-container h6{color:#000;font-size:0.9em;letter-spacing:0.03em;font-weight:400;text-align:center;}
@media screen and (max-width:650px){.wrapper{font-size:14px;}}


Setelah itu barulah kita berikan kode berikutnya yaitu kode dibawah ini letakkan diatas kode </body>. Ini masih di template ya
<script type='text/javascript'>//<![CDATA[  
//Testimonial Data
const testimonials = [{name:"Muhammad Ashil Fauzan",job:"Pekerja Swasta",image:"https://img.icons8.com/glyph-neue/200/administrator-male.png",testimonial:"Website www.alifacode.com sangat membantu saya dalam membangun sebuah blog. Karena pekerjaan saya berkutat dengan dunia teknologi informasi,maka web ini sangat membantu sekali buat saya. Terima kasih bagi-bagi ilmunya Admin alifacode.com",;}
,{name:"Muhammad Wildan Alana Wafi",job:"Admin Web",image:"https://img.icons8.com/glyph-neue/200/administrator-male.png",testimonial:"Alangkah baiknya bila kita bisa bekerja sama dan membangun sebuah komunitas web yang sarat akan makna. Tutorial ini sangat ajaib sekali menurut saya. Isinya mendalam dan dipaparkan dengan cara yang mudah dipahami oleh siapapun. Terima kasih.",;}
,{name:"Muhammad Oziel Alvaro Pradana",job:"Theme Designer",image:"https://img.icons8.com/glyph-neue/200/administrator-male.png",testimonial:"Sangat bagus menurut saya. Perpaduan coding dan design yang apik membuat web ini sarat akan nilai seni yang berpadu dengan ilmu pengetahuan. Sebuah terobosan mutahkir di masa kini yang membuat kami semakin mendalami apa itu teknologi informasi lewat website. Terima kasih.",;}
,{name:"Shelma",job:"Pelajar",image:"https://img.icons8.com/glyph-neue/200/administrator-female.png",testimonial:"Artikel yang ada di website ini sangat membantu saya dalam mengerjakan tugas sekolah. Sesuai dengan bidang saya di bidang IT,ketika saya mendapatkan tugas dari guru untuk membuat artikel di blog,saya memanfaatkan artikel tutorial di website alifacode.com. Terima kasih admin.",;}
,];//Current Slide
let i = 0;//Total Slides
let j = testimonials.length;let testimonialContainer = document.getElementById("testimonial-container");let nextBtn = document.getElementById("next");let prevBtn = document.getElementById("prev");nextBtn.addEventListener("click",() =>{i = (j + i + 1) % j;displayTestimonial();}
);prevBtn.addEventListener("click",() =>{i = (j + i - 1) % j;displayTestimonial();}
);let displayTestimonial = () =>{testimonialContainer.innerHTML = `
<p>${testimonials[i].testimonial;}
</p><img src=${testimonials[i].image;}
><h3>${testimonials[i].name;}
</h3><h6>${testimonials[i].job;}
</h6>`;}
;window.onload = displayTestimonial;//]]></script>


Terakhir, kalian tempelkan di bagian Tata Letak Tambah HTML Javascript ya. Kodenya tempel disitu dan save. Kodenya berikut ini
<div class="wrapper">
<div class="testimonial-container" id="testimonial-container"></div>
<button id="prev">&lt;</button>
<button id="next">&gt;</button>
</div>


Nah jadi khan testimoninya. Sekarang silakan coba diterapkan di blog kamu, supaya produk yang dijual lewat blog bisa mendapatkan penilaian dari pengunjung blog kamu. Sekian saja dan terima kasih yang sudah bersedia mampir disini di artikel Testimoni Versi Sliding Animasi dengan Javascript. Jangan pernah mengeluh dengan kehidupanmu, karena masih banyak orang yang tidak seberuntung kita. Masih banyak dari mereka yang kehidupannya berada di bawah kita. Jadi tetap bersyukurlah. Salam.



Bagikan ke teman-teman kamu
Label Postingan : Javascript , Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Tutorial Membuat Testimoni Sliding Animasi dengan Javascript . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon