Tutorial Membuat Testimoni Sliding Animasi dengan Javascript

agung wisudhatama August 27, 2022 Komentar

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

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.

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.

Demo

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.