[Tips] - Tabber widget chuyên nghiệp cho blogspot (MultiTab)

Tabber widget hay còn gọi là Multi Tab cho blogspot, Là một tiện ích nằm trên widget mà các mẫu blogspot nước ngoài thường hay tích hợp. Là tiện ích chia widget trên blog của bạn ra thành 3 hay 4 tab rất chuyên nghiệp.

Làm sao để thêm tabber widget vào blogspot?

1. Thêm css

Thêm đoạn css sau trên thẻ ]]></b:skin> trong templates blogspot

/* 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}

2. Thêm script

Thêm đoạn js sau trên thẻ </head>

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

3. Tìm vị trí đặt tabber widget

Thường thì tiện ích tabber widget này chúng ta thường thấy nằm ở sidebar,nên các bạn tìm đến sitebar trên blogspot, thường thì một blog cơ bản thì đoạn code sidebar sẽ là

<div id='sidebar-wrapper'>

Tùy mỗi blog mà có mỗi đoạn code khác nhau, và chúng ta chèn đoạn code sau ngay bên dưới nó

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

 Cuối cùng là lưu templates blogspot của mình lại và vào phần bố cục trên blogspot tìm đến phần sidebar và các bạn sẽ thấy điều bất ngờ. Chúc các bạn thành công.

Bài Viết Cùng Chủ Đề

• [Tips] - Tự làm code chuẩn seo cho blogspotChào các bạn nói đến seo blogspot thì việc đầu tiên chúng ta cần làm là tạo code chuẩn seo cho templates, Bài này mình ...
• [Tips] - Menu Responsive BlogspotNhư những bài trước mình cũng nói khá nhiều về Responsive cho các bạn và cũng có những bài hướng dẫn cách tích hợp Resp ...
• Kỹ Thuật Tối Ưu SEO Onpage Cho Blogspot Và Website Kỹ Thuật Tối Ưu SEO Onpage Cho Blogspot Và Website  từ A tới Z cho website và blogspot: Bao gồm những kỹ thuật tối ưu ...
• [Tips] - Làm đẹp widget nhãn (label) blogpsotNhãn hay còn gọi là Label trong blogspot là một phần không thể thiếu trong blogpsot nhằm giúp blogspot tăng pagera ...
• [Tips] - Thu gọn bài viết blogspot với thumbnail đẹpThu gọn bài viết hay còn gọi là rút ngắn bài viết ở trang chủ hay ở bất kỳ trang nào cần hiển thị thu gọn bài viết là m ...