Tabbed Widget Blogspot siêu đẹp (Multi Tab)

Tabbed widget hay còn có cái tên gọi mà multi tab, là tiện ích widget tích hợp cùng lúc 3 đến 4 tab trong một tiện ích nhằm thu gọn sidebar trông rất chuyên nghiệp.

Các bạn có thể xem demo trên chính blog của mình luôn nhé.

Làm sao để thêm tabbed widget vào blogspot.

Để làm được việc này thì chúng ta có 3 bước, và những bước này chúng ta thực hiện trên templates blogspot của mình nhé.

1. Thêm css vào blogspot

Thêm đoạn code sau vào trước ]]></b:skin> hoặc thêm trong thẻ <style> </style>

/* Multi Tab khamphablog.com*/
.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 js

Thêm đoạn js sau vào 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>

3. Thêm tabbed widget

Thêm đoạn code sau vào nơi cần hiển thị tabbed widget, thông thường thì thêm vào sidebar vào dưới thẻ

<div id="sidebar-wrapper">

Tùy vào từng giao diện mà chọn nơi thêm vào cho thích hợp nhé

<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'>
<li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li> <li class='multitab-tab'><a href='#multicolumn-widget-id3'>
<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>
</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>

Sau đó bấm lưu mẫu (templates) lại và quay trở lại phần bố cục blog chúng ta thấy có thêm 3 tiện ích widget rồi đúng không nào. Lúc này các bạn thêm gì tùy ý mình nhé. Chúc các bạn thành công.

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