Cách hiển thị bài đăng theo Label trên trang chủ cho Blogspot/Blogger

Cách hiển thị bài đăng theo Label trên trang chủ cho Blogspot/Blogger

Lưu ý: Bạn nên đọc kỹ bài viết trước khi thực hiện để đảm bảo không có sai sót. Các bài viết có nội dung tải về Pass giải nén (nếu có) truongblogger.com. Nếu có thắc mắc hay liên hệ với mình tại đây nhé. Thanks!!!
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.
Trên đây là bài viết Cách hiển thị bài đăng theo Label trên trang chủ cho Blogspot/Blogger. Nếu thấy bài viết hữu ích đừng quên chia sẻ đến bạn bè nhé! Hoặc có sai sót gì mong bạn đọc cho một nhận xét phía dưới để hoàn thiện tốt hơn bài viết.
Bài trước Bài trước
Bài tiếp theoBài tiếp theo
Lưu ý:
Vui lòng sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
Bạn có thể sử dụng tài khoản Facebook hoặc đăng nhập Disqus để thực hiện bình luận bài viết.
FacebookDisqus
Thêm nhận xét