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

26 nhận xét:

  1. À cái này bấm vào 3 nút kia nó đổi màu đúng k? Trc a cũng thử 1 lần rồi.

    Trả lờiXóa
  2. Share cái hover vào logo nó rung đi :)

    Trả lờiXóa
    Trả lời
    1. e xin bên a mà :v để mai mốt e mò thử cái phần rung :D

      Xóa
    2. https://notepad.vn/share/texkqca68
      Là nó đó :)

      Xóa
    3. đoạn CSS dài vãi :v thanks a :*

      Xóa
  3. Cái temp này kết hợp đủ thứ nhìn vui nhỉ :v

    Trả lờiXóa
    Trả lời
    1. dạ a :v nhìn cho nó khác khác tí chứ :v

      Xóa
  4. Vì sao nước mất anh còn rơi...Vì một người :3

    Trả lờiXóa
    Trả lời
    1. :v a Dân 47 hôm nay lạc trôi đâu đây :v

      Xóa
  5. Hay quá lâu lâu ghé thăm blog cục cưng

    Trả lờiXóa

- Không spam bừa bãi, thô tục
- Tích chọn "Thông báo cho tôi" để nhận phản hồi từ tác giả qua mail.