Tạo Tab nội dung cho Blogger (ver 2)

Tab Content Blogger

Ở bài viết trước Tạo Tab nội dung đơn giản bằng CSS3 Iris Tips đã giới thiệu cho các bạn cách tạo tab bằng CSS. Hôm nay Iris Tips xin chia sẻ cho các bạn một phiên bản khác của Tab nội dung, được thực hiện bằng Javascript và có 2 kiểu tab cho các bạn lựa chọn đó là Tabs Horizontal (Tab Ngang) và Tabs Vertical (Tab Dọc).

CSS

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn code bên dưới vào trước thẻ ]]></b:skin>

.simpleTab .tab-content{float:left}
.simpleTab .tab-wrapper li{float:left}
.simpleTab.verti .tab-wrapper{float:left}
.simpleTab.verti .tab-content{float:left}
.com-tab-title{overflow:hidden;border-bottom:2px solid #fb4834}
.com-tab-title h3{color:#fff;font-family:lato,Sans-Serif;font-size:13px;font-weight:bold;text-transform:uppercase;line-height:32px;position:relative;overflow:hidden}
.com-tab-title h3 span{line-height:32px;background:#fb4834;position:relative;padding:8px 10px;border-top-left-radius:1px;border-top-right-radius:1px;border-bottom-right-radius:0;border-bottom-left-radius:1px}
.com-tab-title h3 span:before{font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:15px;color:#fff}
.com-tab.simpleTab .tab-content{background-color:transparent;margin-top:20px;float:none!important}
.com-tab.simpleTab{border:1px solid #eee;padding:15px;margin-top:22px!important;background-color:#fff;margin:0}
.com-tab .simpleTab .tab-wrapper li{display:inline-block;margin:0;padding:0}
.com-tab .simpleTab .tab-wrapper li a{font-family:Oswald,open sans,sans-serif,arial;font-weight:400;font-size:13px;background-color:#333;color:#FFF;padding:10px 25px!important;display:block}
.com-tab.simpleTab .tab-wrapper li:before{content:'';display:none}
.com-tab.simpleTab .tab-wrapper li a.activeTab{background-color:#666;color:#fff}
.com-tab.simpleTab .tab-wrapper li{display:inline-block}
.com-tab.simpleTab .tab-wrapper li a{font-family:'Archivo Narrow',Sans-Serif;font-size:13px;font-weight:600;background-color:#eee;color:#333;padding:0 10px;display:block;line-height:30px;text-transform:uppercase}
.simpleTab .tab-wrapper li{display:inline-block;margin:0;padding:0}
.simpleTab .tab-wrapper li a{background-color:#333;color:#FFF;padding:10px 25px;display:block}
.simpleTab .tab-wrapper li:before{display:none}
.simpleTab{margin:10px 0}
.simpleTab .tab-content{padding:15px;background-color:#f2f2f2;width:90%;}
.simpleTab .tab-wrapper li a.activeTab{background-color:#f23f23;color:#fff}
.simpleTab{transition:all 0 ease;-webkit-transition:all 0 ease;-moz-transition:all 0 ease;-o-transition:all 0 ease}
.simpleTab.verti .tab-wrapper{width:30%;margin:0!important;padding:0!important}
.simpleTab .tab-wrapper{padding:0!important;margin:0!important}
.simpleTab.verti .tab-content{width:60%;}
.simpleTab.verti .tab-wrapper li{width:100%;display:block;text-align:center}
.simpleTab.verti .tab-wrapper li a{padding:10px 0}
.simpleTab.verti{overflow:hidden}

Javascript

2Tiếp tục tìm đến thẻ </body> và dán đoạn script sau vào trước thẻ đó.

<script>
//<![CDATA[
$(function() {
    $('#tab1').simpleTab();
    $('#tab2').simpleTab({active:4});
    $('#tab3').simpleTab({fx:"fade",active:3});
    $('#tab4').simpleTab({fx:"fancyslide"});
    $(".post-tabs").simpleTab({active:1,fx:"fade",showSpeed:800,hideSpeed:800})}
);
$(document).ready(function () {
    $(".com-tab").simpleTab({
        active: 1,
        fx: "fade",
        showSpeed: 400,
        hideSpeed: 400
    });
    $('.tab-blogger').append($('#comments'));
    $(".com-tab.simpleTab .tab-wrapper").wrap("<div class='com-tab-title'/>");
   
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function(e){e.fn.simpleTab=function(t){t=jQuery.extend({active:1,fx:null,showSpeed:400,hideSpeed:400,showEasing:null,hideEasing:null,show:function(){},hide:function(){},change:function(){}},t);return this.each(function(){var n=e(this),r=n.children("[data-tab]"),i=t.active-1;n.addClass("simpleTab").prepend('<ul class="tab-wrapper"></ul>');r.addClass("tab-content").each(function(){e(this).hide();n.find(".tab-wrapper").append('<li><a href="#">'+e(this).data("tab")+"</a></li>")}).eq(i).show();n.find(".tab-wrapper a").on("click",function(){var i=e(this).parent().index();e(this).closest(".tab-wrapper").find(".activeTab").removeClass("activeTab");e(this).addClass("activeTab");if(t.fx=="slide"){if(r.eq(i).is(":hidden")){r.slideUp(t.hideSpeed,t.hideEasing,function(){t.hide.call(n)}).eq(i).slideDown(t.showSpeed,t.showEasing,function(){t.show.call(n)})}}else if(t.fx=="fade"){if(r.eq(i).is(":hidden")){r.hide().eq(i).fadeIn(t.showSpeed,t.showEasing,function(){t.show.call(n)})}}else if(t.fx=="fancyslide"){if(r.eq(i).is(":hidden")){r.slideUp(t.hideSpeed,t.hideEasing,function(){t.hide.call(n)}).eq(i).delay(t.hideSpeed).slideDown(t.showSpeed,t.showEasing,function(){t.show.call(n)})}}else{if(r.eq(i).is(":hidden")){r.hide().eq(i).show()}}t.change.call(n);return false}).eq(i).addClass("activeTab")})}})(jQuery)
//]]>
</script>

3Thêm thư viện jQuery dưới đây vào sau đoạn code trên nếu blog của bạn chưa có.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Tabs Horizontal (Tab Ngang)

<div class="post-tabs horiz">
<div data-tab="Tab 1">
Lorem ipsum no has veniam elaboraret constituam, ne nibh posidonium vel. Has ad quaeque omittantur, malis abhorreant eam no, qui cu minim placerat definitionem. Et sonet ludus apeirian mei, ut tibique corpora posidonium vis, iusto nominavi prodesset in pro. Ad mea omnes aliquando, idque democritum incorrupte at sed, nostrud feugiat consetetur duo in
</div>
<div data-tab="Tab 2">
Lorem ipsum no has veniam elaboraret constituam, ne nibh posidonium vel. Has ad quaeque omittantur, malis abhorreant eam no, qui cu minim placerat definitionem. Et sonet ludus apeirian mei, ut tibique corpora posidonium vis, iusto nominavi prodesset in pro. Ad mea omnes aliquando, idque democritum incorrupte at sed, nostrud feugiat consetetur duo in
</div>
<div data-tab="Tab 3">
Lorem ipsum no has veniam elaboraret constituam, ne nibh posidonium vel. Has ad quaeque omittantur, malis abhorreant eam no, qui cu minim placerat definitionem. Et sonet ludus apeirian mei, ut tibique corpora posidonium vis, iusto nominavi prodesset in pro. Ad mea omnes aliquando, idque democritum incorrupte at sed, nostrud feugiat consetetur duo in
</div>
</div>

• DEMO

See the Pen dYerWy by Iris Tips (@IrisTips) on CodePen.

Tabs Vertical (Tab Dọc)

<div class="post-tabs verti">
<div data-tab="Tab 1">
Lorem ipsum no has veniam elaboraret constituam, ne nibh posidonium vel. Has ad quaeque omittantur, malis abhorreant eam no, qui cu minim placerat definitionem. Et sonet ludus apeirian mei, ut tibique corpora posidonium vis, iusto nominavi prodesset in pro.  Ad mea omnes aliquando, idque democritum incorrupte at sed, nostrud feugiat consetetur duo in
</div>
<div data-tab="Tab 2">
Lorem ipsum no has veniam elaboraret constituam, ne nibh posidonium vel. Has ad quaeque omittantur, malis abhorreant eam no, qui cu minim placerat definitionem. Et sonet ludus apeirian mei, ut tibique corpora posidonium vis, iusto nominavi prodesset in pro. Ad mea omnes aliquando, idque democritum incorrupte at sed, nostrud feugiat consetetur duo in
</div>
<div data-tab="Tab 3">
Lorem ipsum no has veniam elaboraret constituam, ne nibh posidonium vel. Has ad quaeque omittantur, malis abhorreant eam no, qui cu minim placerat definitionem. Et sonet ludus apeirian mei, ut tibique corpora posidonium vis, iusto nominavi prodesset in pro. Ad mea omnes aliquando, idque democritum incorrupte at sed, nostrud feugiat consetetur duo in
</div>
</div>

• DEMO

See the Pen qOYvjz by Iris Tips (@IrisTips) on CodePen.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm