Cara Membuat Halaman Testimonial di Blogger

Cara Membuat Halaman Testimonial di Blogger

Cara Membuat Halaman Testimoni di Blogger

Coretancode.com - Pada kesempatan kali ini admin ingin sedikit berbagi tutorial seputar blogging lagi. Tutorial apakah itu? ya, seperti pada judul di artikel kali ini, admin ingin sedikit berbagi agar anda yang memiliki situs penyedia jasa dapat meningkatkan status situs yang sedang dikelola.

Tentu sobat tidak akan asing lagi dengan halaman testimoni jika pernah mengunjungi situs penyedia jasa, misalnya situs online shop. Bahkan situs atau blog creator template pun sudah memasang page serupa seperti di blog nya mas sugeng.

Pada umumnya halaman seperti ini seringkali kita temui pada platform Wordpress, lalu apakah bisa untuk menerapkannya ke Blogger? tenang aja sob master blogger banyak, jangan berkecil hati apabila anda menggunakan platform gratisan, semua itu tergantung anda mau berusaha mencari.

Pengertian Testimoni

Testimoni atau Testimonial (dalam bahasa inggris), adalah sebuah bentuk kesaksian atau kepuasan tentang barang atau jasa penjual yang diberikan oleh para pembeli.
source: www.boshjn.id

Sedangkan fungsinya sendiri, halaman testimoni ini ditujukan untuk memberikan pengalaman kepada mereka yang sudah bertransaksi dengan si penjual atau juga pengalaman mereka yang sudah pernah menggunakan jasa atau barang yang dibeli.

Manfaat Testimoni

Manfaatnya akan berpengaruh pada bisnis kalian tentunya, contohnya meningkatkan kepercayaan ke calon pembeli. Jumlah testimoni yang ada tentu akan mempengaruhi tingkat kepercayaan.

Langsung saja, buat kalian yang penasaran dengan cara pembuatannya atau tampilan yang dihasilkan, anda bisa cek dibawah ini.

Demo Testimonial

Cara Membuat Halaman Testimoni

  1. Pastikan telah login ke Blogger.com
  2. Pada dashboard, silahkan pilih menu Halaman > lalu buat Halaman Baru
  3. Pada tab metode penulisan, pilih metode HTML bukan Compose
  4. Kemudian salin dan letakkan kode berikut ini, pada teks editor.
    <div id="responsive-container">
    <div class="testimonial">
    <div id="slideshow1">
    <img src="ALAMAT_URL_FOTO_PROFIL_1"/>
    <p>KATA_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_PROFIL_2"/>
    <p>KATA_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_PROFIL_3"/>
    <p>KATA_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>KATA_TESTIMONI_4</p>
    <div>NAMA PELANGGAN 4</div>
    <h3>JABATAN PELANGGAN 4</h3>
    </div>
    </div>
    </div>
    
    <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>
    
    <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>
    Keterangan:
    Ubah tulisan yang di mark dengan link foto, sedangkan untuk lainnya silahkan sesuaikan.
  5. Publikasikan.

Jika ada yang belum dimengerti atau mau bertanya silahkan ajukan melalui kolom komentar yang telah tersedia dibawah artikel ini. Mohon dimaklumi jika ada salah-salah kata atau penyampaian.

Mungkin sekian dahulu artikel dari Cara Membuat Halaman Testimoni di Blogger, semoga apa yang telah admin berikan bisa bermanfaat untuk kalian.
Terima kasih
Load comments