Recent Posts widget theo label cho blog

Hôm nay mình sẽ chia sẻ một widget rất hay dành cho Blogger, đó là tiện ích Recent Posts (bài đăng gần đây) giống như hình trên. Sau đây là các bước tạo widget:

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ ]]></b:skin>:

/* Recent posts by labels - kjmagic.blogspot.com */ 
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

#label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}

#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}

#label_with_thumbs a { text-transform: uppercase;}
#label_with_thumbs strong {padding-left:0px; }

Bước 2: Chèn đoạn code sau vào trước thẻ </head>:

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul  id="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/AVvXsEhz7SSgAFvynAhfKaxBVEYG8RKrr-CPy1FY5ctKEaymzQFbuGrn9Owwb974-9dJl6Rb4FIXUThYmbbHxtuELVs7l0l6_cegENG_LftJmVKqQNrAVP05gsqnY9ypPlmd-vP_QTFGpqwgpg/s1600/picture_not_available.png';}
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]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";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>

Bước 3: Chèn đoạn code sau vào trước thẻ </body>:

<script type='text/javascript'>                   
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i<thumbnails.length;i++){ 
thumbnails[i].width = size; 
thumbnails[i].height = size; 
}
}
changeThumbSize("label_with_thumbs",210);                   
</script>

Bước 4: Lưu template. Vào Bố cục, tạo một tiện ích HTML/JavaScripts và dán đoạn code bên dưới vào phần nội dung:

<script type='text/javascript'>
var numposts = 3; // Số bài viết hiển thị
var  showpostthumbnails = true; // Hiển thị ảnh thumbnail, có thể thay thành false nếu bạn không muốn hiển thị thumbnail
var displaymore = false; // Thay thành true nếu muốn hiển thị nút read more
var displayseparator =  true;
var showcommentnum = false; // Thay thành true nếu muốn hiển thị số comment
var showpostdate = false; // Thay thành true nếu muốn hiển thị ngày đăng bài
var  showpostsummary = true; // Thay thành false nếu không muốn hiển thị phần tóm tắt
var numchars = 100; // Độ dài phần tóm tắt
</script> 
<script type="text/javascript" src="/feeds/posts/default/-/Tên nhãn?published&alt=json-in-script&callback=labelthumbs"></script>

Dựa vào những chú thích của mình trong code để tùy chỉnh widget theo ý của bạn.

Chúc các bạn thành công !