Tiện ích Multi Tab Pro trên Sidebar cho Blogger

Hiện nay trên rất nhiều Template có đi liền với tiện ích Multi Tab gắn trên Siderbar, nếu bạn đang có ý định tạo mình một Template tạp chí thì Multi Tab sẽ là lựa chọn hữu ích cho bạn. Tiện ích này giúp cho blog trở nên khoa học hơn, tạo sự gọn gàng, bắt mắt, dễ cài đặt. Bài viết sau đây mình sẽ giới thiệu đến các bạn tiện ích Multi Tab Pro do bác Arlina thiết kế.

Tiện ích Multi Tab Pro trên Sidebar cho Blogger

Các bước thực hiện
Bước 1: Thêm đoạn code sau lên trên thẻ ]]></b:skin>

/* Multi Tab Widget */
.multitab-section{background:#fff;text-transform:uppercase;width:100%}
.multitab-widget{list-style:none;margin:0 0 10px;padding:0}
.multitab-widget li{list-style:none;padding:0;margin:0;float:left}
.multitab-widget li a{background:#22a1c4;color:#fff;display:block;padding:15px;font-size:13px;text-decoration:none}
.multitab-tab{border:0;width:33.3%;text-align:center}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}

Bước 2: Thêm đoạn code sau lên trên thẻ </body>

<script type='text/javascript'>
//<![CDATA[
// Multi tab widget
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
</script>

Bước 3: Thêm đoạn code sau bên dưới ID của Sidebar trên blog của bạn. Ví dụ: <div id='sidebar-wrapper'>

<div class='multitab-section'>
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</div>
</div>

Như vậy các bạn đã tạo xong cho blog của mình tiện ích Multi Tab khá bắt mắt, đơn giản dễ làm. Mọi thắc mắc các bạn có thể để lại bên dưới. Lưu mẫu để hoàn tất nhé!

Widget by Arlina
Nguồn: dongvietblog.com