Tạo Hộp Thoại Thông Báo Đổi Màu Cho Blogspot

Chắc mọi người ai cũng biết về thủ thuật này rồi :v Nên hôm nay share lại cho những người cho biết :D

Làm biếng làm thumbnail :v

Các bước thực hiện:

Bước 1: Các bạn chèn đoạn code sau vào trước thẻ </head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Bước 2: Chèn đoạn CSS sau vào trước thẻ ]]></b:skin

/*TAO HOP THOAI DOI MAU*/

.kutipan .blanter{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 .blanter,.merah,.kutipan.merah i.fa{background:#9C0C0C!important}

.kutipan.biru .blanter,.biru,.kutipan.biru i.fa{background:#0c6d9c!important}

.kutipan.cyan .blanter,.cyan,.kutipan.cyan i.fa{background:#0c9c81!important}

Bước 3: Chèn đoạn JS sau vào trước thẻ </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 .blanter").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>

 Bước 4: Chèn đoạn code sau vào nơi bạn muốn hiển thị nó

<div class='kutipan'>

<i class="fa fa-quote-right" aria-hidden="true"></i>

<div class='blanter'>Nội Dung Bạn Cần Ghi<br/>

<cite>Kí Tên Các Kiểu</cite></div>

<div class='blanter'>Nội Dung Bạn Cần Ghi<br/>

<cite>Kí Tên Các Kiểu</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>

Những phần màu đỏ là phần mà các bạn ghi nội dung trong đó nhé.

Như vậy là xong rồi. Chỉ với 4 bước đơn giản như thế thôi là có 1 hộp thoại đổi màu rồi :v

Chúc các bạn thành công!

View-soure: www.idblanter.com