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 không có hình ảnh, chỉ đơn thuần là hiển thị tiêu đề và mô tả ngắn. Nếu bạn quan tâm hiển thị hình ảnh thì tham khảo bài viết sau nhé.

Code tạo hiển thị bài viết mới (recent posts) cho blogspot : không hiển thị hình ả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">
.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://www.son.pro.vn/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>
</div>
</div>

Lưu ý :
- 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

 

No comments