Like Page để cập nhật tin mới ngay trên facebook nhé

Hướng dẫn tạo widget dạng Tab cho Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách tạo Tab widget nội dung cho blogspot. Bạn có thể để nội dung hoặc widget từ bên ngoài để tiết kiệm không gian hiển thị.

Mình đi vào vấn đề luôn vì cách làm tương đối đơn giản.
Hướng dẫn tạo widget dạng Tab cho Blogspot

Hướng dẫn tạo widget dạng Tab cho Blogspot

Bước 1: Bạn tìm đến thẻ đóng </head> và dán đoạn Javascript này lên phía trên
<script type="text/javscript>
$(document).ready(function(){
    $("ul#tabs li").click(function(e){
        if (!$(this).hasClass("active")) {
            var tabNum = $(this).index();
            var nthChild = tabNum+1;
            $("ul#tabs li.active").removeClass("active");
            $(this).addClass("active");
            $("ul#tab li.active").removeClass("active");
            $("ul#tab li:nth-child("+nthChild+")").addClass("active");
        }
    });
});
</script>
Bước 2: Thêm CSS bạn tìm đến thẻ ]]></b:skin và dán đoạn CSS sau lên phía trên
ul#tabs {
    list-style-type: none;
    padding: 0;
    text-align: center;
}
ul#tabs li {
    display: inline-block;
    background-color: #32c896;
    border-bottom: solid 5px #238b68;
    padding: 5px 20px;
    margin-bottom: 4px;
    color: #fff;
    cursor: pointer;
}
ul#tabs li:hover {
    background-color: #238b68;
}
ul#tabs li.active {
    background-color: #238b68;
}
ul#tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#tab li {
    display: none;
}
ul#tab li.active {
    display: block;
}
Bước 3: HTML hiển thị tuỳ vào mục đích sử dụng bạn có thể đặt ở vị trí nào để sử dụng theo mục của bạn
<ul id="tabs">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    <li>Tab 4</li>
    <li>Tab 5</li>
</ul>
<ul id="tab">
    <li class="active">
        <h2>Nội dung cho tab 1</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 2</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 3</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 4</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 5</h2>
    </li>
</ul>
Chúc bạn thành công, hy vọng với thủ thuật nhỏ này sẽ giúp ích cho bạn.
Code: Klszone

1 nhận xét:

- Bình luận của bạn sẽ được kiểm duyệt trước khi xuất bản

- Những bình luận mang tính xây dựng đóng góp bài viết mới được duyệt

- Vui lòng KHÔNG bình luận thô tục, không dấu, chèn các liên kết bên ngoài, bình luận không liên quan hoặc quá ngắn

- Hãy là con người văn minh từ những câu nói