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

0
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.
1
huhu

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
#Tag: blogcodethủ thuật

Phổ biến trong tuần

Bạn có thể quan tâm

Đăng ký theo dõi

Hỏi tôi khi cần!