$type=carousel$cols=3

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/

COMMENTS

BLOGGER
Nama

Android,3,Blog,350,Info,212,Islami,43,Software,74,Tutorial,120,Web,18,
ltr
item
BLOG ORANG IT 2017: Cara membuat blockquote berubah warna diblog
Cara membuat blockquote berubah warna diblog
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
https://3.bp.blogspot.com/-Kjk_FcXGrjo/WiUfpVpNJMI/AAAAAAAAGvA/wKXiq5Krk44dlvCcDdelGGtM4v3llxyjQCLcBGAs/s400/test%2Bblog%2Borang%2Bit.gif
https://3.bp.blogspot.com/-Kjk_FcXGrjo/WiUfpVpNJMI/AAAAAAAAGvA/wKXiq5Krk44dlvCcDdelGGtM4v3llxyjQCLcBGAs/s72-c/test%2Bblog%2Borang%2Bit.gif
BLOG ORANG IT 2017
http://www.helmykkediri.com/2017/12/cara-membuat-blockquote-berubah-warna.html
http://www.helmykkediri.com/
http://www.helmykkediri.com/
http://www.helmykkediri.com/2017/12/cara-membuat-blockquote-berubah-warna.html
true
7204675838149040268
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy