Cara Membuat Quote Box Berubah-ubah Warna
JejakSeru.com - Kali ini saya akan membagikan tutorial cara membuat quote box yang bisa berubah-ubah warna, namun yang dimaksud dari berubah-ubah warna ini tidak auto atau otomatis, melainkan manual yang dapat dipilih langsung oleh pengunjung warna apa yang nyaman untuk dia baca. Dengan quote box ini pengunjung dapat lebih mudah menyesuaikan warna box yang lebih nyaman untuknya.Untuk merubah warna quote box ini hanya tinggal klik salah satu lingkar warna yang ada di samping quote box.
1. Pastikan sudah terdapat CSS Font Awesome di dalam template blog kamu.
2. Letakan CSS di bawah ini tepat di atas kode
]]></b:skin> atau </style>
/* QUOTE BOX BY JEJAKSERU.COM */
.kutipan .jejakseru{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 .jejakseru,.merah,.kutipan.merah i.fa{background:#9C0C0C!important}
.kutipan.biru .jejakseru,.biru,.kutipan.biru i.fa{background:#0c6d9c!important}
.kutipan.cyan .jejakseru,.cyan,.kutipan.cyan i.fa{background:#0c9c81!important}
3. Letakan kode Javascript di bawah ini tepat di atas 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 .jejakseru").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. Setelah itu kamu letakan HTML berikut di tempat yang sobat inginkan
<div class='kutipan'>
<i class="fa fa-quote-right" aria-hidden="true"></i>
<div class='jejakseru'>Dalam pandangan Bung Karno ada tiga semangat yang dibawa oleh Proklamasi Kemerdekaan kita. Yaitu: Semangat berjuang mati-matian yang penuh dengan idealisme. Semangat persatuan bulat mutlak yang tidak mengecualikan satu golongan pun. Semangat membangun dan mendirikan negara. Inilah api dari pada Kemerdekaan Kebangsaan Indonesia itu.<br/>
<cite>~ Edy Suryadi</cite></div>
<div class='jejakseru'>Kenapa dasar negara kita harus pancasila
Karena bangsa Indonesia ini adalah bangsa yang beraneka ragam, aneka ragam sukunya, aneka ragam adat istiadat nya, aneka ragam cara mencari hidupnya dan beraneka ragam keyakinan / agamanya.
Oleh karena itu para Founding Father sudah bersepakat untuk menjadikan pancasila sebagai pemersatu bangsa, karena negara ini bukan milik satu kelompok tertentu, negara ini bukan milik agama tertentu, tapi negara ini adalah milik kita bersama bangsa Indonesia.<br/>
<cite>~ Ardiansyah Surahman</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. Selesai!
Jika dirasa bermanfaat silahkan share/bagikan ke temen-temen terdekat kamu dan jangan lupa like fanspage facebook kami dan follow twitter kami agar selalu dapat informasi bermanfaat dari kami.