Cara Mudah Membuat BlockQuote Dapat Berubah-ubah Warna di Blogger Cara Mudah Membuat BlockQuote Dapat Berubah-ubah Warna di Blogger - mizipediacom mizipediacom: Cara Mudah Membuat BlockQuote Dapat Berubah-ubah Warna di Blogger

KATEGORI










LIVE TV

Iklan Semua Halaman

Cara Mudah Membuat BlockQuote Dapat Berubah-ubah Warna di Blogger

Tuesday, January 2, 2018



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.

Lihat Juga