Thêm code ẩn hiện banner, quảng cáo cho blogspot

Chào các bạn, cũng đã lâu rồi mình chưa viết bài gì về chủ đề blogspot. Nên nay mình sẽ viết bài chia sẻ cho các bạn một code khá thú vị đó là code ấn hiện banner, quảng cáo cho blogspot, thủ thuật này bạn có thể áp dụng cho mọi loại web khác nữa nhé, code này nhằm mục đích tránh gây phiền toái cho người đọc, bằng cách này người đọc có thể ẩn nó đi rất đơn giản. Thôi không luyên thuyên nữa, cầm chuột lên và làm theo các bước sau đây nào.

HƯỚNG DẪN CÁCH LÀM:

Bước 1: Vào bố cục trong Blogger.com và vào thêm tiện ích rồi nhập đoạn code này vào trong đó

<div id='hide-qc'>
<li>
<span class='setting-label'>Ẩn quảng cáo</span>
<input id='hide-qc' name='' type='checkbox' value=''/>
<div class='toggle'>
<label for='toggle-hide-banner'><i></i>
</label></div></li></div>

Bước 2: Vào trang chỉnh sửa HTML Tìm thẻ ]]></b:skin> và thêm css này lên nó (Bước này làm đẹp cho phần code trên)

/* Hide banner */
#hide-qc li{width:100%;float:none;box-sizing:border-box;background:#fff;border:1px solid #eee;padding:8px 10px;margin-bottom:15px}
input[type=checkbox]{display:none}
.toggle{position:relative;float:right;width:41px;height:25px}
.toggle label,.toggle i{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;background:#fff}
.toggle label{width:42px;height:24px;border-radius:35px;border:2px solid #e5e5e5;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;cursor:pointer}
.toggle i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:40px;-webkit-box-shadow:0 2px 5px rgba(0,0,0,.4);box-shadow:0 2px 5px rgba(0,0,0,.4);background:#fff;-webkit-transition:all .3s cubic-bezier(.275,-.45,.725,1.45);-o-transition:all .3s cubic-bezier(.275,-.45,.725,1.45);transition:all .3s cubic-bezier(.275,-.45,.725,1.45)}
input[type=checkbox]:active+.toggle i{width:35px}
.hd-qc input[type=checkbox]:active+.toggle label,.hd-qc input[type=checkbox]+.toggle label{border:12px solid #e81123}
.hd-qc input[type=checkbox]+.toggle i{left:21px}
.hd-qc input[type=checkbox]:active+.toggle label{border:16px solid #e5e5e5}
.hd-qc input[type=checkbox]:active+.toggle i{left:14px}

Bước 3: Bước cuối, hãy thêm đoạn js + css bên dưới này lên trên thẻ </body> (Bước này mục đích là cho code ở B1 chạy)

<!-- Hide qc -->
<style>
.hd-qc .class,.hd-qc #id{display:none!important}
</style>
<script type='text/javascript'>
//<![CDATA[
document.getElementById("hide-qc").addEventListener("click", function () {
    var _0xbabbx3 = document.body.classList.toggle("hd-qc");
    localStorage.setItem("hide-banner", _0xbabbx3)
});
jQuery(document).ready(function (_0xbabbx4) {
    _0xbabbx4(function () {
        _0xbabbx4("hide-qc").click(function (_0xbabbx5) {
            _0xbabbx5.preventDefault()
        })
    })
})
//]]>
</script>

Chú ý: Trong đoạn css .hd-qc .class, .hd-qc #id, phần .class, #id các bạn thay thành đoạn code banner, quảng cáo nhé Chúc bạn thành công!