Cara Mudah Membuat BlockQuote Dapat Berubah-ubah Warna di Blogger




Cara Mudah Membuat BlockQuote Dapat Berubah-ubah Warna di Blogger
Cara Mudah Membuat BlockQuote Dapat Berubah-ubah Warna di Blogger
Di kesempatan kali ini saya akan share mengenai Cara Mudah Membuat BlockQuote Dapat Berubah-ubah Warna di Blogger. Tentunya jika kita sudah mempunyai blog, pasti ingin membuat website/ blog kita terlihat cantik atau keren di mata pengunjung termasuk saya. Hal tersebut kita lakukan tidak lain adalah agar para pengunjung bisa betah dan nyaman untuk berlama- lama mampir di blog kita. Yaitu dengan kita membuat blockquote "Quote" agar terlihat lebih bagus ataupun terlihat keren lah.


Jadi jika anda ingin mempercantik tampilan blockquote atau quote sebagai tanda diperjelas seperti di atas. agar pengunjung mudah untuk memahami tulisan penting yang telah anda ingin tandai, seperti sebuah catatan atau warning.


Nah bisa anda lihat dalam tampilan blockquote tersebut ada 3 tampilan warna yang dapat kita tampilkan dan juga bisa berubah-ubah sesuai keinginan kita dengan hanya mengklik icon warna tersebut. Untuk anda yang tertarik ingin mencoba membuat blockquote  tersebut, bisa anda ikuti langkah- langkah di bawha ini:

BlockQuote Dapat Berubah-ubah Warna di Blogger

  1. Pertama , pastikan anda udah masuk di dasbhor anda sendiri
  2. Kemudian anda masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Temukan kode ]]></b:skin> atau </style>
    /* Blocquote css *//* 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. Kemudian anda bisa 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. Nah anda bisa memasukan kode pemanggilnya di tempat yang anda inginkan, bisa di bagian body atau di mode HTML, Itu bisa anda buat sesuai keinginan anda. (Blocquote ini di lakukan secara manual)
    <div class='kutipan'>
    <i class="fa fa-quote-right" aria-hidden="true"></i>
    <div class='mizipediacom'>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>
  6. Jika sudah anda edit, maka bisa anda klik save template, dan lihat hasilnya.
Demikian lah penjelasan saya pada malam ini, semoga bisa bermanfaat untuk anda, dan selamat mencoba. Dan semoga berhasil ya.


Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect