Thêm label dạng tab cho blogspot

Đăng Ngày: tháng 5 23, 2018

Đăng Bởi: Nguyễn Đình Diện

Xin chào các bạn hôm nay mình sẽ chia sẻ đến các bạn 1 cách thêm label dạng tab cho blogspot

Hướng dẫn cách làm

Bước 1: Tìm thẻ ]]></b:skin> và dán đoạn css phía dưới lên trên thẻ vừa tìm được

.tabs{background:transparent;width:100%;max-width:100%;float:none;list-style:none;padding:0;margin-bottom:15px;display:table;overflow:hidden}
.tabs:after{content:'display:table;clear:both}
.tabs input[type=radio]{display:none}
.tabs label{display:inline-block;border-radius:2px 2px 0 0;background-color:#fff;padding:10px 20px;border:2px solid #f2f2f2;border-bottom:0;font-size:16px;font-weight:700;color:#8B949D}
.tabs label:hover{background:#f2f2f2;border-color:transparent;color:#8B949D;cursor:pointer}
.tabs label:nth-of-type(1){}
.tabs label i{padding:5px;margin-right:0}
.tab-content{background:#fff;display:none;width:100%;float:left}
.tabs [id^="tab"]:checked + label{color:#fff;background:#8B949D}
#tab1:checked ~ #tab-content1,#tab2:checked ~ #tab-content2,#tab3:checked ~ #tab-content3{display:block}
.tabs [id^="tab"]:checked + label{color:#fff!important;border-color:transparent;background-color:#8b949d}
.tabs-posts{background:transparent;display:block;border-bottom:2px solid #8B949D;height:50px}
.title-post2,.title-post1,.title-post3,.title-post4{font-size:18px;padding:10px 15px;font-weight:400;text-transform:uppercase;text-align:left;color:#fff;line-height:normal;margin:0}
.title-post2{background:#1ABC9C}
#widget-22{box-shadow:#1ABC9C inset}
#widget-22 .featuredPost a:hover{color:#1ABC9C}
#widget-2{box-shadow:0 0 0 1px #f90 inset}
#widget-2 .featuredPost a:hover{color:#f90}
.title-post3{background:#FF4000}
.title-post4{background:#8E44AD}
.readmore{float:right;text-transform:none}
.readmore a,.readmore a:hover{color:#fff!important}
.widget-home{margin:0 0 15px}
.widget-home a{color:#4F5357;text-decoration:none;line-height:normal}
.widget-home a:hover{color:#8B949D}
.widget-homewrap{margin:15px;overflow:hidden}
.widget-home img{float:left;clear:both;object-fit:cover;transition:.33s;margin:0 0 6px;border-radius:3px}
#widget-00{box-shadow:0 0 0 1px rgba(234,25,25,0.77) inset}
#widget-00 .featuredPost a:hover{color:rgba(234,25,25,0.77)}
#widget-0{box-shadow:0 0 0 1px #f90 inset}
#widget-0 .featuredPost a:hover{color:#f90}
.widgetsplitone{width:100%;padding:0;margin:0;overflow:hidden}
.widgetsplitone_left{width:52.5%;padding:0;margin:0;float:left;text-align:left}
.widgetsplitone_right{width:45%;padding:0 0 0 10px;margin:0;float:right}
.imagefeatured{height:264px}
.featuredPost{margin:0;height:90px}
.featuredPost img{margin-right:10px}
.featuredPost a{font-size:16px;font-weight:700}
h5.posttitle{font-size:18px;margin:5px 0;font-weight:700}
h5.posttitle a{color:#4F5357}
.contentstyle{font-size:13px;padding:0 0 10px;color:#8b949d;line-height:170%}
@media screen and (max-width:600px) {
.widgetsplitone_right{width:100%;margin:15px 0 0;padding:0;float:left}
.widgetsplitone_left{width:100%}
.tabs label span{display:none}
.tabs label i{display:block}
}

Bước 2: Tiếp theo bạn hãy tìm thẻ </head> và dán đoạn js dưới lên trên nó

<!-- Post Home -->
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(t,e){for(var s=t.split("<"),i=0;i<s.length;i++)-1!=s[i].indexOf(">")&&(s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length));return s=s.join(""),s=s.substring(0,e-1)}function showrecentposts1(t){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts5<=t.feed.entry.length?maxpost=numposts1:maxpost=t.feed.entry.length;for(var e=0;e<maxpost;e++){var i,r,n=t.feed.entry[e],l=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){r=n.link[o].href;break}for(var o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){i=n.link[o].title.split(" ")[0];break}if("content"in n)var m=n.content.$t;else if("summary"in n)var m=n.summary.$t;else var m="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[e]=imgr[j],s=m,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[e]=d);for(var g=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),h=(postdate.split("-")[0],0);h<g.length;h++)if(parseInt(f)==g[h]){f=p[h];break}if(0==e){var u='<div class="widgetsplitone_left"><a href="'+r+'"><img width="375" height="262" class="imagefeatured wp-post-image" src="'+img[e]+'"/></a><div class="clear"></div><h5 class="posttitle"><a href="'+r+'">'+l+'</a></h5><div class="contentstyle"><p>'+removeHtmlTag(m,summaryPost)+'...</p></div><div class="clear"></div></div><div class="widgetsplitone_right">';document.write(u)}if(e>0&&e<maxpost){var u='<a href="'+r+'"><img style="margin-right:10px" class="imagewidgetthumb wp-post-image" height="63" src="'+img[e]+'" width="90"/></a><div class="featuredPost"><a href="'+r+'">'+l+"</a></div>";document.write(u)}j++}document.write("</div>")}function showrecentposts3(t){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array;for(var e=0;10>e;e++){var i,r,n=t.feed.entry[e],l=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){r=n.link[o].href;break}for(var o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){i=n.link[o].title.split(" ")[0];break}if("content"in n)var m=n.content.$t;else if("summary"in n)var m=n.summary.$t;else var m="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[e]=imgr[j],s=m,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[e]=d);for(var g=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),h=(postdate.split("-")[0],0);h<g.length;h++)if(parseInt(f)==g[h]){f=p[h];break}var u='<li><a href="'+r+'">'+l+"</a></li>";document.write(u),j++}}function showrecentposts6(t){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array;for(var e=0;e<numposts;e++){var i,r,n=t.feed.entry[e],l=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){r=n.link[o].href;break}for(var o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){i=n.link[o].title.split(" ")[0];break}if("content"in n)var m=n.content.$t;else if("summary"in n)var m=n.summary.$t;else var m="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[e]=imgr[j],s=m,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[e]=d);for(var g=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),h=(postdate.split("-")[0],0);h<g.length;h++)if(parseInt(f)==g[h]){f=p[h];break}var u='<a href="'+r+'"><img width="266" height="139" class="imagefeatured wp-post-image" src="'+img[e]+'"/></a><div class="clear"></div><h5 class="posttitle"><a href="'+r+'">'+l+'</a></h5><div class="contentstyle"><p>'+removeHtmlTag(m,summaryPost)+'...</p></div><div class="clear"></div>';document.write(u),j++}}imgr=new Array,imgr[0]="#",showRandomImg=!0,aBold=!0,summaryPost=170,summaryPost1=80,summaryTitle=15,numposts=1,numposts1=5,numposts2=4,numposts3=6,numposts4=1,numposts5=6,numposts6=10,numposts7=10,numposts8=6;function removeHtmlTag(a,b){for(var c=a.split("<"),d=0;d<c.length;d++)-1!=c[d].indexOf(">")&&(c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length));return c=c.join(""),c=c.substring(0,b-1)}function showrecentposts(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,document.write("<ul>");for(var f=0;f<numposts1;f++){var i,k,g=e.feed.entry[f],h=g.title.$t;if(f==e.feed.entry.length)break;for(var l=0;l<g.link.length;l++)if("alternate"==g.link[l].rel){k=g.link[l].href;break}for(var l=0;l<g.link.length;l++)if("replies"==g.link[l].rel&&"text/html"==g.link[l].type){i=g.link[l].title.split(" ")[0];break}if("content"in g)var m=g.content.$t;else if("summary"in g)var m=g.summary.$t;else var m="";postdate=g.published.$t,j>imgr.length-1&&(j=0),img[f]=imgr[j],s=m,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[f]=d);for(var n=[1,2,3,4,5,6,7,8,9,10,11,12],o=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],q=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),t=(postdate.split("-")[0],0);t<n.length;t++)if(parseInt(q)==n[t]){q=o[t];break}var v='<li class="car"><div class="thumb"><a href="'+k+'"><img width="150" height="100" class="alignnone" src="'+img[f]+'"/></a></div><p><a class="slider_title" href="'+k+'">'+h+"</a></p></li>";document.write(v),j++}document.write("</ul>")}imgr=new Array,imgr[0]="http://i.imgur.com/jw3ihv1.png",showRandomImg=!0,aBold=!0,summaryPost=140,summaryTitle=25,numposts1=6,label1="news";
//]]>
</script>

Bước 3: Cuối cùng bạn hãy thêm đoạn code này vào chỗ bạn muốn nó hiển thị (thường là dưới header)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Post Home -->
<div class='tabs'>
<div class='tabs-posts'>
<input checked='' id='tab1' name='tabs' type='radio'/>
<label for='tab1'><i class='fa fa-rss'/> <span>Bài mới</span>
</label>
<input id='tab2' name='tabs' type='radio'/>
<label for='tab2'><i class='fa fa-html5'/> <span>Blogger</span>
</label>
<input id='tab3' name='tabs' type='radio'/>
<label for='tab3'><i class='fa fa-file-code-o'/> <span>Template Blogger</span>
</label>
<div class='clear' style='margin-bottom:20px'/>
<!-- Tab 1 -->
<div class='tab-content' id='tab-content1'>
<b:section id='tab1' preferred='yes'>
  <b:widget id='HTML63' locked='false' title='All Bài Viết' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'><![CDATA[<script> document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script>]]></b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<div class='widget-home'>
<div class='widget-homewrap'>
<div class='widget-homesplitone'>
<data:content/>
</div></div></div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
  </b:widget>
</b:section>
</div>
<!-- Tab 2 -->
<div class='tab-content' id='tab-content2'>
<b:section id='tab2' preferred='yes'>
  <b:widget id='HTML64' locked='false' title='Blogger' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'><![CDATA[<script> document.write("<script src=\"/feeds/posts/default/-/Blogger?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script>]]></b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<div class='widget-home'>
<div class='widget-homewrap'>
<div class='widget-homesplitone'>
<data:content/>
</div></div></div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
  </b:widget>
</b:section>
</div>
<!-- Tab 3 -->
<div class='tab-content' id='tab-content3'>
<b:section id='tab3' preferred='yes'>
  <b:widget id='HTML65' locked='false' title='Template Blogger' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'><![CDATA[<script> document.write("<script src=\"/feeds/posts/default/-/Template%20Blogger?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script>]]></b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<div class='widget-home'>
<div class='widget-homewrap'>
<div class='widget-homesplitone'>
<data:content/>
</div></div></div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
  </b:widget>
</b:section>
</div>
</div>
</div>
</b:if>

* Phần được tô đỏ các bạn thay thành tên nhãn cần hiện nhé
Chúc bạn thành công!