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.

XEM DEMO

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