New Multi Tabbed Widget Cho Blogger - Editable Tabs!
Thứ Bảy, 26 tháng 5, 2012
Quá nhiều những Widget khiến phần sidebar của blog bạn quá dài. Bạn muốn gom các Widget lại nhưng chưa tìm cho mình một cách hợp lí. Hôm nay Blog Thủ Thuật 24/7 sẽ hướng dẫn bạn làm một thủ thuật khá hay mang tên: New Multi Tabbed Widget Cho Blogger - Editable Tabs!. Bắt đầu thôi.
1. Đăng nhập Blogger -> Thiết kế-> Chỉnh sửa HTML
2. Backup lại template
3. Tìm kiếm thẻ: ]]></b:skin> và dán đoạn code ở đây vào sau nó 4.Tiếp tục với thẻ ]]></b:skin> : dán đoạn code sau vào trước nó:
/*----- 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/AVvXsEh3t4DseHQX7aaBbot8Cloqbtq2i0Dm6WbUPCHdpeZOyCCgaSgztsqHpxovDXcnXj_xK4Bw8rapCHaKafSTnjsatij6nVLJG8u6IsulOY52fiYBWg2bzTP7ZYyDRj6nruIB9FUrEMdpI_w/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/AVvXsEh3t4DseHQX7aaBbot8Cloqbtq2i0Dm6WbUPCHdpeZOyCCgaSgztsqHpxovDXcnXj_xK4Bw8rapCHaKafSTnjsatij6nVLJG8u6IsulOY52fiYBWg2bzTP7ZYyDRj6nruIB9FUrEMdpI_w/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none}.tabs-widget-content{}.tabviewsection{margin-top:10px;margin-bottom:10px;}
Tìm đoạn code sau:div class='column-right-inner'> hoặc <div id='sidebar-wrapper'> ( Tùy themes)
coppy đoạn code sau vào ngay bên dưới nó:
<div class='tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
$(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
$(this).addClass("tabs-widget-current");
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
var activeTab = $(this).attr("href");
$(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;'/>
5. Chỉnh sửa About, Tags, Archives: thành tên mà bạn muốn
6. Save theme lại và kết quả là như thế này:
Kéo các widget vào thêm tiện ích trên hình. Chúc bạn thành công!!!
Ý kiến bạn đọc [ 0 ]
Ý kiến của bạn