Cara membuat blockquote berubah warna diblog

CARA MEMBUAT BLOCKQUOTE BERUBAH-UBAH WARNA DIBLOG

Cara membuat blockquote berubah 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. Publiskasikan 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/

0 Response to "Cara membuat blockquote berubah warna diblog"

Posting Komentar

Terimakasih telah membaca artikel di Blog Orang IT , berikut ini aturan yang saya buat untuk pengunjung yang mau memberikan komentar :

1. Semua komentar diblog akan saya hapus setiap akhir bulan karena file backup terlalu besar

2. Komentar yang relevans akan saya setujui sementara sara rasis akan saya hapus langsung

3. Jangan spam link aktif dan url langsung karena percuma saya admin yang selektif

4. Jika ada link mati atau link yang mengarah kehalaman lain kosong 404 tolong beritahu melalui komentar

5. Anda boleh meninggalkan jejak sekedar doa atau ucapan terimakasih hal itu sudah membuat saya sangat senang dan bersemangat

6. Jika mau request judul artikel juga bisa langsung melalui kotak komentar

7. Tidak menerima kerja sama berbayar dalam bentuk apapun , jika anda ingin menyumbangkan artikel / guest post silahkan kirim melalui email tidak dipungut biaya dan anda boleh mencantumkan situs bisnis anda

Semoga anda berbesar hati untuk mentaati aturan yang saya buat dan jangan lupa kunjungi lagi Blog Orang IT esok hari

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel