Thêm Tiện Ích Bài Viết Mới Nhất Theo Nhãn Cho Blogger

Trong bài viết này mình muốn cho bạn thấy một cách khác để hiển thị các bài viết mới nhất cho blogger. Với  tiện ích này, bạn có thể tùy chỉnh chỉ hiển thị một danh sách bài viết mới nhất trong một nhãn nhất định, tiện ích sẽ hiển thị hình ảnh thu nhỏ, tiêu đề và đoạn trích của bài đăng.

Demo

Để thực hiện việc thêm tiện ích này vào blog trước hết bạn hãy xem demo, sau đó lưu template của mình lại rồi mới bắt đầu thực hiện theo hướng dẫn của mình dưới đây


Thêm tiện ích Bài Viết Mới Nhất Theo Nhãn Cho Blogger

• Vào blogger > Mẫu > Chỉnh sửa HTML (không cần mở rộng mẫu Tiện ích)
• Dán code bên dưới vào trước thẻ ]]></b:skin>

/*** Recent Labels Gadget Css ***/
img.label_thumb{
float:left;
padding:5px;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{
background:#f7f6f6;
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {}

• Tìm thẻ đóng </head> và dán trước nó đoạn code sau

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;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!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinI3GwiM_usns_lLKLY_l4fo57DD-Ftwz70ix2dG3GCI4cjnrhL8IvkGsrZPzjDz88P4AwoZFp-3iKp5ukC2NwjAna_ofsanrWziAjcbLUv8MJpp8nliOoKhdLhTNEO6dRL1j_0dHaHxvH/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script> 

• Lưu template lại và thực hiện bước tiếp theo
• Vào Blogger > Bố cục > Thêm tiện ích HTML/Javascipt
• Dán vào phần nội dung của tiện ích HTML/Javascript code bên dưới

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
<script type="text/javascript" src="/feeds/posts/default/-/LABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Lưu ý:

1. Bạn phải thay đổi LABEL thành tên nhãn mà bạn muốn hiển thị bài viết mới nhất trong nhãn đó. Ví dụ mình muốn hiển thị các bài viết mới nhất trong nhãn Fun thì mình phải thay LABEL thành Fun
2. Trong trường hợp nếu nhãn của bạn có trên 2 từ thì giữa khoảng cách 2 từ bạn phải thêm %20 vào. Ví dụ như muốn hiển thị các bài viết mới nhất trong nhãn Thủ Thuật thì bạn phải thay LABEL thành Thủ%20Thuật 
3. Mặc định mình để hiển thị 3 bài bạn hãy thay bằng số khác nếu muốn