Thứ Ba, 15 tháng 5, 2018

Tạo Widget hiển thị bài đăng dạng Tab

tháng 5 15, 2018 0
Chào Các Bạn Thì Hôm Nay Mình Xin Share Cách TẠO WIDGET HIỂN THỊ BÀI ĐĂNG DẠNG TAB ...


CÁCH THỰC HIỆN

Bước 1: Vào Blogger -> Chủ Đề -> Chỉnh Sửa HTML

Bước 2: Các Bạn Chèn Đoạn Code Dưới Này Trước Thẻ ]]></b:skin>

.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:&#39;&#39;;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:#52537d}
.tabs label span{display:inline-block}
.tabs label i{margin-right: 5px;height:45px;line-height:45px}
.tabs label:hover{color:#52537d}
.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^=&quot;tab&quot;]:checked + label{color:#fff;background:#52537d}
#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}
}
.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{overflow:hidden}
#widget-00 .featuredPost a:hover {color:rgba(234, 25, 25, 0.77)}
#widget-0 .featuredPost a:hover {color:rgb(255, 153, 0)}
.widget-home a{color:#555;text-decoration:none;line-height: normal;}
.widget-home a:hover{color:#0087be}
.widget-homewrap{margin-top:10px;overflow:hidden}

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

<script type='text/javascript'>//<![CDATA[ // blogspot 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 4: Chèn đoạn code này dưới thẻ <b:includable id='main' var='top'>

<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-picture-o'/><span>ẢNH BÌA</span>
</label>
<input id='tab2' name='tabs' type='radio'/>
<label for='tab2'><i class='fa fa-facebook-official'/><span>Facebook</span>
</label>
<input id='tab3' name='tabs' type='radio'/>
<label for='tab3'><i class='fa fa-html5'/><span>BLOGSPOT</span>
</label>
<!-- Tab 1 -->
<div class='tab-content' id='tab-content1'>
<span class='more-tabs'><a href='/search/label/PSD?max-results=9' title='Xem thêm'><i class='fa fa-arrow-right'/></a></span>
<div class='widget-home'>
<div class='widget-homewrap'>
<div class='widget-homesplitone'>
<script> document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/PSD?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;); </script>
</div>
</div>
</div>
</div>
<!-- Tab 2 -->
<div class='tab-content' id='tab-content2'>
<span class='more-tabs'><a href='/search/label/Thủ%20Thuật%20Facebook?max-results=9' title='Xem thêm'><i class='fa fa-arrow-right'/></a></span>
<div class='widget-home'>
<div class='widget-homewrap'>
<div class='widget-homesplitone'>
<script> document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Thủ%20Thuật%20Facebook?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;); </script>
</div>
</div>
</div>
</div>
<!-- Tab 3 -->
<div class='tab-content' id='tab-content3'>
<span class='more-tabs'><a href='/search/label/Thủ%20Thuật%20Blogspot' title='Xem thêm'><i class='fa fa-arrow-right'/></a></span>
<div class='widget-home'>
<div class='widget-homewrap'>
<div class='widget-homesplitone'>
<script> document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Thủ%20Thuật%20Blogspot?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;); </script>
</div>
</div>
</div>
</div>
</div>
</div>
</b:if>

Tùy biến lại sao cho phù hợp với blog của bạn Chúc các bạn thành công!!!

Bài liên quan:

0 nhận xét: