Mình xin chia sẻ code tắt mở đèn bằng JQUERY cho blogspot. Đầu tiên hãy tìm hiểu chút về nguyên lý của code này. Đây là sự kết hợp của css và jquery. css sẽ đóng vai trò tạo 1 class làm mờ nền hoặc làm đen nền tùy vào bạn muốn nó như thế nào. Sau đó jquery sẽ đảm nhận việc thêm class và ẩn class đó khi bạn click. Những bạn nào không hiểu cũng có thể comment mình sẽ hỗ trợ
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Thiết Kế (Mẫu)
3- Chọn Chỉnh sửa HTML
<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
- Nếu blog bạn đã có file JQuery.js rồi thì có thể bỏ qua bước 4 này.
5. Bấm Lưu Mẫu (save template) lại.
6- Tạo 1 widet HTML/Javarscip và dán đoạn code sau vào:
<style>
.lightSwitcher {
z-index:113;
padding:0;
margin:0;
color:#99FF33;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover, .lightSwitcher:active, .lightSwitcher:link, .lightSwitcher:visited {
text-decoration:underline;
color:#99FF00;
}
#command {
z-index:113;
position:relative;
padding:0;
margin:0px;
text-align:center;
}
#shadow {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzwiU6Fx5lOGF76wJI8yzyfTfkEuw5MIpY9QEdcZzccg4Oxfi8RDTRdqrpKDfUyNOu73LVnAZyg1_zdOV3Y9s8Mqp-DbPsDB67tp0kRNSzXtQ5sG0xADvx9ew38btkMilm-iTQmSGY2laU/s1600/shade-namkna-blogspot.com.png');
left:0;
top:0;
width:100%;
z-index:100;
position:absolute;
height: 677px;
display: none;
}
.turnedOff {
color:#ffff00;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
$("#shadow").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#shadow").toggle();
if ($("#shadow").is(":hidden"))
$(this).html("Tắt Đèn ").removeClass("turnedOff");
else
$(this).html("Bật Đèn ").addClass("turnedOff");
});
});
</script>
<div id="command"><a class="lightSwitcher" href="#">Tắt Đèn</a></div>
<div id="shadow" ></div>
5. Bấm Lưu Mẫu (save template) lại.
Những website khác các bạn cũng làm tương tự, sử dụng code như vậy
Chúc thành công!
