Hướng dẫn code Tắt mở đèn với Jquery

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. Blog của bạn nhìn sẽ thực sự giống một rap chiếu phim tại nhà với đoạn code này.
Bấm vào bên dưới để xem demo:

Tắt Đèn

☼ 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

   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.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/AVvXsEhOfHLKAHK7pupHk0U1kQ6Snn4qct951cqgtLk2MHdb57pg6NhW47XvHV21nzlYj6MjMxglER27qL3HOuFNofnAYefvr2dr53tZ_NInAIByCCNCwID3dke6YjnjvdLEBFtC5RnD2eSN9v3P/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. 

Chúc thành công! 

Chủ đề: