Multi tab wiget giống WordPress

Để tiết kiệm diện tích trên sidebar thì giải pháp tốt nhất sẽ là multi tab wiget, nhiều tab wiget nằm ở một chỗ. Lúc trước, mình đã giới thiệu với các bạn một mẫu Multi tab wiget , hôm nay mình giới thiệu một mẫu khác mang phong cách của WordPress.

VIEW DEMO

#Thêm CSS

1. Đăng nhập Blogger

2. > Mẫu > chỉnh sửa HTML

3. > Tìm thẻ ]]></b:skin>

4. > Chèn code dưới vào trên thẻ vừa tìm được

/*---- Wordpress Style MBT Menu Tabs----*/
.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px} 
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left} 
.MBT-tabs li:first-child{margin:0} 
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;} 
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none} 
.MBT-tabs-content{background:#212121} 
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

#Thêm HTML

1. > Tìm thẻ <div class='column-right-inner'> hoặc <div id='sidebar-wrapper'>
2. > Chèn code dưới vào dưới thẻ vừa tìm được

<div class='MBT-tabviewsection'>
<script type='text/javascript'> 
            jQuery(document).ready(function($){ 
                $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide(); 
                $(&quot;ul.MBT-tabs-widget-MBT-id li:first a&quot;).addClass(&quot;MBT-tabs-current&quot;).show(); 
                $(&quot;.MBT-tabs-content-widget-MBT-id:first&quot;).show(); 
                $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).click(function() { 
                    $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).removeClass(&quot;MBT-tabs-current a&quot;); 
                    $(this).addClass(&quot;MBT-tabs-current&quot;); 
                    $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide(); 
                    var activeTab = $(this).attr(&quot;href&quot;); 
                    $(activeTab).fadeIn(); 
                    return false; 
                }); 
            }); 
        </script>
<ul class='MBT-tabs MBT-tabs-widget-MBT-id'> 
<li><a href='#widget-MBT-id1'>Subscribe</a></li> 
<li><a href='#widget-MBT-id2'>Latest Tricks</a></li> 
<li><a href='#widget-MBT-id3'>Search</a></li> 
</ul>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'> 
<b:section class='sidebar' id='sidebartab1' preferred='yes'> 
</b:section>                                       
</div>   
<div style='clear:both;'/>                        
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'> 
<b:section class='sidebar' id='sidebartab2' preferred='yes'> 
</b:section>                                         
</div>                
<div style='clear:both;'/> 
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'> 
<b:section class='sidebar' id='sidebartab3' preferred='yes'> 
</b:section>                                        
</div>
</div> 
<div style='clear:both;'/>

Lưu ý:

• Phần màu xanh có thể thay tùy ý
• Phần màu đỏ chỉ thay khi báo lỗi trùng id, có thể thay thành sidebar10 chẳng hạn - miễn sao không trùng id là được

#Sử dụng

Đi đến phần bố cục rồi kéo wiget vào 3 vị trí như trong hình hoặc thêm wiget vào 3 vị trí trong hình rồi lưu bố cục lại.
Bạn nên chỉnh cho sidebar rộng ra một chút thì nhìn sẽ đẹp hơn.

MBT