Membuat Quote Box Dapat Berubah-Ubah Warna Di Blog

Cara Membuat BlockQuote / Quote Box Bisa Berubah-ubah Warna di Blog. Hallo sahabat blogger, seorang pengguna blogger berlomba-lomba untuk mempercantik blognya demi kepuasan dan kenyamanan pengunjung, hal tersebut niscaya selalu di usahakan pengguna blog supaya pengnjung betah berlama-lama diblog.

lomba untuk mempercantik blognya demi kepuasan dan kenyamanan pengunjung Membuat Quote Box Bisa Berubah-ubah Warna di Blog

Contoh salah satunya yaitu dengan menciptakan blockquote "Quote" dapat lebih bagus dan dapat lebih bergaya di blog, ibarat menciptakan blockquote dengan tema majemuk dan dengan blockquote variasi lainnya, supaya tampilan quote atau tanda blockuote dapat lebih yummy dipandang mata dan pengunjung dapat betah diblog.

Baca Juga : Membuat Menubar Dropdown Responsive Simple di Blog

Pada kesempatan kali ini, saya punya trik sederhana bagaimana cara mempercantik tampilan blockquote atau quote atau tanda kata yang kita dapat kita blog sebagai tanda diperjelas, dalam tutorial kali ini, kita akan menciptakan blockqoute dapat tampil lebih keren dan dapat berubah-ubah warna pada blog atau di posting artikel kita.

Baca Juga : Membuat Tombol Chat WA & SMS Langsung Ke Admin Blog

Kaprikornus dalam tampilan blockquote ini ada tampilan 3 warna yang dapat kita tampilkan dan dapat berubah-ubah sesuai impian kita dengan hanya mengklik icon warna tersebut, jikalau anda penasaran, silahkan ikuti tutorial "Membuat BlockQuote Bisa Berubah-ubah Warna di Blog"

Cara Membuat BlockQuote Bisa Berubah-ubah Warna di Blog

1. Buka akun blogger anda.

2. Pilih hidangan template >> klik edit HTML.

3. Sekarang letakan instruksi dibawah ini sempurna 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}

4. Selanjutnya letakan instruksi dibawah ini sempurna diatas instruksi </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. Letakan instruksi pemanggilnya di kawasan yang anda inginkan, dapat di bab body atau di mode HTML, Itu dapat anda buat sesukanya. (Blocquote ini di lakukan secara manual)

<div class='kutipan'>
<i class="fa fa-quote-right" aria-hidden="true"></i>
<div class='madamvia'>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, akrab 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..<br/>
<cite> Hanya Teks Demo</cite></div>
<div class='madamvia'>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,.<br/>
<cite> Hanya Teks Demo</cite></div>
<div class='gantiwarna'>
<a class='merah' href='javascript:;'></a>
<a class='biru' href='javascript:;'></a>
<a class='cyan' href='javascript:;'></a>
</div>
</div>