Tắt/Mở đèn - Thủ thuật hiệu ứng tắt mở đèn cho Blogger

Nếu bạn dự định làm một blog xem tivi thì thủ thuật này rất hữu ích, hiện nay có khá nhiều trang đang áp dụng thủ thuật này. Với thủ thuật blogger này thì blog của bạn nhìn sẽ thực sự giống một rap chiếu phim tại nhà. Cùng thiết kế website thật hiệu quả nào.

>>Image - Thủ thuật LazyLoad load ảnh theo trình tự trong bài viết Blogger
>>FeedBurner - Thủ thuật tạo FeedBurner cho Blogger
>>Sitemap - Thủ thuật tạo sơ đồ trang cho BLogger Version 3 
>>Sitemap - Thủ thuật tạo sơ đồ trang cho BLogger Version 2

>>Sitemap - Thủ thuật tạo sơ đồ trang cho BLogger Version 1 

>>Widget - Thủ thuật chia Widget thành nhiều cột bằng thẻ Table trong Blogger 
>>Images - Thủ thuật hiệu ứng làm mờ hình ảnh trong bài viết Blogger 
>>Lỗi ảnh - Thủ thuật sửa lỗi ảnh tràn quá khung bài viết Blogger 
>>Slide - Thủ thuật Slide JQuery bài viết ở trang chủ cho Blogger 
>>Related Posts - Thủ thuật bài viết liên quan có hình ảnh và bài viết cho Blogger
>>Related Posts - Thủ thuật bài viết liên quan có hình ảnh cho Blogger
>>Navbar - Thủ thuật làm trong suốt thanh Navbar trong Blogger
>>Label / Archive - Thủ thuật hiện tiêu đề trong Label / Archive của BLogger
>>Chữ nhấp nháy - Thủ thuật tạo chữ nhấp nháy trong Blogger 

1- Đăng nhập vào Blog

2- Vào Thiết Kế (Mẫu)

3- Chọn Chỉnh sửa HTML

4- Dán đoạn code sau vào trước thẻ đóng </head>:

<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.jshttp://thietkewebplus.googlecode.com/files/jquery.min.jstype="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/AVvXsEgPl5KBMdHy7f0tYvXQKX__TVakCtrVWDFmGfvnpkW9QtTbaXM-idk31OI4iOWjjBEoVOEF4_2mPTynbe31rnMgS44OaTNltstqD9xAuMrcugWEBXZ746GA6_2dMIzdm6LHINl_vR7_sIXD/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>

7. Bấm Lưu Mẫu  (save template) lại.