Hướng dẫn tạo Botton ẩn hiện nội dung cho blogspot

Botton ẩn hiện nội dung cho blogspot

Chào các bạn!
Hôm nay tình cờ mình thấy trên trang Askwithloud.com một thủ thuật rất hay đó là tạo botton ẩn hiện nội dung cho blog. Thủ thuật này không mới nhưng đa số cái mà các blogger đã share nó chưa thật sự đẹp. Hôm nay 4Tipsvn share lại cách tạo botton ẩn hiện nội dung cho blogspot của Askwithloud để các bạn dễ tham khảo.
Các bước đăng nhập blogger rồi chỉnh sửa Mẫu... mình đã đề cập qua rất nhiều ở bài trước nên giờ mình bỏ qua bước này, vào cái chính thôi nhé!
Bước 1: Coppy và dán đoạn CSS sau lên trước (trên) thẻ ]]></b:skin>

#flippy {text-align:center;}
#flippy button {margin:10px auto;cursor:pointer;font-weight:400;font-family:'Karla',sans-serif;background-color:#383434;color:#fff;padding:10px 20px!important;text-transform:uppercase;border:none;border-radius:3px;opacity:0.95;transition:all 0.3s ease-out;}
#flippy button:hover, #flippy button:focus {outline:none;opacity:1;color:#fff;}
#flippanel {padding:1px;text-align:left;background:#fdfdfd;border:1px solid #eee;}
#flippanel {padding:24px;display:none;}
#flippanel img {background:#f9f9f9;margin:10px auto;}

Bước 2: Coppy và dán đoạn mã sau lên trước (trên) thẻ </body>

<script type='text/javascript'>
// Spoiler
$(document).ready(function() {
    $("#flippy").click(function() {
        $("#flippanel").slideToggle("normal");
    });
});
</script>

Bước 4: Lưu template
Bước 5: Coppy và dán đoạn mã sau vào bài viết, nơi mà các bạn muốn botton ẩn hiện nội dung xuất hiện.

<div id="flippy"><button>Spoiler</button></div>
<div id="flippanel">
Nội dung
</div>

Chúc các bạn thành công!