Bài viết liên quan này rất đơn giản nhưng cũng rất đẹp. Dưới là ảnh demo:
Bài viết theo nhãn trên trang chủ cho Blogspot.
Để có được chúng ta thực hiện nha các bước sau đây.
Bước 1: Tìm thẻ đóng </head> và copy toàn bô code dưới lên trước nó:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://1.bp.blogspot.com/-7vDs5hMaDho/U268E2ecF4I/AAAAAAAADY8/RBHVTTuJrxc/w300-h140-c/no-image.png";
function removeHtmlTag(strx, chop) {
var s = strx.split("<");
for (var i = 0; i < s.length; i++)
if (s[i].indexOf(">") != -1) s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length);
s = s.join("");
s = s.substring(0, chop - 1);
return s
};
function topnewpost(json) {
j = showRandomImg ? Math.floor((imgr.length + 1) * Math.random()) : 0;
img = new Array;
if (numposts1 <= json.feed.entry.length) maxpost = numposts1;
else maxpost = json.feed.entry.length;
for (var i = 0; i < maxpost; i++) {
var entry = json.feed.entry[i];
var tag = entry.category[0].term;
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++)
if (entry.link[k].rel == "alternate") {
posturl = entry.link[k].href;
break
}
for (var k = 0; k < entry.link.length; k++)
if (entry.link[k].rel == "replies" && entry.link[k].type == "text/html") {
pcm = entry.link[k].title.split(" ")[0];
break
}
if ("content" in entry) var postcontent = entry.content.$t;
else if ("summary" in entry) var postcontent = entry.summary.$t;
else var postcontent = "";
postdate = entry.published.$t;
if (j > imgr.length - 1) j = 0;
img[i] = imgr[j];
s = postcontent;
a = s.indexOf("<img");
b = s.indexOf('src="', a);
c = s.indexOf('"', b + 5);
d = s.substr(b + 5, c - b - 5);
if (a != -1 && (b != -1 && (c != -1 && d != ""))) img[i] = d;
var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var month2 = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var day = postdate.split("-")[2].substring(0, 2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for (var u2 = 0; u2 < month.length; u2++)
if (parseInt(m) == month[u2]) {
m = month2[u2];
break
}
var daystr = day + " " + m + " " + y;
var trtd = '<div class="scroll-item secondary-post col-post"><a class="hover_play_small" href="' + posturl + '"><img src="' + img[i] + '"></img></a><header><h3><a href="' + posturl + '">' + posttitle + "</a></h3></header></div>";
document.write(trtd);
j++
}
};
//]]>
</script>
</b:if>
Bước 2: Copy code dưới và dán vào nơi muốn hiển thị ngoài trang chủ.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='cat-box scroll-box topnewpost section' id='topnewpost' showaddelement='yes'>
<b:widget id='HTML999' locked='false' title='' type='HTML' version='1' visible='true'>
<b:includable class='cat-box-content' id='main'>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default<data:content/>?max-results=3&orderby=published&alt=json-in-script&callback=topnewpost\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
<div class='clear'/>
</b:if>
Bước 3: thêm tí CSS để trang trí cho tiện ích bằng cách copy code dưới và thêm trước ]]></b:skin>
#topnewpost {
margin-bottom: 20px;
float: left;
width: 100%
}
.scroll-item {
width: 32.3333333%;
float: left;
margin-right: 1.5%;
position: relative;
}
.scroll-item a {
color: #fff;
}
.scroll-item header {
position: absolute;
padding: 5px 10px;
bottom: 4px;
background: rgba(2,2,2,0.72);
width: 100%;
}
.scroll-item h3 {
font-size: 17px;
}
Giờ thì lưu template lại.Giờ chúng ta vào tab bố cục sẽ xuất hiện một khung thêm tiện ích. Các bạn click vào Chỉnh sửa. Bây giờ, nếu các bạn muốn hiển thị các bài mới nhất của blog thì điền là /. Còn nếu muốn hiển thị theo Label nào đó thì điền là /-/Tên Label. 
