Nội dung bài viết dạng tab cho Blogspot chuyên nghiệp

Để tạo nội dung dạng tab cho blog ta thực hiện như sau:
Bước 1. Chép đoạn code sau đặt đặt trước thẻ </body>

<script type='text/javascript'>

$(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. Chép đoạn CSS sau đặt trước thẻ ]]></b:skin> hoặc bạn có thể bổ sung <style type='text/css'>

 {nội dung code bên dưới} </style> và đặt trước thẻ </head>

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. Vào bài đăng chọn đăng bài mới chọn thẻ HTML và dán code sau vào chỉnh sửa tiêu đề tab theo ý thích đặt nội dung bài viết trong thẻ <h2> {đặt nội dung} </h2>

<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>

Demo