CARA MEMBUAT BLOCKQUOTE BERUBAH-UBAH WARNA DIBLOG
Selamat Datang di Blog Orang IT . Pada postingan kali ini saya akan share tutorial blogger bagaimana cara membuat blockquote berubah-ubah warna di blogger dengan mudah dan simpel pastinya sebagai pemilik blog kita selalu ingin menarik perhatian pengunjung agar mereka betah berlama-lama berada dalam blog dan kembali lagi mengunjungi blog kita salah satunya dengan cara membuat variasi warna pada blockquote didalam artikel blog
Disini saya ingin mempercantik tampila blockquote , membuatnya lebih bergaya dan menyesuaikan dengan kebutuhan pengunjung misalnya jika warna blockquote dinilai kurang nyaman dipandang oleh mata pengunjung bisa mengganti warnanya sesuai keinginan / pilihan yang tersedia
Pada kesempatan kali ini saya bagikan bagaimana cara membuat blockquote / tanda kata menjadi lebih menarik bisa berganti warna sesuai kebutuhan pengunjung dan pastinya tidak mempengaruhi loading blog secara signifikan karena kita tidak perlu meload js css diluar sumber daya template
Blockquote adalah tulisan yang menjorok ke dalam dari batas tepi kiri dan tepi kanan area posting. Tujuannya adalah untuk mempertegas isi tulisan ataupun teks yang dianggap penting yang berada di area blockquote.
Disini kita akan membuat blockquote dengan 3 warna berbeda yang bisa berubah sesuai keinginan pengunjung , mereka bisa memilih warna yang tersedia dimana mereka merasa nyaman dengan warna itu karena tipe setiap orang pasti berbeda kalau saya lebih suka warna gelap tapi sebagian orang kombinasi warna gelap bisa membuat mata lelah
Membuat blockquote berganti warna diblog
1. Buka dashboard blogger , masuk pada menu template pilih edit html
2. Letakkan kode dibawah ini tepat diatas potongan kode ]]></b:skin> atau </style> , cari saja dengan kombinasi ctrl+F
/* Blocquote css */.kutipan .helmykkediri{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 .helmykkediri,.merah,.kutipan.merah i.fa{background:#9C0C0C!important}.kutipan.biru .helmykkediri,.biru,.kutipan.biru i.fa{background:#0c6d9c!important}.kutipan.cyan .helmykkediri,.cyan,.kutipan.cyan i.fa{background:#0c9c81!important}
3. Selanjutnya letakkan kode dibawah ini tepat diatas tag </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 .helmykkediri”).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>
4. Letakan kode pemanggilnya di tempat yang anda inginkan, bisa di bagian body atau di mode HTML, Itu bisa anda buat sesukanya. ( penggunaan bockquote ini secara manual )
<div class=’kutipan’>
<i class=”fa fa-quote-right” aria-hidden=”true”></i>
<div class=’helmykkediri’>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=’helmykkediri’>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>
5. Publikasikan konten dan lihat hasilnya
Demikian postingan saya mengenai cara membuat blockquote bisa berganti warna semoga bermanfaat jika ada yang ingin bertanya atau menambahkan silahkan saja berkomentar yang relevans sekian dan terimakasih telah berkunjung keblog sederhana http://www.helmykkediri.com/
