Thêm Multi Tab Sidebar vào Blogger

How to Add Multi Tab Sidebar Widget in Blogger

Lướt qua nhiều blog chắc hẳn các bạn cũng đã thấy bên thanh sidebar của họ có các tab dùng để chứa các widget vô cùng tiện lợi. Người dùng chỉ cần click vào tiêu đề từng tab để chuyển nội dung. Nếu bạn muốn có nhiều widget trên trang index mà không muốn chúng chiếm quá nhiều diện tích thì Multi Tab Sidebar sẽ là một thủ thuật hữu ích cho bạn.

Thêm Multi Tab Sidebar vào Blogger

Bước 1: Vào Mẫu >> Chỉnh sửa HTML và dán đoạn code dưới đây vào trước thẻ ]]></b:skin>

  /* Tab Widget By Iris-tips.blogspot.com */
.tabbedviewsection {
background: #f8f8f8;
text-transform: uppercase;
border-bottom: 5px solid #29C621;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
float: left;
width: 100%;
}
.tabbed-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabbed-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: left;
border-right: 2px solid #fff;
}
.tabbed-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;
}
.tabbed-widget-content {
}
.tabbedviewsection {
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;
}
.tabbed-widget li a {
padding-right: 20px;
padding-left: 20px;
}
.tabbed-widget {
height: 51px;
}
.tw-authors {
width: 570px;
}
.tabbedviewsection h2 {
display: none;
}
.tabbed-widget li a.tabbed-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #29C621;
font-size: 14px;
text-transform: capitalize;
}
.tabbed-widget li a {
background: #29C621;
} 

Bước 2: Tìm đoạn code sau

  <div id='sidebar-wrapper'> 

Và thêm vào bên dưới đoạn code vừa tìm script sau

 <!-- Tab Widget [start] --><div class='tabbedviewsection'><script type='text/javascript'> jQuery(document).ready(function($){ $(&quot;.tabbed-widget-content-widget-themater_tabs-1432447472-id&quot;).hide(); $(&quot;ul.tabbed-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabbed-widget-current&quot;).show(); $(&quot;.tabbed-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show(); $(&quot;ul.tabbed-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() { $(&quot;ul.tabbed-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabbed-widget-current a&quot;); $(this).addClass(&quot;tabbed-widget-current&quot;); $(&quot;.tabbed-widget-content-widget-themater_tabs-1432447472-id&quot;).hide(); var activeTab = $(this).attr(&quot;href&quot;); $(activeTab).fadeIn(); return false; }); }); </script><ul class='tabbed-widget tabbed-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='tabbed-widget-content tabbed-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='tabbed-widget-content tabbed-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'><b:section class='sidebar' id='sidebartab2' preferred='yes'> </b:section> </div>
<!-- Tab Widget 3 --><div class='-content tabbed-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'><b:section class='sidebar' id='sidebartab3' preferred='yes'></b:section> </div></div><!-- Tab Widget [endt] --> 

Lưu ý: Tùy thuộc vào thiết kế của từng theme mà đoạn code <div id='sidebar-wrapper'> có thể thay đổi

Bước 3: Sau đó bạn Lưu template lại và vào Bố cục, bạn sẽ thấy hình ảnh như bên dưới và sau đó bạn chỉ cần thêm tiện ích mà bạn thích vào các tab thôi.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by mbx/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm