Codedayroi.Net
  • MẠNG XÃ HỘI
  • © Copyright 2018 Code đây rồi

    Thêm label dạng tab cho blogspot

    Thể loại Tutorial

    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!
    • Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
    • Mọi chi tiết xin liên hệ:
    • Email: starbinhblog@gmail.com
    • Facebook: Fb.com/100010597577095

    Trần Thanh Bình

    Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!

    Loading...

    Biểu mẫu liên hệ