Hiệu ứng tắt đèn đẹp mắt với JQuery

Thủ thuật này hợp với những Blog xem phim hay dùng khi xem Clip. Hiệu ứng tắt đèn thực sự đẹp mắt sẽ làm Blog bạn có không khí như một rạp chiếu phim. Rất thú vị phải không nào. Cách làm cũng không hề khó.

Xem Demo tại đây: Hiệu ứng tắt mở đèn dùng JQuery

Hoặc demo bằng hình ảnh:

Bước 1: Vào Mẫu >>> Chỉnh sửa HTML (Hãy cẩn thận sao lưu mẫu trước đề phòng có vấn đề phát sinh)

Bước 2: Tìm thẻ </head> và dán trước nó dòng code sau:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function(){

$("#darkness").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){

ess").is(":hidden"))
$(t
$("#darkness").toggle();
if ($("#dark
nhis).html("Turn off the lights").removeClass("turnedOff");

);
}
else
$(this).html("Turn on the lights").addClass("turnedOff
");
});
//]]>


</script>

Kiểm tra xem trong Template bạn đã có Jquery (Dòng màu đỏ) chưa, nếu chưa có thì thêm vào còn có rồi thì bỏ dòng màu đỏ đi. (Nhớ là Blog chỉ được có 1 phiên bản JQuery thôi đó)

Bước 3: Tìm tiếp thẻ: ]]></b:skin> rồi dán vào phía trước nó dòng code sau:

/* Turn off the lights
----------------------------------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJZZqzsRFZmMceglzp29kJKJVMII47oWUowKzpk4FOGecw4WXi6FduvJ4h0zwno8x8CDdfDAZ5e2d9TFdVg4h2MBMn6IRxdkth495Hoa1SqcN1yct55CQb6-EzwUaX39Cq0Q_DhGlH8ZIU/s1600/lights-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja947LdEoDdNmMsytHJe489hwaptd3UuN6LJr2ajE4okBAEWBJsIGInusUe7OP4a6g5VIEQGXi4oEK8OLaGp7js0-AVtIzzE5SuyxV-X3ooBq6Dgrun9zoVmOuHzpqryWiUhDBsOWJMVEA/s1600/lights-off.png);
}
#darkness {
background:#000;
opacity:0.8;
filter:alpha(opacity=80);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Trong đó: Dòng màu đỏ là ảnh đèn, bạn có thể thay thế bằng hình khác tùy ý.

Bước 4: Tiếp tục tìm đến thẻ </body> rồi thêm vào trước nó dòng sau:

<div id='darkness'/>

Bước 5: Lưu template lại.

Bước 6: Khi đăng bài mới bạn chuyển sang chế độ HTML rồi dán Code sau:

<center>

<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a></div>

<div id="lightsVideo">

Dán code Video tại đây

</div>

</center>

Thay chữ "Turn off the lights" nếu bạn muốn.

Không nhất thiết là video bạn cũng có thể dùng cho cả ảnh, text... nữa.

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