Thêm tiện ích bài đăng gần đây(Recent Post) theo nhãn(Label) dạng Gird cho Blogger/Blogspot

Bài đăng gần đây(Recent Post) theo nhãn(Label) dạng Gird cho Blogger/Blogspot là một trong vô vàn các hướng dẫn để hiển thị các bài viết mới nhất. Tùy theo bố cục và giao diện mà mỗi người chọn cho mình những cách khác nhau để hiển thị. Tôi post bài này trước là để lưu lại tiện sử dụng sau này, sau là những bạn "không rành code" như tôi có thêm lựa chọn để làm đẹp cho "đứa con tinh thần" của mình. Hy vọng nó hữu ích với bạn!

 XEM DEMO 

Bước 1: Tìm đến thẻ ]]></b:skin> hoặc </style> và thêm trước/trên nó đoạn code:

/* Recent Post Material Design by IDBLANTER.COM */
li.recent-posts:hover{box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 5px 10px 0 rgba(0,0,0,0.12), 0 5px 10px -5px rgba(0,0,0,0.2)}
.recenthd,li.recent-posts{box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);background:#fff;border-radius:3px;overflow:hidden}
a.gorecent{float:right;font-size:11px;padding:5px 10px;margin:-4px}
.recenthd h2{display:inline-block;text-transform:uppercase;font-size:15px;margin:0}
.recenthd svg{float:left;margin-right:10px}
.recenthd{padding:15px;text-align:left;margin-bottom:10px}ul#recent-posts{margin:0;padding:0}
li.recent-posts:nth-child(12),li.recent-posts:nth-child(4),li.recent-posts:nth-child(8){margin-right:0}
li.recent-posts{transition:all .3s ease-in-out;list-style:none;padding:0;margin-bottom:20px;text-align:center;width:260px;max-width:100%;float:left;height:260px;margin-right:20px}
.title_post a{color:#515151}li.recent-posts a:hover{color:#111}
.title_post{height:30px;overflow:hidden;padding:10px;line-height:1.4;font-size:13.4px}
.recent-posts img{height:190px;width:100%}
a.gorecent{text-transform:uppercase;line-height:1.5;font-size:11px;font-weight:700;color:#fff;border:none;padding:7px 15px 7px;border-radius:5px;background:#1976d2;cursor:pointer;outline:0;box-shadow:0 2px 2px 0 rgba(154,154,154,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.12);margin-right:7px}
@media screen and (max-width:768px){.howtouse{width:39%}#safe-wrapper{width:auto;padding:18px;margin:-100px 0 0}li.recent-posts{width:45.6%}}
@media screen and (max-width:480px){li.recent-posts{width:100%}}

Bước 2: Đặt đoạn mã sau trên/trước thẻ </body> 

<script type='text/javascript'>
//<![CDATA[
// Recent Post Settings
var recentpost_url = "https://blanternova.blogspot.com";
var numPosts = 8;
var recentpost_label = "Game";
// Recent Post
function recentPosts(e){if(document.getElementById("recent-posts")){for(var t,s,r=e.feed.entry,n="",a=document.getElementById("recent-posts"),l=0;l<numPosts;l++){for(var c=0;c<numPosts;c++)if("alternate"==r[l].link[c].rel){s=r[l].link[c].href;break}"media$thumbnail"in r[l]?u=r[l].media$thumbnail.url.replace(/.*?:\/\//g,"//").replace(/\/s[0-9]+\-c/g,"/s300"):u="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN23LB76SzCKcdyDyFcCRlwlzC4e-9rDW8VQ9vX1jL8TLB_dzUauKwpmnqjtoqI3wObudQUSTCEJFU7p6Ym8nHXxdeVJKjrg7zrfxkdFQyD3vhSI59pSHgCrf9tB7ypspN9sIVUqWmhUI/s90/nothumb_large.png";var t=r[l].title.$t;n+='<li class="recent-posts"><a href="'+s+'" title="'+t+'" target="_blank"><img src="'+u+'" alt="'+t+'"></a><div class="title_post"><a href="'+s+'" title="'+t+'" target="_blank">'+t+"</a></div></li>"}a.innerHTML=n}}var rcp=document.createElement("script");rcp.src=recentpost_url+"/feeds/posts/default/-/"+recentpost_label+"?orderby=published&alt=json-in-script&max-results="+numPosts+"&callback=recentPosts",document.getElementsByTagName("head")[0].appendChild(rcp);
// Recent Post Title
var titlerecentpost = document.getElementById("xtitlex");
titlerecentpost.innerHTML='<div class="recenthd"><svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"/></svg><h2>'+recentpost_label+'</h2><a class="gorecent" href="'+recentpost_url+'/search/label/'+recentpost_label+'" title="Recent Post" target="_blank">View More</a></div>';
//]]>
</script>

• Bấm Lưu Template và chuyển đến phần Bố cục/Layout.
• Lưu ý: Bạn chú ý phần mình tô đậm, đảm bảo là bạn thay đổi địa chỉ blog, số bài hiển thị và tên nhãn cho đúng.

Bước 3: Vào Bố cục/Layout -> Thêm tiện ích -> HTML/JAVASCRIPT -> Thêm code sau và bấm Lưu lại.

<div id='xtitlex'></div>
<ul id='recent-posts'></ul>

Nguồn bài viết: Material Design Recent Post by label