Code tạo hiển thị bài viết mới (recent posts) cho blogspot : hiển thị hình ảnh Thumbnail

Chúng ta đang muốn hiển thị các bài viết mới nhất (recent posts) của blogspot lên Sitebar hoặc chân trang. Bạn hãy làm theo cách dưới đây để nhận thấy sự hiệu quả nhé. Đây là cách tạo hiển thị bài viết mới (recent posts) cho blogspot có hiển thị hình ảnh Thumbnail và hiển thị đầy đủ tiêu đề, mô tả ngắn. Nếu bạn quan tâm hiển thị hình ảnh Thumbnail cho hiển thị bài viết mới nhất thì tham khảo bài viết này nhé.

Code tạo hiển thị bài viết mới (recent posts) cho blogspot

- Bước 1: Truy cập vào trang đăng nhập Blogger
- Bước 2: vào phần bố cục, rồi chọn vị trí hiển thị
- Bước 3: chọn tiện tích HTML/Javacript
- Bước 3: Copy và paste đoạn code ở dưới vào + chỉnh sửa các thông số theo nhu cầu

<div>

<style type='text/css'>

.danhsach {float:left; width:100%; margin:0; padding:0; font-size:13px; background:#fff; box-shadow: 0 0 1px #d1d1d1; }

.danhsach li {float:left; width: 100%; margin:0 !important; padding-bottom:5px;padding-top:5px;min-height:75px; list-style-type:none !important; line-height:1.5em; border-bottom:1px dotted #d1d1d1;}

.danhsach li:last-child {border:none;}

.danhsach img {padding:0px;width:72px;height:72px;float:left;margin:0 5px;}

.danhsach a {text-decoration:none; font-weight:bold; color:#004D99 !important;}

.danhsach i {font-style:normal; font-size:14px; }

.danhsach strong {font-size:12px;}

.danhsach hr {display:none;}

</style>

<script>

function showrecentpostswiththumbs(json){document.write('<ul class="danhsach">');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='http://www.webaholic.co.in/other/no-image.jpg';}

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]="Tháng 1";monthnames[2]="Tháng 2";monthnames[3]="Tháng 3";monthnames[4]="Tháng 4";monthnames[5]="Tháng 5";monthnames[6]="Tháng 6";monthnames[7]="Tháng 7";monthnames[8]="Tháng 8";monthnames[9]="Tháng 9";monthnames[10]="Tháng 10";monthnames[11]="Tháng 11";monthnames[12]="Tháng 12";document.write('<li>');if(showpostthumbnails==true)

document.write('<img class="anh" src="'+thumburl+'"/>');document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><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('<i>');document.write(postcontent);document.write('</i>');}

else{document.write('<i>');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('</i>');}}

var towrite='';var flag=0;document.write('<br><strong>');if(showpostdate==true){towrite=towrite+cdday+' - '+monthnames[parseInt(cdmonth,10)]+' - '+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">Chi tiết !</a>';flag=1;;}

document.write(towrite);document.write('</strong></li>');if(displayseparator==true)

if(i!=(numposts-1))

document.write('<hr size=0.5>');}document.write('</ul>');}

</script>

<script>

var numposts = 5;

var showpostthumbnails = true;

var displaymore = true;

var displayseparator = true;

var showcommentnum = true;

var showpostdate = true;

var showpostsummary = true;

var numchars = 100;</script>

<script src="https://www.son.pro.vn/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs"></script>

</div>

Lưu ý :

- showpostthumbnails : hiển thị hình ảnh (true - có, false - không).
- displaymore : hiển thị nút more.
- numposts : số lượng bài viết được hiển thị.
- showpostdate : hiển thị ngày đăng (true - có, false - không).
- showpostsummary : hiển thị mô tả ngắn (true - có, false - không).
- numchars : số ký tự của đoạn mô tả ngắn.
- standardstyling : kiểu hiển thị của đoạn mô tả ngắn (true - viết liền, false - xuống dòng).

- Thay www.son.pro.vn bằng đường dẫn website của bạn.

DEMO MẪU