Đôi Chút Về Tác Giả

NGUYỄN ĐỨC HUY

Không phải ai cũng là tương lai của bạn. Một vài người chỉ lướt qua cuộc đời bạn để mang lại cho bạn một số bài học của cuộc sống.

Thích Bình Luận Chia Sẻ

BLOG CHUYÊN CHIA SẺ THỦ THUẬT & ẢNH BÌA FACEBOOK

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

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
26 Bình Luận 21:01
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
Tạo Hộp Thoại Thông Báo Đổi Màu Cho Blogspot Tạo Hộp Thoại Thông Báo Đổi Màu Cho BlogspotĐức Huy Blog8.8stars based on9reviewsChắ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ùng Tham Gia Bình Luận Nhé

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.