Multi tab widget kiểu mới cho Blogspot

Multi Tabbed Widget là tiện ích được sử dụng khi trên Blog bạn có chứa khá nhiều widget. Một giải pháp thường được các Blogger áp dụng là chia footer-wrapper làm nhiều cột để chứa các widget này. Tuy nhiên, điều này không phải ai cũng thích, nhất là các blog được thiết kế mang phong cách báo chí. Từ đó mới xuất
hiện tiện ích gọi là Multi Tabbed Widget.Tiện ích này xuất hiện từ khá lâu, mà bắt nguồn từ các Blog sử dụng nền tảng Wordpress, sau đó được các Pro Blogger “bào chế” để áp dụng cho Blogspot.
Sử dụng Multi Tabbed Widget không những giúp tiết kiệm không gian trên Blog, làm cho Blog của bạn trông gọn gàng hơn, mà còn có thể giúp tăng thời gian tải trang cho Blog của bạn do nó kết hợp hai hay nhiều widget làm một.

Các bước thực hiện như sau:
Đăng nhập Blogger >Thiết kế >Chỉnh sửa HTML
Tải xuống mẫu cũ của bạn đề phòng rủi ro
Tìm kiếm ]]></b:skin>
Chèn đoạn code trong file dưới đây (Bạn tải về file TXT và cop đoạn code trong đó dán vào dưới ]]></b:skin>) : Download
Chèn trên ]]></b:skin> đoạn code dưới đây:

/*----- MBT Multi Tabbed Widget ----*/
.tabs-widget{list-style:none;list-style-type:none;margin:-10px 0px 15px 0px;padding:0;height:40px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 -1px;padding:0;float:left;border:1px solid #77aaee;border-bottom:0px solid #3c5670;}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#8F8C7C;background:#fff left top repeat-x;padding:12px 14px;display:block;text-decoration:none;font:18px verdana,Helvetica,Sans-serif}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#EFF8FB left -140px repeat-x;color:#3c5670;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:5px;}

Tìm kiếm <div class='column-right-inner'> hoặc <div id='sidebar-wrapper'>
Sau đó chèn đoạn code sau đây vào bên dưới chúng:

<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'>Bài viết</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Chat</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>TÌm</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;'/>

Sửa Phần mềm,Tài liệu,Tag cloud thành tên các Tab theo ý bạn

Vào phần tử trang :Các bạn sẽ thấy

Và các bạn có thể thêm các widget vào theo ý muốn!
Chúc các bạn thành công!
Nguồn