Blog iTeam OS

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

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.

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 recent posts cho blogspot
Code tạo hiển thị bài viết mới (recent posts) cho blogspot

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

Bước 1 :- Trước hết, Đăng nhập vào Trang tổng quan Blogger của bạn.

Bước 2 :- Trên Trang tổng quan Blogger, nhấp vào Bố cục .

Bước 3 :- Nhấp chọn tiện tích HTML/Javacript.

Bước 5 :- Sau đó sao chép mã đã cho và dán vào.

<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>/*<![CDATA[*/
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="/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).

Kết luận :-

Trong bài đăng này, tôi đã hướng dẫn tạo Code tạo hiển thị bài viết mới (recent posts) cho blogspot . Tôi hy vọng hướng dẫn này có thể hữu ích cho bạn. Cảm ơn bạn đã ghé thăm website của chúng tôi.


Truy cập Bypass Google Account APK để tải file APK nhé