Selasa, 06 Februari 2018

Cara Membuat BlockQuote / Quote Box Bisa Berubah-ubah Warna di Blog

12.02 pranala luar, tutorial-blog Tidak ada komentar

Hallo sobat blogger, seorang pengguna blogger berlomba-lomba untuk mempercantik blognya demi kepuasan dan kenyamanan pengunjung, hal tersebut pasti selalu di usahakan pengguna blog agar pengnjung betah berlama-lama diblog.

Contoh salah satunya adalah dengan membuat blockquote "Quote" bisa lebih bagus dan bisa lebih bergaya di blog, seperti membuat blockquote dengan tema bermacam-macam dan dengan blockquote variasi lainnya, agar tampilan quote atau tanda blockuote bisa lebih enak dipandang mata dan pengunjung bisa 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 bisa kita blog sebagai tanda diperjelas, dalam tutorial kali ini, kita akan membuat blockqoute bisa tampil lebih keren dan bisa berubah-ubah warna pada blog atau di posting artikel kita.

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

Jadi dalam tampilan blockquote ini ada tampilan 3 warna yang bisa kita tampilkan dan bisa berubah-ubah sesuai keinginan kita dengan hanya mengklik icon warna tersebut, jika 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 menu template >> klik edit HTML.

3. Sekarang 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}

4. Selanjutnya letakan kode dibawah ini tepat diatas 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. Letakan kode pemanggilnya di tempat yang anda inginkan, bisa di bagian body atau di mode HTML, Itu bisa 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, 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..<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>