Bạn đã bao giờ nhìn thấy những blog có một khu vực phụ tùng theo thẻ trong thanh bên bao gồm phổ biến, gần đây và các tính năng bài viết trong một nhấp chuột duy nhất? Nó thường được gọi là phụ tùng jQuery Tabbed, mà cho phép bạn tiết kiệm rất nhiều không gian trong thanh bên giữ giao diện người dùng thân thiện cho người dùng của bạn bằng cách kết hợp 3 vật dụng khác nhau vào chỉ là một. Trong bài viết này, chúng tôi sẽ cho bạn thấy làm thế nào để thêm một jQuery Tabbed Sidebar Widget trong Blogger.

Một jQuery Tabbed Widget là gì? 

Bạn sẽ nhìn thấy rất nhiều trang web đã một tab widget ở trên cùng của thanh bên của họ mà giữ ba vật dụng tại chỉ là một nơi cung cấp cho bạn khả năng chọn một để xem trong số đó. Nó không chỉ cho phép bạn tiết kiệm một chút không gian trong thanh bên mà còn giữ thiết kế blog của bạn sạch sẽ và chuyên nghiệp. Rất nhiều trang web phổ biến tên lớn đang sử dụng kỹ thuật tương tự để hiển thị thêm các vật dụng bên trong không gian ít hơn. Trong bài viết này, chúng tôi sẽ chỉ cho các bạn cách làm thế nào để thêm một jQuery tab phụ tùng bên trong blogger và sẽ hướng dẫn bạn qua từng bước chi tiết.

Tạo jQuery Tabbed Widget trong Blogger:

Điều đầu tiên bạn cần làm là để đi đến Blogger >> Template >> Edit HTML và dán mã CSS sau ngay trên ]]> </ b: skin> tag. Nếu bạn có một tập tin bảng CSS Style riêng biệt sau đó bạn cũng có thể thêm CSS sau nó.

/* Tab Widget */
.tabviewsection {
background: #f8f8f8;
text-transform: uppercase;
border-bottom: 5px solid #f34246;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
float: left;
width: 100%;
}
.tabs-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabs-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: left;
border-right: 2px solid #fff;
}
.tabs-widget li a {
color: #fff;
display: block;
padding-right: 16.5px;
padding-left: 16px;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabs-widget-content {
}
.tabviewsection {
margin-top: 10px;
margin-bottom: 10px;
}
.tags_tab {
width: 80px;
text-align: center;
}
.about_tab {
width: 96px;
text-align: center;
}
li.laster {
border: 0px;
width: 120px;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabs-widget li a {
padding-right: 20px;
padding-left: 20px;
}
.tabs-widget {
height: 51px;
}
.tw-authors {
width: 570px;
}
.tabviewsection h2 {
display: none;
}
.tabs-widget li a.tabs-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #f34246;
font-size: 14px;
text-transform: capitalize;
}
.tabs-widget li a {
background: #f34246;
}

Bây giờ bước này hoàn toàn phụ thuộc vào các mã hóa của mẫu blogger của bạn là nhà thiết kế khác nhau có những cách khác nhau của mã hóa nhưng chúng tôi sẽ chia sẻ một cách được sử dụng phổ biến hơn trong các mẫu. Bạn phải tìm đến các mã của khu vực phụ tùng Sidebar của bạn. Tìm kiếm <div id = 'sidebar-wrapper'> và ngay dưới nó dán đoạn sau của mã hóa.

<!-- Tab Widget [start] -->
<div class='tabviewsection'>
<script type='text/javascript'>
  jQuery(document).ready(function($){
                $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
                $("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
                $(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();
      
                $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
                    $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
                    $(this).addClass("tabs-widget-current");
                    $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
                    var activeTab = $(this).attr("href");
                    $(activeTab).fadeIn();
                    return false;
                });
            });       
 </script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
  <li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>About</a></li>
  <li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
  <li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>Popular</a></li>
</ul>
<!-- Tab Widget 1 -->
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
 </b:section>                                     
</div> 
                        
<!-- Tab Widget 2 -->               
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
  
 </b:section>                                       
</div>                           
                              
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<!-- Tab Widget 3 -->
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                       
</div>
</div>
<!-- Tab Widget [endt] -->

Một khi tất cả mọi thứ được thực hiện và phủi bụi, lưu mẫu bằng cách nhấn "Save Template" ở đầu trang. Bây giờ hãy vào Layout khu vực và bạn sẽ nhận thấy ba lĩnh vực phụ tùng ngay trên sidebar của bạn. Bạn có thể thêm các vật dụng hai ba khu vực và nó xuất hiện trong hình thức của các tab khi bạn xem nó trực tiếp trên trang web của bạn.

 Chúng tôi hy vọng hướng dẫn này đã giúp vấn đề lớn nhất của bạn là làm thế nào để thêm một jquery tab phụ tùng bên trong blogger. Với CSS, bạn có thể tạo kiểu các vật dụng tab theo cái nhìn của blog của bạn. Chia sẻ suy nghĩ và đề xuất của bạn về tiện ích này trong các bình luận dưới đây, bạn có thể xem demo của tiện ích này tại đây .