Code widget bài viết mới (recent posts) cho blogspot | Khánh Blog

Code widget bài viết mới (recent posts) cho blogspot


Widget bài viết mới là một tiện ích mở rộng được sử dụng khá phổ biến trong blogger. Vừa tốt cho SEO, vừa chủ động tăng view cho bài viết.


Code widget bài viết mới (recent posts) cho blogspot
Code widget bài viết mới (recent posts) cho blogspot

Yêu cầu cơ bản
- Hiểu rõ về code.
Sao lưu template trước khi thao tác, phòng trường hợp lỗi.
- Trong quá trình chèn code, nếu hệ thống báo lỗi, hãy sử dụng bảng convert mã html sang htmlx để chèn thành công nhé.

Cách chèn code vào trong blogspot
- Đăng nhập blogger.
- Bên menu trái, chọn Mẫu / Chỉnh sửa HTML
- Copy - paste code vào vị trí cần đặt.

Thông thường, wiget bài viết mới sẽ không có sẵn trong code blogger (vì nó là tiện ích mở rộng). Do đó, chúng ta sẽ phải tìm kiếm trên mạng và thay đổi code cho phù hợp với giao diện blogspot.
Những đoạn code dưới đây được mình sưu tầm và có chỉnh sửa đôi chút để dễ hiểu hơn. Code ngắn gọn, widget hoạt động tốt, bù lại CSS hơi sơ sài, nếu bạn thích giao diện bắt mắt hơn, hãy bổ sung thêm CSS và nhớ là bạn phải nắm vững về CSS nhé :)

1. Code widget bài viết mới cơ bản (không có hình ảnh)


<div>
<style type="text/css">
.bbrecpost2 {width:100%; box-sizing:border-box; padding:7px; border-bottom:1px solid #d1d1d1;}
.bbrecpost2:last-child {border:none; }
.bbrecpost2 a{color: #004D99; font:bold 13px Helvetica,Arial,san-serif; line-height:1.6em;}
.bbrecpost2 a:hover {color:darkviolet;}
.bbrecpost2 span {font-size:12px;}
</style>
<div style="border: 1px solid #d1d1d1; box-sizing: border-box;">
<script>
//<![CDATA[
function showrecentposts(json) {
  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 == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    posttitle = posttitle.link(posturl);
    var readmorelink = "&raquo;&raquo;";
    readmorelink = readmorelink.link(posturl);
    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";
    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 (!standardstyling) document.write('');
 document.write('<div class="bbrecpost2">');
    document.write('<span>');
    if (standardstyling) document.write('');

    document.write(posttitle);
    if (standardstyling) document.write('');
    if (showpostdate == true) document.write(' - ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdyear);
    if (!standardstyling) document.write('<div class="bbrecpostsum"">');
    if (standardstyling) document.write('');
    if (showpostsummary == true) {
      if (standardstyling) document.write('');
      if (postcontent.length < numchars) {
         if (standardstyling) document.write('<i>');
         document.write(postcontent);
         if (standardstyling) document.write('</i>');}
      else {
         if (standardstyling) document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '... ' + readmorelink);
         if (standardstyling) document.write('</i>');}
}
    if (!standardstyling) document.write('</div>');
    document.write('</span>');
   document.write('</div>');
    if (standardstyling) document.write('');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('');
document.write('');
if (!standardstyling) document.write('</div>');
}
//]]>
</script>
<script>
var numposts = 5;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
var standardstyling = false;
</script>
<script src="https://123itvn.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>
</div>
</div>

Trong đó, các thuộc tính :
- 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 123itvn.com bằng đường dẫn site của bạn.

Code widget bài viết mới (recent posts) cho blogspot
Bài viết mới (recent posts) cho blogspot dạng 1 (Xem demo)

2. Code widget bài viết mới có hình ảnh và snippet 



<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:12px; }
.danhsach strong {font-size:10px;}
.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://123itvn.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs"></script>
</div>

Trong đó, các thuộc tính
showpostthumbnails : hiển thị hình ảnh (true - có, false - không).
displaymore : hiển thị nút more.
showcommentnum : hiển thị số lượng bình luận bằng Google+
numpostsshowpostdateshowpostsummarynumchars  : giống thằng trên
- Thay 123itvn.com bằng đường dẫn site của bạn.

Code widget bài viết mới (recent posts) cho blogspot
Bài viết mới (recent posts) cho blogspot dạng 2 (Xem demo)

Nguồn : 123tn

2 nhận xét: