Multi tab wiget

Trên sidebar của blog, đôi khi chúng ta muốn tạo các multi tab để tăng tính thẩm mĩ và tiết kiệm diện tích. Hôm nay, mình giới thiệu với các bạn multi tab wiget v3 được viết bởi tác giả MBT
XEM DEMO

Thêm tab wiget vào blog

Vui lòng làm theo các bước sau,

1. Đi Blogger> Thiết kế> Chỉnh sửa HTML
2. Sao lưu mẫu của bạn
3. Tìm kiếm ]]> </ b: skin>
4. Và thêm đoạn css dưới phía trên ]]></ b: skin>

 
/*----- MBT Multi Tabbed Widget ----*/ 
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px} 
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left} 
.tabs-widget li:first-child{margin:0} 
.tabs-widget li a{color:#8F8C7C;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgECuR0NTlF6CVIGXOjPPy3-saqSqkNp5lb18u3_VQmL5zKQWkLqOxYS2dnSk1HrdWuDDkyEiocwHW2b28QCUXAsBcpNaLquyrhh9oWrsqzLcPRBPFIJOg9uTgchC_d_c1xJFq7xZ3Ew4w/s1600/tabs-widget-bg.png) left top repeat-x;padding:12px 14px;display:block;text-decoration:none;font:bold 11px Arial,Helvetica,Sans-serif;text-transform:uppercase} 
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgECuR0NTlF6CVIGXOjPPy3-saqSqkNp5lb18u3_VQmL5zKQWkLqOxYS2dnSk1HrdWuDDkyEiocwHW2b28QCUXAsBcpNaLquyrhh9oWrsqzLcPRBPFIJOg9uTgchC_d_c1xJFq7xZ3Ew4w/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none} 
.tabs-widget-content{} 
.tabviewsection{margin-top:10px;margin-bottom:10px;}

5. Tìm đoạn  <div class='column-right-inner'> hoặc <div id='sidebar-wrapper'>

<div class='tabviewsection'>

<script type='text/javascript'> 
            jQuery(document).ready(function($){ 
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show(); 
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show(); 
       
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() { 
                    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;); 
                    $(this).addClass(&quot;tabs-widget-current&quot;); 
                    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide(); 
                    var activeTab = $(this).attr(&quot;href&quot;); 
                    $(activeTab).fadeIn(); 
                    return false; 
                }); 
            }); 
        </script>

<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'> 
<li><a href='#widget-themater_tabs-1432447472-id1'>About</a></li> 
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li> 
<li><a href='#widget-themater_tabs-1432447472-id3'>Archives</a></li> 
</ul>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'> 
<b:section class='sidebar' id='sidebartab1' preferred='yes'> 
</b:section>                                       
</div>                            
                                
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'> 
<b:section class='sidebar' id='sidebartab2' preferred='yes'> 
</b:section>                                         
</div>                            
                                
<div class='tabs-widget-content tabs-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>

<div style='height:5px;clear:both;'/>
Hãy chú ý tới phần được đánh dấu màu xanh bạn có thể thay đổi tùy ý, các id được đánh dấu đỏ thì có thể phải thay đổi với từng blog sao cho đừng trùng id với các sidebar khác.



6. Bây giờ đi đến bố cục của trang và chỉnh sửa bình thường