Code | Tạo nút Tắt/Mở Đèn bằng Jquery cho Blogspot

Có nhiều hướng dẫn để tạo nút tắt/mở đèn áp dụng cho Blogger. Với tiện ích mình giới thiệu đâ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 áp dụng cho Blogger khá đơn giản. Cái khó của nó chính là bạn tùy biến vào vị trí bạn muốn.

Bước 1: Tìm đến đoạn code  </head>  và thêm vào trước nó:

<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

- Lưu lại.

*Chú ý: Nếu blog bạn đã có file JQuery.js rồi thì có thể bỏ qua bước này.

Bước 2: 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:#111211;
 outline:none;
 text-decoration:none;
}
.lightSwitcher:hover, .lightSwitcher:active, .lightSwitcher:link, .lightSwitcher:visited {
 text-decoration:underline;
 color:#ff9800;
}
#command {
 z-index:113;
 position:relative;
 padding:0;
 margin:0px;
 text-align:center;
}
#shadow {
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf5VKyXWmS4ssW02onSRz66xN78Iu8Cgct2PPVp0iBOucQ1u6lYaH5lKEAXCmb3OF5IRt62CuypfD5HVBNd2pjuK86FHAhMxEjmIyRBihfF5zZUzMLgMgjf2zOa9OpkSqLhRZP-ICh8VXC/s1600/shade-namkna-blogspot.com.png');
 left:0;
 top:0;
 width:100%;
 z-index:100;
 position:absolute;
 height: 677px;
 display: none;
}
.turnedOff {
 color:#111211;

}
</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>

Bước 3: Lưu lại  và xem thành quả.

Công việc chỉ đơn giản thế thôi. Nếu bạn vẫn chưa vừa ý thì có thể lưu ý những phần mình tô màu đậm và làm theo bước dưới đây.

Bonus: Tùy biến

Mỗi người một tính và ưa chuộng gu thẩm mỹ khác nhau. Thế nên, bạn cứ nghịch cho thỏa thích cho đến khi vừa ý.

1. background-image: Nếu không thích hình ảnh, bạn có thể điều chỉnh bằng mã màu tùy ý.
2. Color: bạn thay mã màu khác tùy thích.
3. Nếu muốn đặt vào chỗ bạn muốn, tách đoạn code sau ra khỏi và đặt nó vào vị trí bạn muốn hiển thị:

 <div id="command"><a class="lightSwitcher" href="#">Tắt Đèn</a></div>
<div id="shadow" ></div>

Nói chung, bạn cứ thay thế cho hợp với template của mình. Chúc bạn thành công!

Nguồn bài viết: http://blogchubang.blogspot.com/2016/09/share-code-tat-mo-en-bang-jquery-cho.html