Thứ Tư, ngày 25 tháng 5 năm 2016

Share CODE Tắt Mở Đèn bằng Jquery cho Web/Wap/Blogger Blogspot

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. Code này được leech bên terocket 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
   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('http://4.bp.blogspot.com/-l0UBaeZLOv0/T5V908IVIFI/AAAAAAAABQg/Nkug4cVUtIs/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!