×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Widget Testimoni Responsif di Blogger

Jagoanredesign - Kali ini saya  membagikan sebuah tutorial Cara Membuat Widget Testimoni Responsif di Blogger, biasanya testimonial ini biasanya ada di blog atau website jual beli product dan jasa. testimoni card bisa anda gunakan untuk menampilkan testimoni pelanggan dan menambah kepercayaan calon pembeli terhadap anda di blog atau website.


Pemasangan widget testimoni di blog sangat disarankan apabila anda menjual jasa atau produk lainnya secara online. widget testimoni ini dibuat  menggunakan css tanpa javascript.

Cara Membuat Widget Testimoni Responsif di Blogger

1. Silahkan Login ke Blogger.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Kemudian cari kode berikut ini ]]></b:skin>  atau </style>dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

/* Testimoni Order by Jagoan Redesign */
.jagoanredesigntestimoni{font-family:'Roboto',Arial,sans-serif;position:relative;float:left;overflow:hidden;margin:10px 1%;min-width:230px;max-width:315px;width:100%;color:#ffffff;text-align:left;line-height:1.4em;background-color:#cc0000;padding-top:120px;border-radius:10px;}
.jagoanredesigntestimoni *{-webkit-box-sizing:border-box;box-sizing:border-box;}
.jagoanredesigntestimoni img{max-width:100%;vertical-align:top;opacity:0.85;}
.jagoanredesigntestimoni .pic{width:100%;background-color:#FF0000;padding:25px;position:relative;}
.jagoanredesigntestimoni .pic:before{position:absolute;content:'';bottom:100%;left:0;width:0;height:0;border-style:solid;border-width:55px 0 0 400px;border-color:transparent transparent transparent #ff0000;}
.jagoanredesigntestimoni .profile{border-radius:50%;position:absolute;bottom:100%;left:25px;z-index:1;max-width:90px;opacity:1;box-shadow:0 0 15px rgba(0,0,0,0.3);}
.jagoanredesigntestimoni h3{font-size:1.3em;margin:25px;font-weight:300;position:absolute;top:0;right:0;text-align:right;}
.jagoanredesigntestimoni h3 span{display:block;font-size:0.65em;color:#2980b9;}
.jagoanredesigntestimoni p{margin:0 0 10px;padding:0 0 30px;letter-spacing:1px;font-style:italic;font-weight:300;}
.jagoanredesigntestimoni p:after{font-family:'FontAwesome';content:"201C";position:absolute;font-size:180px;line-height:1em;color:#fd0000;font-style:normal;content:"201D";right:20px;bottom:-105px;}
4. Selanjutnya anda SIMPAN TEMA

5. Masuk ke menu HALAMAN > Buat HALAMAN BARU, dan masukkan judul halaman tersebut "Testimoni" atau terserah anda.
6. Masuk ke menu HTML bukan COMPOSE, Pastekan kode dibawah ini di halaman HTML.

<!-- Testimoni 1 -->
<div class="jagoanredesigntestimoni">
<div class="pic">
<img alt="Profile" class="profile" src="//2.bp.blogspot.com/--GOmtbLhVvs/YEyQFelGFmI/AAAAAAAABWQ/PajsGfgy9HcgLjdqrcTCIEBdW1aT6hy9gCK4BGAYYCw/s1600/use.jpg" title="Profile" />
        <br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt risus in urna ultrices sagittis ac eu lectus. Sed at cursus mi. Integer ac felis mattis, ultrices elit a, imperdiet leo. Duis accumsan cursus tortor, in tempor turpis condimentum sit amet. Nullam et eros ac enim posuere scelerisque. Aliquam vel erat sed mi aliquam commodo a id lorem. Aenean vitae ex in magna tincidunt laoreet vel at tortor. Fusce a justo sed dolor maximus volutpat. Curabitur sit amet volutpat lacus. Maecenas interdum finibus libero, volutpat facilisis urna hendrerit at.</div>
<h3>Jagoan 1</h3>
</div>

<!-- Testimoni 2 -->
<div class="jagoanredesigntestimoni">
<div class="pic">
<img alt="Profile" class="profile" src="//2.bp.blogspot.com/--GOmtbLhVvs/YEyQFelGFmI/AAAAAAAABWQ/PajsGfgy9HcgLjdqrcTCIEBdW1aT6hy9gCK4BGAYYCw/s1600/use.jpg" title="Profile" />
        <br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt risus in urna ultrices sagittis ac eu lectus. Sed at cursus mi. Integer ac felis mattis, ultrices elit a, imperdiet leo. Duis accumsan cursus tortor, in tempor turpis condimentum sit amet. Nullam et eros ac enim posuere scelerisque. Aliquam vel erat sed mi aliquam commodo a id lorem. Aenean vitae ex in magna tincidunt laoreet vel at tortor. Fusce a justo sed dolor maximus volutpat. Curabitur sit amet volutpat lacus. Maecenas interdum finibus libero, volutpat facilisis urna hendrerit at.</div>
<h3>Redesign 2</h3>
</div>
7. Silahkan anda SIMPAN TEMA dan Selesai.
Nah, itu adalah tutorial Cara Membuat Widget Testimoni Responsif di Blogger semoga totorial bermanfaat bagi anda semua. jika ada yang ingin  anda tanyakan silakan berkomentar saja di bawah.
Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

0

Post a Comment

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel