Cara Membuat Responsive Testimonial Widget 4 Kolom

loading...

Selamat datang di The Royal Moringa. Artikel kali ini akan membahas mengenai bagaimana cara membuat atau memasang testimonial widget di blog/website anda. Testimonial widget adalah widget yang berisi komentar, saran, pendapat, review,  maupun kritik yang membangun dari pembaca mengenai pengalaman mereka selama menggunakan jasa atau membeli produk di situs yang dimaksud. Komentar yang dimaksud berisi kepuasan pelanggan terhadap pelayanan ataupun produk yang ditawarkan situs tersebut. Nah, bagi anda yang memiliki website/blog yang memiliki banyak pengikut/subscriber atau blog yang menawarkan produk tertentu, widget ini boleh menjadi fitur yang membantu meningkatkan rating blog anda dihadapan pelanggan yang lain. Jika anda tertarik, mari kita simak langkah membuat responsive testimonial widget 4 kolom berikut.

1. Log in ke akun blog anda > Pada dashboard pilih Theme > Edit HTML > Copy dan paste kode script CSS berikut di atas  ]]></b:skin>

                                       #responsive-container { width: 1200px; margin: auto; } #testimonials { float: left; width: 100%; background-color: #F4F4F4; padding-bottom: 75px; padding-top: 30px; margin: 0px 0px 55px 0px; font-family:calibri; } #testimonials li { display: block; float: left; margin: 12px 0px; font-size: 20px; } #testimonials li h3 { margin: 10px 10px 10px 150px; float: left; font-size: 18px; } #testimonials ul { margin: 0px; padding: 0px; overflow:hidden; } #testimonials img { margin-left:2.5%; border-radius:100%; width:100px; height:100px; float: left; padding:3% 26.5%; } #testimonials h2 { font-size: 30px; font-weight: 300; margin: 25px 0px 58px 0px; width: 100%; text-align: center; } #testimonials h3 { font-size: 100%; padding-bottom:10px; text-align: center; color:#696be7; font-weight:normal; text-transform:uppercase; border-bottom:1px solid #ddd; } .col_1_of_4:first-child { margin-left: 0; } .span_1_of_4 { width: 16.25em; } .col_1_of_4 { display: block; float: left; margin: 1% 0 1% 2.5%; } @media screen and (max-width: 1110px) { #responsive-container { max-width: 800px; overflow: hidden; } #testimonials li p { max-width: 266px; margin-top: 0; } #testimonials img { margin-left:3.5%; } .col_1_of_4:first-child { margin-left: 0; } .span_1_of_4 { width: 16.25em; } .col_1_of_4 { display: block; float: left; margin: 1% 0 1% 12.5%; } } @media screen and (max-width: 810px) { #responsive-container { max-width: 300px; overflow: hidden; } #testimonials li p { max-width: 266px; margin-right: 0px; } #testimonials img { margin-left:4.5%; } .col_1_of_4:first-child { margin-left: 0; } .span_1_of_4 { width: 16.25em; } .col_1_of_4 { display: block; float: left; margin: 1% 0 1% 9.5%; } }

2. Setelah itu kita menuju ke bagian body, cari posisi dimana anda akan meletakkan widget testimonial ini. Misalkan anda akan meletakkan widget ini sebelum footer maka copy dan paste kode script berikut di atas <div id="footer-wrapper"> atau tag yang serupa karena setiap blog memiliki nama footer yang berbeda

                                       <!-- Testimonial Section--> <b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='testimonials'> <div id='responsive-container'> <h2> Testimonials</h2> <div class='col_1_of_4 span_1_of_4'> <img src="URL GAMBAR ANDA"/> <h3> <b>nama pertama</b> - profesi</h3> <p align="justify"> "Review pembaca/pelanggan ditulis disini. Review dapat berupa komentar atau pendapat mengenai kepuasan mereka menggunakan layanan yang situs anda berikan."</p> </div> <div class='col_1_of_4 span_1_of_4'> <img src="URL GAMBAR ANDA"/> <h3> <b>nama kedua</b> - profesi</h3> <p align="justify"> "Review pembaca/pelanggan ditulis disini. Review dapat berupa komentar atau pendapat mengenai kepuasan mereka menggunakan layanan yang situs anda berikan."</p> </div> <div class='col_1_of_4 span_1_of_4'> <img src="URL GAMBAR ANDA"/> <h3> <b>nama ketiga</b> - profesi</h3> <p align="justify"> "Review pembaca/pelanggan ditulis disini. Review dapat berupa komentar atau pendapat mengenai kepuasan mereka menggunakan layanan yang situs anda berikan."</p> </div> <div class='col_1_of_4 span_1_of_4'> <img src="URL GAMBAR ANDA"/> <h3> <b>nama keempat</b> - profesi</h3> <p align="justify"> "Review pembaca/pelanggan ditulis disini. Review dapat berupa komentar atau pendapat mengenai kepuasan mereka menggunakan layanan yang situs anda berikan."</p> </div> </div> </div> </b:if> 

3. Langkah ketiga adalah mengisi nama pembaca/pelanggan pada setiap kolom, profesi mereka, kemudian gambar yang berupa profil foto (photo profile) dan yang terakhir & terpenting adalah isi dari review mereka.

4. Save dan lihat hasilnya.

Bagaimana hasilnya? Apakah anda puas? Review yang ditampilkan atau dipublikasikan dapat berupa kepuasan pelanggan terhadap pelayanan anda, produk yang dinilai sangat bermanfaat, proses pembayaran/transaksi yang mudah, atau juga bisa artikel anda yang berkualitas. Jika anda tertarik ingin membuat testimonial widget dalam bentuk slider atau slideshow (slide berjalan otomatis), silakan baca juga cara mudah membuat testimonial slider di website. Ada satu hal lagi yang perlu saya sampaikan bahwa widget testimonial yang anda buat kali ini hanya ditampilkan (muncul) di halaman utama (main page) situs anda dan tidak ditampilkan di halaman post atau page manapun karena pada umumnya widget seperti itu memang khusus ditampilkan di main page. Terima kasih telah membaca!

loading...