Tạo responsive recent post ngoài trang chủ cho blogspot

Xin chào mọi người hôm nay mình xin chia sẻ với các bạn một thủ thuật blog đơn giản nhưng cũng không kém phần tiện ích cho những blogger là tạo recent post ngoài trang chủ tự động chuyển bài khá đẹp mắt.

Ảnh minh họa 

CÁC BƯỚC THỰC HIỆN:

Bước 1: Truy cập Chủ đề > Chỉnh sửa HTML dán toàn bộ CSS bên dưới trước thẻ ]]></b:skin> 

#featured{border:none;padding-left:30px;overflow:hidden;margin-top:45px}#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:200px;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:200px;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: 98%; text-transform: uppercase; background: rgba(0,0,0,0.40); font-family: &#39;Roboto&#39;,sans-serif; text-shadow: 2px 2px 0 rgba(0,0,0,.2); line-height: 1.2em; left: 0; top: 140px; bottom: 0; position: absolute; font-weight: 600; font-size: 13px; padding: 5px; height: 40px;}
#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){#featured{margin-top: 70px;padding-left:0;margin-bottom: -70px;}#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%}}

Bước 2: Tìm đến thẻ </body> dán JS bên dưới lên trên thẻ đó:
<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:!0,loadingClass:"loadingxx",pBlank:"https://1.bp.blogspot.com/-DyoQOMrVtxs/W21kG9OwW5I/AAAAAAAAF4Q/qzPOVeR809Ic0yupNHst8CCzIxCfN_jOACLcBGAs/s400/noimage.jpg",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:!1};
//]]>
</script>

Lưu ý: MaxPost:5 là số bài muốn hiển thị
Bước cuối: Thêm HTML bên dưới vào nơi muốn hiển thị thường thì dưới menu.
<b:if cond='data:blog.url == data:blog.homepageUrl'><div class='featured row' id='featured'><div id='featuredpost'></div><div class='clear'></div></div></b:if>

Chúc tất cả các bạn thành công  
Nguồn code: iris-tips 
Mod bởi: Lê Bá Long Blog

Viết bình luận (8)
Xếp theo