Widget hiển thị bài viết mới đăng (recent posts) cho blog

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é :)

Để Widget hiển thị bài viết mới đăng (recent posts) cho blog các bạn làm như sau.

- Đă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.

hoặc bạn có thể vào bố cục / thêm tiện ích / html.

đặt nơi nào bạn muốn nó hiển thị nhé. 

Widget hiển thị bài viết mới đăng (recent posts) cho blog (không có hình ảnh)

Các bạn copy đoạn code bên dưới và dán vào. lưu lại và tận hưởng nhé. 

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

<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="/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).


Like và để lại comment nếu bạn có thắc mắc.
Nhớ ủng hộ bài viết .
Cảm ơn độc giả đã ghé thăm blog.