Thêm label dạng tab cho blogspot

Chi tiết Liên quan Nhận xét Tác giả Hướng dẫn

Xem toàn trang

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!

Mục Lục Nội Dung

Minh Tiến IT

Pass giải nén mặc định: truongblogger

Chắc bạn cũng đã nhiều lần gặp những link của 123link dạng 123link.co tại những trang web chia sẻ nội dung số. Nhưng bạn không biết cách nào để truy cập vào đúng link gốc của nội dung mà mình muốn truy cập. Bài viết này sẽ giúp bạn làm điều đó.
Đầu tiên bạn truy cập vào một link 123link. Khi bạn truy cập xong thì nội dung bạn thấy sẽ tựa như hình ở dưới.

Trang 123link

Đánh dấu check vào vô “I’m not a robot”. Sau đó sẽ có một bảng captcha hiện ra. Bạn trả lời theo câu hỏi của captcha rồi bấm Verify để xác nhận.

I’m not a robot

Verify

Sau khi xác nhận captcha thành công thì bấm chọn nút “Click here to continue” để sang bước tiếp theo.

Click here to continue

Ở trang tiếp theo, bạn sẽ thấy một đồng hồ đếm ngược, thường thì nhiều nhất sẽ là 7 giây. Bạn đợi cho thời gian đếm ngược chạy hết.

Bạn đợi cho thời gian đếm ngược chạy hết

Khi thời gian đếm ngược chạy hết, bạn sẽ thấy nút Get Link hiện ra. Bạn bấm vào nút đó để truy cập đến đường link đã được rút gọn bởi 123link.

Get Link

Bạn cứ yên tâm là link từ 123link sẽ không có ẩn chứa những mối nguy hiểm như virus, các pop-up quảng cáo không lành mạnh và phiền toái khi bạn đang thao tác các bước để tới link đích.

THAM GIA KIẾM TIỀN CÙNG MINH TIẾN IT