Cara Membuat Testimoni di Blogger Untuk Jualan Online

Apakah bisa memasang testimoni pelanggan di Blogger? Jawabannya, bisa! Terlebih apabila blog Anda adalah blog bisnis juga, menambahkan testimoni rasanya sangat penting untuk dilakukan. Testimoni adalah sebuah bentuk kesaksian atau pernyataan yang diberikan oleh konsumen terhadap suatu produk yang mereka pakai atau konsumsi. Pernyataan testimoni bisa berupa penilaian untuk bentuk atau kemasan produk, aroma, manfaat produk, atau pun pelayanan yang diberikan.

testimoni pada blog
testimoni pada blog

Dengan memuat beberapa testimoni pelanggan di halaman blog bisnis Anda, secara otomatis akan memberikan daya tarik lebih ke calon pembeli dan mempengaruhi mereka agar mau membeli produk yang Anda tawarkan. Akan tetapi, sayang sekali masih banyak blogger yang belum mengetahui hal tersebut. Mereka taunya testimoni hanya ada di marketplace atau website khusus e-commerce. Sedangkan Blogger tidak cocok untuk berbisnis online, cukup digunakan sebagai tempat membangun sebuah blog dan sekedar membagikan postingan artikel.

Nah, untuk itu pada artikel kali ini, kami akan memberikan tutorial Cara Membuat Testimoni di Blogger Untuk Jualan Online. Membuat halaman testimoni memang membutuhkan sedikit keahlian coding yang cukup rumit apalagi jika Anda seorang yang awam akan bahasa pemograman. Namun, tak perlu khawatir soal itu, saat ini sudah banyak forum yang membagikan kode pemograman dengan open source yang bisa Anda salin dan modifikasi sesuka hati, termasuk kode untuk halaman testimoni.

Baca Juga : 7 Aplikasi Mengubah Background Foto Agar Makin Keren

Langsung saja kita masuk ke cara pembuatan testimoni pada blog agar blog bisnis online Anda terlihat lebih terpercaya. Berikut cara pembuatannya :

1. Buka Blogger Anda.

2. Masuk ke menu “Halaman” dan pilih “Halaman Baru”. Jangan lupa untuk mengubah mode menjadi HTML bukan COMPOSE.

3. Setelah itu, copy kode HTML, CSS dan JavaScript di bawah ini. Kemudian pastekan ke halaman baru yang dibuat tadi.

KODE HTML
<div id=”responsive-container”>
<div class=”testimonial”>
<div id=”slideshow1″>
<img src=”ALAMAT URL FOTO PELANGGAN 1″/>
<p>KALIMAT TESTIMONI 1</p>
<div>NAMA PELANGGAN 1</div>
<h3>JABATAN PELANGGAN 1</h3>
</div>
<div id=”slideshow2″ style=”display: none”>
<img src=”ALAMAT URL FOTO PELANGGAN 2″/>
<p>KALIMAT TESTIMONI 2</p>
<div>NAMA PELANGGAN 2</div>
<h3>JABATAN PELANGGAN 2</h3>
</div>
<div id=”slideshow3″ style=”display: none”>
<img src=”ALAMAT URL FOTO PELANGGAN 3″/>
<p>KALIMAT TESTIMONI 3</p>
<div>NAMA PELANGGAN 3</div>
<h3>JABATAN PELANGGAN 3</h3>
</div>
<div id=”slideshow4″ style=”display: none”>
<img src=”ALAMAT URL FOTO PROFIL 4″/>
<p>KALIMAT TESTIMONI 4</p>
<div>NAMA PELANGGAN 4</div>
<h3>JABATAN PELANGGAN 4</h3>
</div>
</div>
</div>
KODE CSS
<style>
#responsive-container{width:100%;margin:auto}.testimonial{height:500px;width:100%;padding:1em;margin:1em auto}
.testimonial div{text-align:center;vertical-align:middle;color:#42b549;font-size:1.5em;margin-bottom:20px;}
.testimonial h2{font-size:30px;font-weight:300;margin:25px 0 48px 0;width:100%;text-align:center}
.testimonial img{margin:0 1em 0 1em;border-radius:50%;width:150px;height:150px}
.testimonial p{text-align:center;vertical-align:middle;color:#555;font-size:18px}
.testimonial h3{font-size:15px;text-align:center}
#slideshow1, #slideshow2, #slideshow3, #slideshow4{background:transparent}
</style>
KODE JAVASCRIPT
<script type=”text/javaScript”>
function startSlides(start, end, delay) {
setTimeout(slideshow(start,start,end, delay), delay);
}
function slideshow(frame, start, end, delay) {
return (function() {
$(‘#slideshow’ + frame).fadeOut();
if (frame == end) { frame = start; } else { frame += 1; }
setTimeout(function(){$(‘#slideshow’ + frame ).fadeIn();}, 850);
setTimeout(slideshow(frame, start, end, delay), delay + 850);
})
}
// usage: startSlides(first frame, end frame, delay time);
startSlides(1, 4, 5000);
</script>

Catatan : Ubah teks berwarna merah pada kode di atas sesuai data yang Anda punya.

4. Jika sudah, klik “Publish”.

5. Selesai.

Tips : Agar halaman testimoni mudah untuk dilihat oleh pengunjung blog Anda, silahkan buat menu navigasi testimoni dengan alamat URL halaman testimoni yang dibuat tadi.

Sekian pembahasan tutorial kali ini tentang Cara Membuat Testimoni di Blogger. Jika ada pertanyaan atau ada yang kurang Anda pahami, jangan ragu untuk bertanya melalui kolom komentar di blog ini. Semoga bermanfaat dan terima kasih.

Baca Juga : Berikut 2 Cara Mengganti Header YouTube Termudah

Previous Post
Next Post
Bagikan:

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *