Cách tạo Button chia nội dung bài viết đơn giản mà đẹp cho Blogspot

tao nut chia noi dung bai viet don gian ma dep cho blogspot
Hình ảnh chỉ mang tính chất minh họa

Đây là một thủ thuật khá thú vị dành cho những bạn nào có bài viết dài mà muốn chia thành nhiều trang cho dễ đọc, tức là bạn sẽ phân trang nội dung cho bài viết của bạn.

Tác dụng của thủ thuật này sẽ giúp bài viết của bạn trông chuyên nghiệp và bắt mắt hơn, đặc biệt là những trang chuyên viết về những câu chuyện dài, viết sách, hoặc đơn giản là bạn chỉ muốn tách nội dung thành những phần riêng biệt mà thôi,...

Trong bài viết này mình cũng sẽ áp dụng thủ thuật này để cho các bạn có thể hình dung được là thủ thuật này như thế nào và nó hoạt động ra làm sao.

  • TAB 1
  • TAB 2
  • TAB 3
  • Socbay Blogs xin chào bạn!
  • Socbay Blogs chúc bạn một ngày vui vẻ...!
  • Socbay Blogs rất vui được giúp bạn...!

Bây giờ, chúng ta cùng bắt đầu thực hiện nào.

Tạo nút chia nội dung bài viết

Bước 1. Đăng nhập vào tài khoản Blogger > Chủ đề > Chỉnh sửa HTML.

Bước 2. Sao chép đoạn mã JQuery dưới đây và dán chúng vào giữa hai thẻ <body></body>, nhưng tốt nhất là nên đặt vào trước thẻ đóng </body>.

<script type='text/javascript'>
$(document).ready(function(){
    $("ul#tabs-button li").click(function(e){
        if (!$(this).hasClass("button-active")) {
            var tabNum = $(this).index();
            var nthChild = tabNum+1;
            $("ul#tabs-button li.button-active").removeClass("button-active");
            $(this).addClass("button-active");
            $("ul#tab-content li.button-active").removeClass("button-active");
            $("ul#tab-content li:nth-child("+nthChild+")").addClass("button-active");
        }
    });
});
</script>

Bước 3. Tiếp đến, sao chép đoạn mã CSS bên dưới rồi chép đoạn mã đó vào trước thẻ đóng ]]></b:skin> và nhấn vào nút Lưu chủ đề.

ul#tabs-button {list-style-type:none; padding:0; font-family:monospace}
ul#tabs-button li {display:inline-block; background:#fff; padding:0 20px; margin-bottom:3px; color:#111; cursor:pointer; border:1px solid #ccc}
ul#tabs-button li:hover, ul#tabs-button li.button-active {background:#069; color:#fff; border:1px solid #069}
ul#tab-content {list-style-type:none; margin:0; padding: 10px; background:#f1f1f1}
ul#tab-content li {display:none}
ul#tab-content li.button-active {display:block}

Bước 4. Bây giờ, bạn hãy đặt đoạn mã HTML hiển thị vào vị trí mà bạn muốn. Nếu bạn đặt trong bài viết, trang tĩnh thì hãy nhớ là để bài viết, trang tĩnh của bạn ở dạng HTML nhé!

<ul id="tabs-button">
    <li class="button-active">BUTTON 1</li>
    <li>BUTTON 2</li>
    <li>BUTTON 3</li>
</ul>
<ul id="tab-content">
    <li class="button-active">
        <p>Nội dung của BUTTON 1</p>
    </li>
    <li>
        <p>Nội dung của BUTTON 2</p>
    </li>
    <li>
        <p>Nội dung của BUTTON 3</p>
    </li>
</ul>

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