Multi tab widget kiểu mới cho Blogger
Thứ Ba, 20 tháng 3, 2012
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: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;}
6.Tìm kiếm <div class='column-right-inner'> hoặc <div id='sidebar-wrapper'>
7.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($){
$(".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'>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 Phần mềm,Tài liệu,Tag cloud thành tên các Tab theo ý bạn
7.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!
Dịch từ My Blogger tricks
Bachkhoamedia
Ý kiến bạn đọc [ 0 ]
Ý kiến của bạn