Hiển thị bài viết theo nhãn kèm theo hình ảnh thu nhỏ ngoài trang chính của blog vô cùng đơn giản và dễ dàng. Việc hiển thị bài viết kèm theo nhãn ngoài trang chủ của blog sẽ giúp trang Blogspot của bạn chuyên nghiệp và đẹp mắt hơn. Bây giờ bạn và truongblogger cùng thực hiện những bước đơn giản để hiển thị bài viết theo nhãn nhé.

Cách hiển thị bài đăng theo Label

Trước khi thực hiện bạn có thể xem trước bằng hình ảnh dưới đây:
Cách hiển thị bài đăng theo Label trên trang chủ cho Blogspot/Blogger
Demo 1
Cách hiển thị bài đăng theo Label trên trang chủ cho Blogspot/Blogger
Demo 2
Bước 1: Từ Blogger bạn chọn Chủ Đề sau đó chọn Chỉnh sửa HTML. Tiếp theo các bạn ấn Ctrl +F để tìm từ thẻ ]]></ b: skin> và dán toàn bộ CSS sau lên trên thẻ đó:
li.recent-posts-list a{position:relative;overflow:hidden}
ul.recent-posts-container{list-style:none;margin:0;line-height:normal;overflow:hidden;display:flex;flex-wrap:wrap}
ul.recent-posts-container li.recent-posts-list{position:relative;float:left;width:32.33%;text-align:center;font-size:10px;padding:0;margin:.5%;max-height:200px;overflow:hidden}
ul.recent-posts-container img.recent-post-thumb{width:100%;background:#000;margin:auto}
ul.recent-posts-container .post-date{font-size:10px;float:left}
ul.recent-posts-container .recent-details{display:none}
ul.recent-posts-container .recent-post-title a{float:none!important;text-align:center}
ul.recent-posts-container li.recent-posts-list a{position:relative;display:block;height:100%;width:100%}
ul.recent-posts-container .readmorelink{position:absolute;top:5px;left:5px;padding:2px 5px;font-size:10px;background:rgba(0,0,0,.8);color:#FFF}
.recent-posts-details{display:none}
ul.recent-posts-container .recent-post-title{color:rgba(0,0,0,.99);padding:10px 30px;padding-top:8px;font-size:18px;background:#fff;display:inline-block;font-weight:400;width:100%;text-align:center;position:absolute;left:0;bottom:0;width:100%;transform:translateY(4px) scale(1.1);-webkit-transform:translateY(4px) scale(1.1);-moz-transform:translateY(4px) scale(1.1);-ms-transform:translateY(4px) scale(1.1);-o-transform:translateY(4px) scale(1.1);opacity:0;transition:.6s all ease-in;-webkit-transition:.6s all ease-in;-moz-transition:.6s all ease-in;-ms-transition:.6s all ease-in;-o-transition:.6s all ease-in;transform-origin:center}
li.recent-posts-list:hover .postedon{transform:translateX(5px);-webkit-transform:translateX(5px);-moz-transform:translateX(5px);-ms-transform:translateX(5px);-o-transform:translateX(5px)}
ul.recent-posts-container li.recent-posts-list:hover .recent-post-title{transform:translateY(-20px) scale(1.1) rotate(-2deg);-webkit-transform:translateY(-20px) scale(1.1) rotate(-2deg);-moz-transform:translateY(-20px) scale(1.1) rotate(-2deg);-ms-transform:translateY(-20px) scale(1.1) rotate(-2deg);-o-transform:translateY(-20px) scale(1.1) rotate(-2deg);transition:.6s all ease-out;-webkit-transition:.6s all ease-out;-moz-transition:.6s all ease-out;-ms-transition:.6s all ease-out;-o-transition:.6s all ease-out;opacity:1}
li.recent-posts-list .postedon{position:absolute;font-size:14px;font-weight:700;z-index:2;left:-5px;top:20px;background:#6B6B6B;color:#fff;padding:5px;border-left:solid 5px #000;transition:.4s all ease;-webkit-transition:.4s all ease;-moz-transition:.4s all ease;-ms-transition:.4s all ease;-o-transition:.4s all ease}
.completed{padding:0!important;background:##36688a!important}
.completed h4{display:inline-block;width:100%;padding:10px;margin:0}
.completed h4 a{text-align:center;float:right;color:#fff;font-size:14px;padding:8px 20px;line-height:1.5;display:inline-block;background:#b53428}
.completed h4 span{color:#fff;display:inline-block;font-size:14px;line-height:1.5;padding:8px 0}
.section{margin:0}
@media (max-width:768px) {
ul.recent-posts-container li.recent-posts-list{width:49%}
}
@media (max-width:480px) {
ul.recent-posts-container li.recent-posts-list{width:100%;margin:0;max-height:none;margin-bottom:14px}
}
.completed{clear:both;margin-bottom:20px;font-weight:400;color:#000;font-size:16px;margin-bottom:15px;margin-top:0;text-transform:uppercase;background:#c2382b!important;padding:15px;color:#fff}
.completed h4{display:inline-block;width:100%;padding:10px;margin:0}
Bước 2: Bạn vào Bố cục và thêm một Tiện ích HTML mới và thêm đoạn code sau vào trong đó
<div class='widget-content'>
<div class="completed"><h4><span>TÊN NHÃN</span>
<a href='/search/label/TÊN NHÃN?&max-results=7'>Xem thêm...</a>
</h4>
</div>
<script>
var posts_no = 9; // <!-- số bài viết hiển thị -->
var labelnya = "TÊN NHÃN"; <!-- thay tên nhãn -->
var showpoststhumbs = true;var readmorelink = false;var showcommentslink = false;var posts_date = true;var post_summary = false;var summary_chars = 0;function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+130),d=s.substr(b+130,c-b-130),u=-130!=a&&-130!=b&&-130!=c&&""!=d?d:"https://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}
var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list"><div class="postedon"><span><i class="fa fa-film fa-fw"></i>'+labelnya+'</span></div><a href="'+r+'">'),
1==showpoststhumbs&&document.write('<img class="recent-post-thumb" src="'+u+'"/>'),
document.write('<h3 class="recent-post-title"><span>'+i+"</span></h3></a>"),
"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";
var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);
var y=A.lastIndexOf(" ");A=A.substring(0,y),
document.write(A+"...")}var _="",$=0;
document.write('<div class="recent-posts-details"><span class="dett">'),
1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),
1==readmorelink&&(1==$&&(_+=" </span>"),
_=_+'<span class="redmore"><a href="'+r+'" class="urls" target ="_top">Selengkapnya</a></span>',$=1),
1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),
l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),
document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
document.write("<script src=\/feeds\/posts\/default/-/"+labelnya+"?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs><\/script>");
document.write("<script type=\'text\/javascript\'>\/\/<![CDATA[\r\n$(document).ready(function() {$(\'img.recent-post-thumb\').attr(\'src\', function(i, src) \r\n{return src.replace( \'s200-c\', \'w300-h190-c\' );});});\r\n\/\/]]><\/script>");
</script>
</div>
Lưu mẫu lại và xem kết quả! Chúc bạn thành công.