[Code] Thủ Thuật Blogspot l Thêm Label Dạng Tab

  • tonyhoaivu

    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


    Code:
    [h2][size=16].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}
    }
    [/size][/h2]

    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ó



    Code:
    <!-- 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)


    Code:
    [h2][size=16]<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/-/[size=16]Blogger[/size]?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/-/[size=16]Template%20Blogger[/size]?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>
    [/size][/h2]
    [h2][/h2]


    * 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
    !



    Được sửa bởi tonyhoaivu ngày 24.07.18 15:08; sửa lần 1.


    --Chữ ký--

    Blog : http://kenhitvnn.blogspot.com

    Diễn Đàn : http://phanriclub.forum-viet.com/forum

    Kênh YouTuBe
  • Admin
    Sửa lại bài viết em nhé. Bài viết chia sẻ code thì phải cho code vào thẻ code. để như này nhìn xấu quá mà còn hay bị lỗi code nữa


    --Chữ ký--
    www.danganhviet.com


    • - Tránh đặt tiêu đề các dạng như: Giúp em với, Code này hay nè, Vào xem nè anh em,...
      - Đăng bài phải có ảnh demo hoặc viết mô tả rõ ràng, code phải bỏ vào khung code
      - Không comment vô nghĩa, không spam, không chữi tục, không post link độc hại, không hide bài viết
      - Hạn chế viết tắt, viết chữ màu, chữ to, chữ in đậm
  • tonyhoaivu
    em không tìm thấy chổ bỏ code vô ấy chứ


    --Chữ ký--

    Blog : http://kenhitvnn.blogspot.com

    Diễn Đàn : http://phanriclub.forum-viet.com/forum

    Kênh YouTuBe
  • Sponsored content

Thông tin tác giả
avatar
MEM LV3
Bài viết :
123
Points :
276
Like :
7
Punbb
Cẩn thận
Xem lý lịch thành viên
Thông tin tác giả
avatar
ACP
Bài viết :
354
Points :
691
Like :
108
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
avatar
MEM LV3
Bài viết :
123
Points :
276
Like :
7
Punbb
Cẩn thận
Xem lý lịch thành viên
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết

<