Code Hiển Thị Bài Đăng Theo Nhãn Có Ảnh Trong Blogspot

Xin chào các bạn hôm nay QuyKhanhIT xin hướng dẫn các bạn cách tạo một Widget bài viết mới nhất hiển thị theo Label có Thumbnails ảnh cho blogspot. Mục đích của việc này là giúp cho blog của bạn trở nên sinh động hơn và giúp cho để người đọc có thể đọc được nhiều bài viết hơn, giúp giữ chân người ghé thăm blog bạn lâu hơn.

Mô Tả Ảnh

Đây là các dạng ví dụ widget theo nhãn có ảnh mà các trang blog khác hay dùng

Hướng Dẫn Chi Tiết

1. Đầu tiên các bạn truy cập vào trang quản lí blogger, ==> Template (Mẫu) ==> Edit HTML (Chỉnh sửa HTML)

*Lưu ý: Nên backup template lại trước khi thực hiện tránh sự cố đáng tiếc

2.Sau đó bấm Ctrl + F tìm thẻ  ]]></b:skin> và thêm đoạn code dưới đây lên trên nó.

/* Recent posts by labels - quykhanhit.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; }

3.Tiếp theo bạn tìm đến thẻ đóng </head> và thêm đoạn code sau 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/AVvXsEg_dmvurYnG0OdxElVVMqT405Ds1BtGK0il7c-bx3Wclm89DTxjdmlOfl0p2MZNflE4nDCtJZgdFaFw8ZzQ1oDxpiNmf3Tlq2ou8xQYzLmcHJv62jlymmATUJgF1ktSwxFJ4qL8_Nw9YAY/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;}elseif("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>

4. Tiếp nữa bạn tìm đến thẻ đóng </body> và thêm đoạn code sau lên trê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>

5.Lưu template lại. Vào bố cục ==> Thêm Tiện Ích ==> HTML/Javascript, pate đoạn code này vào.

<style type="text/css">
#thietkeblogger-rc {width:300px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff}
.thietkeblogger-rc h2{background:#040404;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-weight:bold}
.thietkeblogger-rc ul{list-style:none;margin:0;padding:0}
.thietkeblogger-rc h2 a:link, .thietkeblogger-rc h2 a:visited {color:#fff}
</style>
<div id="thietkeblogger-rc" class="thietkeblogger-rc">
<h2><a href="https://quykhanhit.blogspot.com/search/label/Tên Lable?&amp;max-results=5">Tên Lable</a></h2>
<script type='text/javascript'>var numposts = 5;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 Lable?published&alt=json-in-script&callback=labelthumbs"></script>

Lưu ý:

• var numposts ← Số bài viết bạn muốn hiển thị

• var showpostthumbnails ← Hiển thị hay không hiển thị ảnh (ở đây là true có nghĩa là có hiển thị)
• var displaymore ← Có hiển thị read more link hay không
• var displayseparator ← Hiện / ẩn dấu phân cách
• var showcommentnum ← Hiện / ẩn các bình luận
• var showpostdate ← Hiện/ ẩn ngày viết bài
• var showpostsummary ← Hiện, không hiện tóm tắt bài viết
• var numchars ← Tổng số từ mô tả
• Tên Lable - Tên lable (nhãn) bạn muốn hiển thị
• https://quykhanhit.blogspot.com - Địa chỉ blog của bạn

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