Slider post hiển thị bài đăng theo nhãn tại trang chủ cho blogger/blogspot

Tăng tương tác Facebook của bạn giúp tiếp cận nhiều hơn
Tự động tăng like bài viết của bạn, giúp nổi bật hơn
Thêm bình luận

Để giúp trang của của website bạn đẹp hơn và hiển thị được nhiều nội dung hơn Vanthangit.com xin chia sẻ tiện ích  Slider post hiển thị bà...

Để giúp trang của của website bạn đẹp hơn và hiển thị được nhiều nội dung hơn Vanthangit.com xin chia sẻ tiện ích Slider post hiển thị bài đăng theo nhãn tại trang chủ cho blogger/blogspot.
Tiện ích đơn giản với một vài hiệu ứng hover sẽ giúp website bạn đẹp hơn rất nhiều:

Slider post hiển thị bài đăng theo nhãn tại trang chủ cho blogger/blogspot vanthangit
Ảnh demo sau khi sử dụng slider post
Đầu tiên vào Blogger > Chủ đề > Tùy chỉnh HTML
Thêm đoạn CSS dưới lên trên ]]><

.featured-posts a{color:#fff;}
.featured-posts a:hover{color:#fff;text-decoration:underline;}
.main-post.featured-posts a{margin:0;font-size:18px}
.featured-posts .col-post{float:left;position:relative;overflow:hidden;}
.featured-posts .secondary-post{width:34.4%;margin:0;}
.featured-posts .secondary-post:nth-child(odd){margin:3px 0 0 0}
.featured-posts .main-post{width:65.2%;padding:0;margin:0 3px 0 0}
.featured-posts span{padding:8px;color:#fff;font-size:12px;font-style:normal;top:0;left:0;z-index:2;position:absolute}
.featured-posts span.lebb{background:#e74c3c;visibility:hidden;opacity:0;top:-20px;transition:all .3s}
.featured-posts .main-post:hover span.lebb,.featured-posts .secondary-post:hover span.lebb{visibility:visible;opacity:1;top:0;}
.featured-posts img{height:100%;transition:transform 0.35s ease 0s;-moz-transition:transform 0.35s ease 0s;-o-transition:transform 0.35s ease 0s}
.featured-posts .main-post img{height:350px;width:100%;object-fit:cover}
.featured-posts .secondary-post img{height:175px;object-fit:cover;width:100%}
.featured-posts .main-post:hover img,.featured-posts .secondary-post:hover img{transform:scale(1.1)}
.featured-posts header{position:absolute;bottom:0;left:0;padding:20px;width:100%;z-index:2}
.featured-posts h4{font-size:15px;line-height:1.3;}
.featured-posts header h3,.featured-posts header h4{font-weight:400}
.featured-posts span.vignette{background-color:transparent;position:absolute;overflow:hidden;margin:0;padding:0;height:100%;top:0;left:0;right:0;bottom:0;transition:background 0.3s linear,opacity 0.3s linear}
.featured-posts span.vignette:before{content:'';width:100%;height:100%;position:absolute;z-index:1;top:0;background:linear-gradient(to bottom,rgba(0,0,0,0.1) 0%,rgba(0,0,0,.7) 100%);opacity:0.5;transition:background 0.3s linear,opacity 0.3s linear}
.featured-posts .main-post span.vignette:before{background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#9e06cd 100%)}
.featured-posts .secondary-post span.vignette:before{background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#dc2a02 100%)}
.featured-posts .secondary-post:nth-child(odd) span.vignette:before{background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#005f87 100%)}
.featured-posts .main-post:hover span.vignette:before,.featured-posts .secondary-post:hover span.vignette:before{opacity:.9;}

Sau đó, chuyển đến tiện ích Blog1 và copy toàn bộ code phía dưới và dán vào trên nó:

<script type="text/javascript">
//<![CDATA[
function removeHtmlTag(e,t){for(var s=e.split("<"),r=0;r<s.length;r++)-1!=s[r].indexOf(">")&&(s[r]=s[r].substring(s[r].indexOf(">")+1,s[r].length));return s=s.join(""),s=s.substring(0,t-1)}function sliderpost(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length;for(var t=0;t<maxpost;t++){var r,i,n=e.feed.entry[t],l=n.category[0].term,o=n.title.$t;if(t==e.feed.entry.length)break;for(var m=0;m<n.link.length;m++)if("alternate"==n.link[m].rel){i=n.link[m].href;break}for(var m=0;m<n.link.length;m++)if("replies"==n.link[m].rel&&"text/html"==n.link[m].type){r=n.link[m].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)var g=n.summary.$t;else var g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,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[t]=d);for(var h=[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]),u=(postdate.split("-")[0],0);u<h.length;u++)if(parseInt(f)==h[u]){f=p[u];break}if(0==t){var v='<div class="main-post col-post">
<a href="'+i+'"><span class="lebb">'+l+'</span><span class="vignette"></span><img src="'+img[t]+'" height="350" width="640" alt=""></img></a><header><h3 class="entry-title-Thin">
<a href="'+i+'" title="">'+o+"</a></h3>
</header></div>
";document.write(v)}else{var v='<div class="ripplelink secondary-post col-post" style="margin-right:0">
<span class="lebb">'+l+'</span><span class="vignette"></span><a class="hover_play_small" href="'+i+'"><img src="'+img[t]+'" height="200" width="320"></img></a><header><h4>
<a href="'+i+'">'+o+"</a></h4>
</header></div>
";document.write(v)}j++}}imgr=new Array,imgr[0]="http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif",showRandomImg=!0,aBold=!0,summaryPost=150,summaryTitle=50,numposts1=10,featured_numpost="4";
//]]>
</script>
<div class="ct-wrapper" id="feature-post-section">
<div class="featured-posts padding clearfix">
<script type="text/javaScript">
document.write("<script src=\"/feeds/posts/default/-/Tenlable?max-results="+featured_numpost+"&orderby=published&alt=json-in-script&callback=sliderpost\"><\/script>");
</script>
</div>
</div>

Tùy chỉnh:
  1. Featured_numpost: Các bạn chỉnh lại số bài muốn hiển th
  2. Nếu muốn hiển thị bài mới các bạn xóa /-/Tenlable và lưu lại
  3. Nếu các bạn muốn không hiển thị trên mobile thì thêm @media only screen and (max-width:480px){#feature-post-section{display:none}} lên trên ]]><
Tổng kết: Đây là tiện ích khá phổ biến ở các template blogspot nước ngoài, đối với các template chưa có thì đây là một cách giúp bạn có đều đó. Hy vọng sẽ bổ ích cho bạn.

Code: arlinadzgn.com

FACEBOOK COMMENT

9 GOOGLE COMMENT

● Không Spam link dưới mọi hình thức.
● Comment sẽ được giải đáp trong ngày.
● Chèn ảnh vào comment bằng các chèn link ảnh trực tiếp
● [pre] Code của bạn [pre], dùng cho code