Tạo Nhiều Tab Chứa Widget trên một Sidebar Blogspot

Bạn đang xây dựng blog, bạn muốn tiết kiệm không gian mà cũng muốn đầy đủ các tiện ích? Hôm nay, mình sẽ chia sẻ cho bạn thủ thuật Tạo Nhiều Tab Chứa Widget trên một Sidebar Blogspot, hi vọng nó sẽ giúp cho blog bạn nhìn đẹp hơn, chuyên nghiệp hơn.

Cách thực tiện

Đầu tiên các bạn đang nhập Blogger >> Mẫu >> Chỉnh sửa HTML
Sau đó các bạn chèn đoạn code sau vào trước thẻ đóng </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<script type='text/javascript'>
$(function(){$(".tabs-1").mtabs()})
</script>

Chú ý: nếu trong Blogspot bạn đã có dòng <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/> rồi thì các bạn chỉ chép đoạn code màu đỏ bên dưới thôi. Vì nếu copy hết sẽ bị đụng jquery làm tiện ích không hiện thị được.

Tạo CSS cho tiện ích

Sau đó các bạn chép đoạn CSS sau vào trước thẻ đóng ]]></b:skin> hoặc </style>

/* CSS Tabs */
.tabs, .tabs-list {margin:0;}.tabs .tabs-list {padding:0;}
.tabs-menu {padding:0;margin:0;border-bottom:2px solid #21BFE1;}
.tabs-menu li{margin:0;text-transform:uppercase;list-style:none;text-align:center;display:inline-block;background:#fff;color:#444;cursor:pointer;position:relative;line-height:40px;font-weight:700;font-size:13px}.tabs-menu li:hover {color:#4db2ec;} .tabs-menu .active-tab span{text-align:center;display:inline-block;padding:2px 12px 0;background-color:#21BFE1;color:#fff}
.tabs-menu li:nth-child(1):before {content:'\f09e';}.tabs-menu li span{display:block;padding:2px 12px 0} .tabs-menu li:before {display:none;font-family:Fontawesome;text-align:center;font-size:16px;padding:2px 15px 0;}
.tabs-content .sidebar li {margin:0;padding:0;}.tabs-menu li:nth-child(2):before {content:'\f006';} .tabs-menu li:nth-child(3):before {content:'\f0e6';} .tabs-content {padding:10px;background:#fff;margin-bottom:15px}
.tabs-content .widget ul {background:#fff;overflow:visible;}
.tabs-content .widget li {background:#fff;float:none!important;}

Hiển thị trên nhiều thiết bị

Nếu blog bạn có làm giao diện Responsive thì các bạn tiếp tục chép dòng sau vào trước thẻ đóng ]]></b:skin> hoặc </style>

@media only screen and (max-width:768px) {
.tabs-menu {text-align:center;margin:auto;}
.tabs-menu li span,.vitabs-menu .active-tab span,.top-menunav li.doremi {display:none;}
.tabs-menu li:before {display:block;}}

Chèn đoạn code sau vào trước thẻ đóng </body>

<script type='text/javascript'>//<![CDATA[ // Simple Tab
!function(a){"use strict";var b=function(b,c){var d=this;d.element=b,d.$element=a(b),d.tabs=d.$element.children(),d.options=a.extend({},a.fn.mtabs.defaults,c),d.current_tab=0,d.init()};b.prototype={init:function(){var a=this;a.tabs.length&&(a.build(),a.buildTabMenu())},build:function(){var b=this,c=b.options,d=c.tab_text_el,e=c.container_class;b.tab_names=[],b.$wrapper=b.$element.wrapInner('<div class="'+e+'" />').find("."+e),b.tabs.wrapAll('<div class="'+c.tabs_container_class+'" />'),b.tabs.each(function(c,e){var f,g=a(e),h=d;f=g.find(h).filter(":first").hide().text(),b.tab_names.push(f)}),a.isFunction(c.onReady)&&c.onReady.call(b.element)},buildTabMenu:function(){for(var b,c=this,d=c.options,e=d.tabsmenu_el,f=c.tab_names,g="<"+e+' class="'+d.tabsmenu_class+'">',h=0,i=f.length,j=function(){var a=arguments;return d.tmpl.tabsmenu_tab.replace(/\{[0-9]\}/g,function(b){var c=Number(b.replace(/\D/g,""));return a[c]||""})};i>h;h++)g+=j(h+1,f[h]);g+="</"+e+">",c.$tabs_menu=a(g).prependTo(c.$wrapper),b=c.$tabs_menu.find(":first")[0].nodeName.toLowerCase(),c.$tabs_menu.on("click",b,function(b){var d=a(this),e=d.index();c.show(e),b.preventDefault()}).find(":first").trigger("click")},show:function(b){var c=this,d=c.options,e=d.active_tab_class;c.tabs.hide().filter(":eq("+b+")").show(),c.$tabs_menu.children().removeClass(e).filter(":eq("+b+")").addClass(e),a.isFunction(d.ontabselect)&&b!==c.current_tab&&d.ontabselect.call(c.element,b),c.current_tab=b},destroy:function(){var a=this,b=a.options.tab_text_el;a.$tabs_menu.remove(),a.tabs.unwrap().unwrap(),a.tabs.removeAttr("style"),a.tabs.children(b+":first").removeAttr("style"),a.$element.removeData("mtabs")}},a.fn.mtabs=function(c,d){return this.each(function(){var e,f=a(this),g=f.data("mtabs");e="object"==typeof c&&c,g||f.data("mtabs",g=new b(this,e)),"string"==typeof c&&g[c](d)})},a.fn.mtabs.defaults={container_class:"tabs",tabs_container_class:"tabs-content",active_tab_class:"active-tab",tab_text_el:"h1, h2, h3, h4, h5, h6",tabsmenu_class:"tabs-menu",tabsmenu_el:"ul",tmpl:{tabsmenu_tab:'<li class="tab-{0}"><span>{1}</span></li>'},ontabselect:null}}(window.jQuery,window,document);//]]>
</script>

Chèn code để hiển thị tiện ích.

Bây giờ các bạn tìm dòng <div id='sidebar-wrapper'> rồi chèn code HTMl sau vào sau dòng đó HTML

<div class='tabs tabs-1'>
<b:section class='tabs-list tabs-list-1 section' id='tabs-list-1' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Xem Nhiều' type='PopularPosts' visible='true'> <b:includable id='main'>
<div class='widget-content popular-posts'> <b:if cond='data:title != ""'><h2><data:title/></h2></b:if> <ul>
<b:if cond='!data:showSnippets'> <b:loop values='data:posts' var='post'> <li> <b:if cond='!data:showThumbnails'>
<b:else/>  <a expr:href='data:post.href'><data:post.title/></a>
<div class='item-snippet'><data:post.snippet/></div>  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'> </b:if> <b:else/> 
<a expr:href='data:post.href' target='_blank'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <div class='item-thumbnail'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'> <img alt='' border='0' expr:src='data:image'/> </b:with> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <b:if cond='data:showSnippets'>
<b:section class='tabs-list tabs-list-2 section' id='tabs-list-2' showaddelement='yes'> <div class='item-snippet'><data:post.snippet/></div> </b:if> </div> <div style='clear: both;'/> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> </b:section>
<b:loop values='data:labels' var='label'> <b:widget id='Label1' locked='false' title='Chuyên Mục' type='Label' visible='true'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2><data:title/></h2> </b:if> <div expr:class='"widget-content " + data:display + "-label-widget-content"'> <b:if cond='data:display == "list"'> <ul>
<span dir='ltr'>(<data:label.count/>)</span> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> </b:if>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </li> </b:loop> </ul> <b:else/> <b:loop values='data:labels' var='label'> <span expr:class='"label-size label-size-" + data:label.cssSize'> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> </b:if>
<b:widget id='HTML1' locked='false' title='Bình Luận' type='HTML' visible='true'> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'>(<data:label.count/>)</span> </b:if> </span> </b:loop> </b:if> <b:include name='quickedit'/> </div> </b:includable> </b:widget> </b:section> <b:section class='tabs-list tabs-list-3 section' id='tabs-list-3' showaddelement='yes'> <b:includable id='main'>
</div>  <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget>
</b:section>