Hiển thị bài đăng 3 Tab ngoài trang chủ cho Blogspot ~ Nguyễn Gia 2017

Xin chào các bạn, Mình nhận được rất nhiều ý kiến nên hôm nay mình sẽ hưỡng dẫn các bạn cách để hiển thị bài viết 3 tab theo nhãn ra ngoài trang chủ cho Blogspot.

Ảnh minh họa

Cách làm:

Bước 1: Đăng nhập vào Blogger > Mẫu > Chỉnh sửa HTML > Đặt đoạn Code dưới đây trên ]]></b:skin>

/* CSS Post Home */ #mainpost{display:none;visibility:hidden} .tabs{background:#fff;width:100%;max-width:100%;float:none;list-style:none;padding:0;margin:auto;display:table;overflow:hidden} .tabs-st{background:#eee;display:block;height:45px} .tabs:after{content:'';display:table;clear:both} .tabs input[type=radio]{display:none} .tabs label{display:table-cell;float:left;width:25%;color:#555;font-size:19px;font-weight:400;text-align:center;cursor:pointer;transition:all .3s;height:45px;line-height:45px;text-transform:uppercase;margin-right:10px;background:linear-gradient(135deg,#ffffff 0%,#ffffff 70%,#F2F2F2 30%,#F2F2F2 30%,#F2F2F2 100%)} .more-tabs{width:21.1%;float:right;height:45px;margin:-45px 0 0;line-height:45px;font-size:25px;text-align:center;background:linear-gradient(135deg,#ffffff 0%,#ffffff 70%,#F2F2F2 30%,#F2F2F2 30%,#F2F2F2 100%)} .more-tabs a{color:#555} .more-tabs a:hover{color:#00796b} .tabs label span{display:inline-block} .tabs label i{margin-right: 5px;height:45px;line-height:45px} .tabs label:hover{color:#00796b} .tabs label:focus{color:#fff} .tab-content{display:none;width:100%;float:left} .tab-content *{-webkit-animation:showx .5s ease-in-out;-moz-animation:showx .5s ease-in-out;animation:showx .5s ease-in-out} .tabs [id^="tab"]:checked + label{color:#fff;background:#1e73be} #tab1:checked ~ #tab-content1,#tab2:checked ~ #tab-content2,#tab3:checked ~ #tab-content3{display:block;background:#eee} @media screen and (max-width:768px){ .tabs label{width:23.4%} .tabs label span{display:none} } .title-post0,.title-post1{font-size:18px;padding:10px;font-weight:400;text-transform:uppercase;text-align:left;color:#fff;line-height:normal;margin:0} .title-post1{background:#337ab7} .title-post0{background:rgb(250, 73, 73)} .title-post2,.title-post1, .title-post3, .title-post4{font-size:18px;padding:10px;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:#00796b} #widget-2{box-shadow:0 0 0 1px rgb(255, 153, 0) inset} #widget-2 .featuredPost a:hover {color:rgb(255, 153, 0)} .title-post3{background:#FF4000} .title-post4{background:#8E44AD} .widget-home img{float:left;clear:both;object-fit:cover;transition:.33s;margin:0 0 6px 0} .widget-home img:hover{-webkit-filter:brightness(80%)} .widget-home{margin:0 0 10px;overflow:hidden} .widget-home a{color:#555;text-decoration:none} .widget-home a:hover{color:#66689c} .widget-homewrap{margin-top:10px;overflow:hidden} .widgetsplitone{width:558px;padding:0;margin:0;overflow:hidden} .widgetsplitone_left{width:410px;padding:0;margin:0;float:left;text-align:left;height:350px;position:relative;} .widgetsplitone_right{width:340px;padding:0;margin:0;float:right;} .featuredPost{margin:0 0 10px;height:80px;padding:0 10px;background:#fff;display:table;} .featuredPost img{margin-right:10px;} .featuredPost a{font-size:16px;font-weight:400;line-height:1.345;display:table-cell;vertical-align:middle;letter-spacing:-.15px;text-transform:uppercase} .contentstyle p{margin:0;color:#777;font-size:17px;display:none;} .widgetsplitone_left img{position:absolute;top:0;left:0;} h5.posttitle{margin:0;padding:0;float:left;text-align:center;bottom:0;left:0;background:#fff;width:100%;box-sizing:border-box;transition:.35s;position:absolute;height:80px} h5.posttitle a{position:absolute;left:0;top:50%;transform:translate(0,-50%);color:#555;font:400 18px Roboto;letter-spacing:-.15px;line-height:1.5;display:block;width:100%;padding:0 15px;box-sizing:border-box;text-transform:uppercase} h5.posttitle:hover{background: #00796b!important} h5.posttitle a:hover{color:#fff!important} @media screen and (max-width:600px){.widgetsplitone_right{width:100%;margin:15px 0 0 0;padding:0;float:left}.widgetsplitone_left{width:100%}.tabs label span{display:none}.tabs label i{display:block}} #carousel{width:100%;position:relative;display:block} #carousel .container{position:relative} #carousel ul{width:100%;position:relative;margin:0} #carousel ul li{display:inline;float:left;text-align:center;font-weight:400;font-size:14px;line-height:normal;width:18.6%;margin:0 .7%} #carousel ul li:hover{-webkit-filter:brightness(80%)} #carousel ul li a.slider_title{color:#222;display:block;margin-top:5px} #carousel ul li a.slider_title:hover{color:#FF4000} #carousel a img{display:block;background:#fff;margin-top:0;width:100%} #carousel1{width:100%;height:190px;position:relative;display:block;box-shadow:0 0 0 1px #FF4000 inset;padding:10px 2px;margin:0 0 15px} #carousel1 .container{position:relative} #carousel1 ul{width:100%;position:relative;margin:0} #carousel1 ul li{display:inline;float:left;text-align:center;font-weight:400;font-size:14px;line-height:normal;width:18.6%;margin:0 .7%} #carousel1 ul li:hover{-webkit-filter:brightness(80%)} #carousel1 ul li a.slider_title{color:#222;display:block;margin-top:5px} #carousel1 ul li a.slider_title:hover{color:#FF4000} #carousel1 a img{display:block;background:#fff;margin-top:0;width:100%}

