Tiện ích bài đăng mới nhất theo nhãn với ảnh đại diện mới nhất 2014 cho blogspot

Chào các bạn hôm nay Q xin hướng dẫn với các bạn cách tạo tạo widget bài mới nhất có ảnh đại diện cho blogspot 2014, với thủ thuật này bạn có thể tùy biến theo bố cục của blog mình theo hàng ngang, hàng dọc, thậm chí hàng ngang với ảnh thumbnail,  xem demo bên dưới

Xem DEMO

 Để tạo widget các bạn thực hiện theo các bước sau:

Bước 1: Tìm đoạn code  ]]></b:skin> rồi copy đoạn code dưới đây dán lên trên nó

 /* Recent posts by labels
--------------------------------- */ 
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* chiều cao ảnh đại diện */
width:65px; /* chiều dài ảnh đại diện*/
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; }

nếu muốn, các bác thay đổi chiều cao, rộng của ảnh đại diện chỗ chữ màu đỏ, chỉ thay đổi số

Bước 2: Tìm thẻ đóng </head> rồi copy phần code dưới đây dán lên trên nó

<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/AVvXsEiF50YxEpewYjVFk_mbw6srf_rOJynNUALtS6A26LUPkV-Ad7ANKKA-k6Gl-Xc1qr6SlYDvSxVTCSN8RT5n9jo9tp9XII1khjZIYJiVvcciSxISr74ehRcT68u3fP_DXD901Gr2bsAacXE/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>

nếu muốn, các bác có thể thay đổi ảnh đại điện của "bài đăng không có ảnh đại diện" bằng cách lấy link ảnh của bác thay vào đoạn link màu đỏ bên trên.

Bước 3: 

Tìm thẻ đóng </body> rồi copy phần code dưới đây dán lên trên nó

<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&lt;thumbnails.length;i++){ 
thumbnails[i].width = size; 
thumbnails[i].height = size; 
}
}
changeThumbSize("label_with_thumbs",210);              
</script>

Lưu mẫu lại

Bước 4: Vào bố cục, thêm tiện ích HTML vào vị trí muốn đặt, sau đó copy đoạn code này bỏ vào, đặt tên cho tiện ích

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script> 
<script type="text/javascript" src="/feeds/posts/default/-/Tên nhãn?published&alt=json-in-script&callback=labelthumbs"></script>

Thay chỗ "Tên nhãn" thành nhãn của bạn

Lưu tiện ích và lưu sắp xếp là xong.

Bước Mở rộng: Tùy vào ý thích, các b có thể tạo thêm nhiều tiện ích HTML và copy code ở bước 4 bỏ vào, sau đó bỏ nhãn cần hiển thị cho từng tiện ích. Nên đặt theo hàng ngang (nếu blog có bố cục "thêm tiện ích" hàng ngag), hàng dọc v.v....khi đó cần thay đổi độ cao, rộng của tiện ích cho vừa vặn blog của b.

Viết bài: Quân Phạm