Cara Mudah Membuat Quote Box Warna-Warni

Selamat siang sahabat Programmer SEO, di hari yang cerah dan berawan ini saya akan membahas tentang Cara Membuat BlockQuote / Quote Box (kotak catatan) Bisa Berubah-ubah Warna di Blog.  Waw, kayaknya keren tuh, seperti apa sih quote box yang bisa warna-warni itu ? Oke, sahabat bisa lihat gambarnya di bawah ini:

Nah, Lalu apa manfaat quote box warna-warni ? Fungsi utama dari block quote yaitu untuk memikat daya tarik pengunjung agar membuat mereka lebih nyaman berlama-lama di blog kita.

Dan adapun sebagaiman yang bos kuh lihat pada gambar di atas, dalam tampilan blockquote tersebut terdapat tampilan 3 warna yang bisa kita tampilkan dan bisa berubah-ubah sesuai keinginan kita dengan hanya mengklik icon warna tersebut, Dan adapun untuk cara pemasangannya, yaitu:

1. Buka dasbor blog bos kuh
2. Pilih Tema => klik edit HTML.
3. Cari kode  ]]></b:skin> atau </style> (Gunakan CTRL+F untuk memudahkan pencarian)
4. Setelah ketemu, letakan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>

 /* Blocquote css */
.kutipan .madamvia{background:#9C0C0C!important;overflow:hidden;position:relative;margin:.5rem 0 1rem;transition:all .4s ease-in-out;border-radius:2px;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:20px}
.gantiwarna{position:absolute;right:10px;bottom:-10px}
.gantiwarna a{margin-right:5px;border:2px solid #fff;border-radius:100%;padding:12px;width:12px;height:12px;font-size:0}
.kutipan{float:left;width:100%;margin-bottom:25px;position:relative;border-radius:2px;line-height:1.5}
.kutipan i.fa{background:#9C0C0C;z-index:9;border:2px solid #fff;border-radius:100%;padding:10px;font-size:25px;color:#fff;position:absolute;top:-20px;left:-20px}
.kutipan.merah .madamvia,.merah,.kutipan.merah i.fa{background:#9C0C0C!important}
.kutipan.biru .madamvia,.biru,.kutipan.biru i.fa{background:#0c6d9c!important}
.kutipan.cyan .madamvia,.cyan,.kutipan.cyan i.fa{background:#0c9c81!important} 

5. Selanjutnya, cari kode </body> dan letakan kode di bawah ini tepat di atas kode </body>

<script type='text/javascript'>$(document).ready(function(){$("a.biru").click(function(){$(".kutipan").toggleClass("biru").removeClass("cyan","merah");});});$(document).ready(function(){$("a.merah").click(function(){$(".kutipan").toggleClass("merah").removeClass("cyan","biru");});});$(document).ready(function(){$("a.cyan").click(function(){$(".kutipan").toggleClass("cyan").removeClass("biru","merah");});});//<![CDATA[$(document).ready(function(){$(".kutipan .madamvia").kutipan()});(function(e){e.fn.kutipan=function(t,n){if(!t)t=550;if(!n)n=7000;var r=t*4;if(r>n)n=r;var i=e(this),s=e(this).filter(":first"),o=e(this).filter(":last"),u='<div id="quote_wrap"></div>';e(this).wrapAll(u);e(this).hide();e(s).show();e(this).parent().css({height:e(s).height()});setInterval(function(){if(e(o).is(":visible")){var n=e(s);var r=e(n).height()}else{var n=e(i).filter(":visible").next();var r=e(n).height()}e(i).filter(":visible").fadeOut(t);setTimeout(function(){e(i).parent().animate({height:r},t)},t);if(e(o).is(":visible")){setTimeout(function(){e(s).fadeIn(t*2)},t*2)}else{setTimeout(function(){e(n).fadeIn(t)},t*2)}},n)}})(jQuery)//]]></script>

5. Jika ingin membuat quote block, maka letakan dulu kode pemangggil di bawah ini pada mode HTML. Kemudian alihkan kembali ke mode compose

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac ligula at mi consectetur dapibus. Pellentesque consequat odio vitae sem laoreet condimentum. Donec non accumsan erat. Sed pellentesque, nunc nec elementum ultrices, nunc velit tempus leo, id mollis massa risus id dolor. Praesent congue feugiat euismod. Aenean non congue massa. Curabitur posuere, erat at bibendum rutrum, eros dui pretium dui, ac viverra ligula magna id orci. Proin et fringilla dolor. Donec at sapien ut nulla lobortis hendrerit id a magna..

~ Hanya Teks Demo

hanyalah teks demo ini hanya teks demo, ini hanya teks demo, ini hanya teks demo, ini hanya teks demo, ini hanya teks demo, ini hanya teks demo,.

~ Hanya Teks Demo

6. Ganti tulisan berwarna merah dengan kata-kata yang ingin bos kuh masukan untuk menjadi quote block. 

Bagaimana bos kuh, mudah kan ?
Itulah tutorial singkat cara mudah membuat quote box warna-warni pada blog. Terima kasih, semoga bermanfaat