Tiện ích Multi Tab Pro trên Sidebar cho Blogger
Cập nhật:
28 thg 8, 2015
tháng 8 28, 2015
Hiện nay trên rất nhiều Template có đi liền với tiện ích Multi Tab gắn trên Siderbar, nếu bạn đang có ý định tạo mình một Template tạp chí thì Multi Tab sẽ là lựa chọn hữu ích cho bạn. Tiện ích này giúp cho blog trở nên khoa học hơn, tạo sự gọn gàng, bắt mắt, dễ cài đặt. Bài viết sau đây mình sẽ giới thiệu đến các bạn tiện ích Multi Tab Pro do bác Arlina thiết kế.
Các bước thực hiện
Bước 1: Thêm đoạn code sau lên trên thẻ ]]></b:skin>
Widget by Arlina
Nguồn: dongvietblog.com
 |
| Tiện ích Multi Tab Pro trên Sidebar cho Blogger |
Các bước thực hiện
Bước 1: Thêm đoạn code sau lên trên thẻ ]]></b:skin>
/* Multi Tab Widget */Bước 2: Thêm đoạn code sau lên trên thẻ </body>
.multitab-section{background:#fff;text-transform:uppercase;width:100%}
.multitab-widget{list-style:none;margin:0 0 10px;padding:0}
.multitab-widget li{list-style:none;padding:0;margin:0;float:left}
.multitab-widget li a{background:#22a1c4;color:#fff;display:block;padding:15px;font-size:13px;text-decoration:none}
.multitab-tab{border:0;width:33.3%;text-align:center}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}
<script type='text/javascript'>Bước 3: Thêm đoạn code sau bên dưới ID của Sidebar trên blog của bạn. Ví dụ: <div id='sidebar-wrapper'>
//<![CDATA[
// Multi tab widget
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
</script>
<div class='multitab-section'>Như vậy các bạn đã tạo xong cho blog của mình tiện ích Multi Tab khá bắt mắt, đơn giản dễ làm. Mọi thắc mắc các bạn có thể để lại bên dưới. Lưu mẫu để hoàn tất nhé!
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</div>
</div>
Widget by Arlina
Nguồn: dongvietblog.com
