Cách tạo Responsive Recent Post với ảnh thumbnail cho Blogger của bạn

Responsive Recent Post with thumbnail

Tiện ích Recent Post hay Bài viết gần đây nhất hiện nay đã trở nên khá quen thuộc đối với các bạn dùng Blogger rồi phải không nào, nó sẽ giúp liệu kê các bài viết mới nhất trên website của bạn. Hôm nay Iris Tips sẽ chia sẻ cho các bạn 1 style của tiện ích này với ảnh thumbnail trông khá đẹp mắt.

Cách thực hiện

1Vào Chủ đề >> Chỉnh sửa HTML và dán trước thẻ ]]></b:skin> đoạn CSS bên dưới

#featured{border:none;padding-left:10px;overflow:hidden;margin-top:20px}
#slides .label_text{display:none}
ul.irisrecentpost{margin:0;padding:0}
#slides li{position:relative;margin:0 10px 0 0;list-style:none;overflow:hidden;width:calc(20% - 10px);height:150px;float:left;transition:all .3s ease-in-out;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.26);}
#slides li img{width:100%;max-width:100%!important;height:150px;border-radius:10px}
#slides li:last-child{margin-right:0}
#slides li h4{transition:all .2s ease-in-out;text-align:center;overflow:hidden;color:#fafafa;width:94%;text-transform:Capitalize;background:rgba(0,0,0,0.40);font-family:'Open Sans',sans-serif;text-shadow:2px 2px 0 rgba(0,0,0,.2);line-height:1.2em;left:0;top:0;bottom:0;position:absolute;font-weight:400;font-size:13px;margin:0 10px 0 0;padding:60px 7px 0}
#slides li h4:hover{background:rgba(0,0,0,0.28)}
.post-box{padding:0 20px 15px}
.tags a{color:#fff;font-size:11px;color:#4b93d1;border:1px solid #4b93d1;padding:4px 7px;margin-right:4px;border-radius:4px}
.tags a:nth-child(n+2){color:#48bf83;border-color:#48bf83}
.tags a:nth-child(n+3){color:#ef564f;border-color:#ef564f}
.tags a:nth-child(n+4){display:none}
.tags a:hover{color:#000;border-color:#000}
img.author-avatar{width:30px;height:30px;border-radius:100%;float:left;margin-right:5px}
@media screen and (max-width:768px){#slides li img{width:100%;height:140px}#slides li{width:calc(48.5% - 1px);height:140px;margin:0 10px 10px 0}#slides li:nth-child(2),#slides li:nth-child(4){margin-right:0}#slides li:last-child,.tags a:nth-child(n+3){display:none}#post-wrapper{width:94%}}
@media screen and (max-width:580px){#post-wrapper{width:89%}}

2Tìm đến thẻ </body> và dán vào trước thẻ đó đoạn JS sau

<script type='text/javascript'>
//<![CDATA[
function FeaturedPost(e){!function(u){h=u.extend({},h,e);var p=u(h.ircontaint),t=h.blogURL,a=200*h.MaxPost;""===h.blogURL&&(t=window.location.protocol+"//"+window.location.host),p.html('<div id="slides"><ul class="irisrecentpost"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);var n=function(e){for(var t,a,n,r,o,s,i,l="",d=e.feed.entry,c=0;c<d.length;c++){for(var f=0;f<d[c].link.length;f++)if("alternate"==d[c].link[f].rel){t=d[c].link[f].href;break}r="media$thumbnail"in d[c]?d[c].media$thumbnail.url.replace(/.*?:\/\//g,"//").replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize):h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1"),a=d[c].title.$t,i=d[c].published.$t.substring(0,10),n=d[c].author[0].name.$t,o=i.substring(0,4),s=i.substring(5,7),l+='<li><a target="_blank" href="'+t+'" title="'+a+'"><div class="overlayx"></div><img class="random lazyload" src="'+r+'" title="'+a+'"><h4>'+a+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+i.substring(8,10)+'</span> <span class="dm">'+h.MonthNames[parseInt(s,10)-1]+'</span> <span class="dy">'+o+n+"</li>"}u("ul",p).append(l)};u(document).ready(function(){var e="/-/"+h.tagName;!1===h.tagName&&(e=""),u.ajax({url:t+"/feeds/posts/default"+e+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:n,dataType:"jsonp",cache:!0}),setTimeout(function(){if(u("#prevx").click(function(){return u("#slides li:first").before(u("#slides li:last")),!1}),u("#nextx").click(function(){return u("#slides li:last").after(u("#slides li:first")),!1}),h.autoplay){var e=h.interval,t=setInterval("rotate()",e);u("#slides li:first").before(u()),u("#slides").hover(function(){clearInterval(t)},function(){t=setInterval("rotate()",e)})}p.removeClass(h.loadingClass)},a)})}(jQuery)}function rotate(){$("#nextx").click()}document.write(""),$(document).ready(function(){FeaturedPost()});var h={blogURL:window.location.origin,MaxPost:5,ircontaint:"#featuredpost",ImageSize:300,interval:4e3,autoplay:!1,loadingClass:"loadingxx",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvB_uyunM3ZcjbOf9YbUSXC6cfhKNq9hdkDblRYg2CVbim1yFUj1oynCww2MP7d8BEElITYG3wd1O2a4gpfFJ8Q98UIvW4_6ztvqVz8-mGl4gwf_30Xs4Ktd1vklwF22iMAaadrbXCxg1H/s400/noimage.jpg",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:!1};
//]]>
</script>

Chỉnh sửa:
autoplay:!1 thành autoplay:!0 nếu bạn muốn kích hoạt hiệu ứng trượt của slide này.
MaxPost:5 là số bài viết bạn muốn hiển thị.

3Dán đoạn HTML sau vào nơi bạn muốn tiện ích này hiển thị

<div class='featured row' id='featured'><div id='featuredpost'></div><div class='clear'></div></div>

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Dunia Blanter/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm