Tạo tab chứa nhiều widget giống mp3.zing.vn cho blogger

Tweet

[tintuc]

Một tiện ích 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, 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:#808080;background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#EEF1F6));padding:6px 18px;display:block;text-decoration:none;font:bold 14px Arial;text-transform:none;border: 1px solid #ccc;margin-right: -5px;} .tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));color:#000;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!
[/tintuc]