Bước 2: Đặt đoạn Javascript dưới đây trên </head>

<script type='text/javascript'>//<![CDATA[ // nghiarong.blogspot.com 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="100%" height="260px" 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 class="imagewidgetthumb wp-post-image" height="80" src="'+img[e]+'" width="120"/></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;eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('K(x(p,a,c,k,e,d){e=x(c){u c};A(!\'\'.C(/^/,J)){D(c--){d[c]=k[c]||c}k=[x(e){u d[e]}];e=x(){u\'\\\\w+\'};c=1};D(c--){A(k[c]){p=p.C(M I(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c])}}u p32|34|||||||||||35|36|56|http|www|title|31|33|58|113|103|102|90|84|105|100|98|97|96|99|52|94|87|88|89|visible|93|95|location|91'.split('|'))) //]]></script>

Bước 3: Đặt đoạn code này vào nơi muốn hiển thị

<b:if cond='data:blog.url == data:blog.homepageUrl'> <div class='tabs'> <div class='tabs-st'> <input checked='' id='tab1' name='tabs' type='radio'/> <label for='tab1'><i class='fa fa-camera-retro'/><span>PSD</span> </label> <input id='tab2' name='tabs' type='radio'/> <label for='tab2'><i class='fa fa-facebook-square'/><span>Facebook</span> </label> <input id='tab3' name='tabs' type='radio'/> <label for='tab3'><i class='fa fa-html5'/><span>Blogspot</span> </label>  <div class='tab-content' id='tab-content1'> <span class='more-tabs'><a href='/search/label/Tên Nhãn 1?max-results=9' title='Xem thêm bài mới'><i class='fa fa-arrow-circle-o-right'/></a></span> <div class='widget-home'> <div class='widget-homewrap'> <div class='widget-homesplitone'> <script> document.write("<script src=\"/feeds/posts/default/-/Tên Nhãn 1?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script> </div> </div> </div> </div>  <div class='tab-content' id='tab-content2'> <span class='more-tabs'><a href='/search/label/Tên Nhãn 2?max-results=9' title='Xem thêm máy tính'><i class='fa fa-arrow-circle-o-right'/></a></span> <div class='widget-home'> <div class='widget-homewrap'> <div class='widget-homesplitone'> <script> document.write("<script src=\"/feeds/posts/default/-/Tên Nhãn 2?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script> </div> </div> </div> </div>  <div class='tab-content' id='tab-content3'> <span class='more-tabs'><a href='/search/label/Tên Nhãn 3?max-results=9' title='Xem thêm đồ hoạ'><i class='fa fa-arrow-circle-o-right'/></a></span> <div class='widget-home'> <div class='widget-homewrap'> <div class='widget-homesplitone'> <script> document.write("<script src=\"/feeds/posts/default/-/Tên Nhãn 3?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script> </div> </div> </div> </div> </div> </div> </b:if>

Lưu mẫu lại ,chúc các bạn thành công !

About Nguyễn Gia 2017

Bài viết sưu tầm từ nhiều nguồn trên mạng, hy vọng nó sang mang đến thông tin hữu ích cho bạn. Chúc các bạn vui vẽ ngày mới!

Nguyễn Gia 2017

Hiển thị bài đăng 3 Tab ngoài trang chủ cho Blogspot

About Nguyễn Gia 2017

Related Post