Tạo Nhiều Widget Vào Trong Tab 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.

1.Đăng nhập Blogger >Thiết kế >Chỉnh sửa HTML
2.Lưu mẫu cũ của bạn đề phòng rủi ro
3.Tìm kiếm nhấn (F3) và tìm: ]]></b:skin>
Chèn code trên vào trên ]]></b:skin> :

.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/AVvXsEj3bYQuf6pQ2F0Cb0Fq-nvrQKTcWVE-O-6SnzJEdl9kQ1ltRkFAVE0lWkF6geANiPO4h4ENxRF7j582D6AHXK95b12jnpPq6A1brX5_8IhFLcA5T89-BPX8e101FXs7T2Kq0NLrfDHA90Q/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/AVvXsEj3bYQuf6pQ2F0Cb0Fq-nvrQKTcWVE-O-6SnzJEdl9kQ1ltRkFAVE0lWkF6geANiPO4h4ENxRF7j582D6AHXK95b12jnpPq6A1brX5_8IhFLcA5T89-BPX8e101FXs7T2Kq0NLrfDHA90Q/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none} 
.tabs-widget-content{} 
.tabviewsection{margin-top:10px;margin-bottom:10px;} 

4.Tiếp tục tìm kiếm :  <div class='column-right-inner'> hoặc  <div id='sidebar-wrapper'>

5.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'>Phần mềm</a></li> 
<li><a href='#widget-themater_tabs-1432447472-id2'>Tài liệu</a></li> 
<li><a href='#widget-themater_tabs-1432447472-id3'>Tag Cloud</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 lại theo ý bạn như tiêu đề Phần mềm,Tài liệu,Tag cloud thành tên các Tab theo ý bạn

6.Vào phần tử trang :Các bạn sẽ nhìn thấy rõ thành quả của mình nhé.

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!