Hiển thị bài đăng theo Label trên trang chủ cho Blogspot/Blogger

Hướng dẫn hiển thị bài đăng theo Label trên trang chủ cho Blogspot/Blogger.

bai viet theo label cho blogspot

Là bài viết đầu tiên trong chuyên mục Thủ thuật Blogspot của năm 2017. Hôm nay, dạo một vòng các group quen thuộc thì có thấy một bạn đăng hỏi cách hiển thị bài viết theo Label trên trang chủ như thế nào?

Cũng đúng lúc đang bí ý tưởng viết bài, nên là đành viết bài chia sẻ luôn vậy! Với thủ thuật này, bạn sẽ Show ra danh sách các bài viết mới nhất của một Label mà bạn muốn.

Các bước thực hiện

Bước 1: Copy đoạn code sau và thêm vào trước thẻ </head>. Đoạn code dưới đây được dùng để lấy ra danh sách các bài viết mới gồm ThumbnailTiêu đề (Title).

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <script type='text/javascript'>
 //<![CDATA[ 
 imgr = new Array();
 imgr[0] = "http://1.bp.blogspot.com/-7vDs5hMaDho/U268E2ecF4I/AAAAAAAADY8/RBHVTTuJrxc/w300-h140-c/no-image.png";
 numposts1 = 5;
 function removeHtmlTag(strx, chop) {
 var s = strx.split("<");
 for (var i = 0; i < s.length; i++)
 if (s[i].indexOf(">") != -1) s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length);
 s = s.join("");
 s = s.substring(0, chop - 1);
 return s
 }; 
 function topnewpost(json) {
 j = showRandomImg ? Math.floor((imgr.length + 1) * Math.random()) : 0;
 img = new Array;
 if (numposts1 <= json.feed.entry.length) maxpost = numposts1;
 else maxpost = json.feed.entry.length;
 for (var i = 0; i < maxpost; i++) {
 var entry = json.feed.entry[i];
 var tag = entry.category[0].term;
 var posttitle = entry.title.$t;
 var pcm;
 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
 }
 for (var k = 0; k < entry.link.length; k++)
 if (entry.link[k].rel == "replies" && entry.link[k].type == "text/html") {
 pcm = entry.link[k].title.split(" ")[0];
 break
 }
 if ("content" in entry) var postcontent = entry.content.$t;
 else if ("summary" in entry) var postcontent = entry.summary.$t;
 else var postcontent = "";
 postdate = entry.published.$t;
 if (j > imgr.length - 1) j = 0;
 img[i] = imgr[j];
 s = postcontent;
 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 != ""))) img[i] = d;
 var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 var month2 = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 var day = postdate.split("-")[2].substring(0, 2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];
 for (var u2 = 0; u2 < month.length; u2++)
 if (parseInt(m) == month[u2]) {
 m = month2[u2];
 break
 }
 var daystr = day + " " + m + " " + y;
 var trtd = '<div class="scroll-item secondary-post col-post"><a class="hover_play_small" href="' + posturl + '"><img src="' + img[i] + '"></img></a><header><h3><a href="' + posturl + '">' + posttitle + "</a></h3></header></div>";
 document.write(trtd);
 j++
 }
 };
 //]]>
 </script>
</b:if>

Bước 2: Các bạn copy đoạn code dưới đây và dán vào nơi muốn hiển thị nhé! Bước này là để hiển thị ra danh sách các bài viết mà chúng ta đã lấy ra ở bước trên.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:section class='cat-box scroll-box topnewpost section' id='topnewpost' showaddelement='yes'>
 <b:widget id='HTML999' locked='false' title='' type='HTML' version='1' visible='true'>
 <b:includable class='cat-box-content' id='main'>
 <div class='widget-content'>
 <script>
 document.write(&quot;&lt;script src=\&quot;/feeds/posts/default<data:content/>?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=topnewpost\&quot;&gt;&lt;\/script&gt;&quot;);
 </script>
 </div>
 </b:includable>
 </b:widget>
 </b:section>
 <div class='clear'/>
</b:if>

Bước 3: Các bạn copy đoạn CSS dưới đây và dán vào trước thẻ ]]></b:skin> nhé! Đoạn CSS này giúp làm đẹp và hiển thị danh sách theo ý muốn của mình. Các bạn có thể tự viết CSS lấy hoặc dùng bản của mình cũng được nhé!

#topnewpost {
 margin-bottom: 20px;
 float: left;
 width: 100%
}
.scroll-item {
 width: 32.3333333%;
 float: left;
 margin-right: 1.5%;
 position: relative;
}
.scroll-item a {
 color: #fff;
}
.scroll-item header {
 position: absolute;
 padding: 5px 10px;
 bottom: 4px;
 background: rgba(2,2,2,0.72);
 width: 100%;
}
.scroll-item h3 {
 font-size: 17px;
}

Sau khi dán xong, các bạn nhớ Lưu Template lại nhé!

Bước 4: Sau khi Lưu Template rồi, các bạn chuyển tới menu quản lý Bố cục của blog. Tại đây, bạn sẽ thấy có thêm một Section mới như sau:

box top post

Bước 5: Các bạn click vào Chỉnh sửa. Bây giờ, nếu các bạn muốn hiển thị các bài mới nhất của blog thì điền là /. Còn nếu muốn hiển thị theo Label nào đó thì điền là /-/Tên Label.

Tổng kết

Như vậy là chúng ta đã cùng nhau hoàn thành việc hiển thị bài viết theo Label trên trang chủ rồi. Mong rằng, với bài viết này sẽ có ích đối với bạn. Trong bài viết khác, mình sẽ hướng dẫn các bạn thêm với các style khác nhau nữa. Theo dõi blog để không bỏ lỡ các bài viết mới nhất nhé!

DEMO: http://thietketemplateblogspota.blogspot.com/

Hiển thị bài đăng theo Label trên trang chủ cho Blogspot/Blogger
4.9 / 28 votes

Cùng chuyên mục:

Add Comment

33 Comments

  1. Tâm
    4 Bình luận
    19/01/2017
    • Mộc
      Admin
      19/01/2017
      • Tam Doan
        4 Bình luận
        19/01/2017
        • Mộc
          Admin
          20/01/2017
          • Tam Doan
            4 Bình luận
            20/01/2017
            • Mộc
              Admin
              20/01/2017
  2. Huỳnh Phụng
    2 Bình luận
    20/01/2017
  3. Trườngg
    32 Bình luận
    20/01/2017
  4. NAD
    54 Bình luận
    21/01/2017
  5. Văn Thắng
    5 Bình luận
    22/01/2017
  6. Thịnh Nguyễn
    8 Bình luận
    27/01/2017
    • Cảm Nhận Blog hay còn là Phúc
      14 Bình luận
      27/01/2017
  7. Kiên Nguyễn
    43 Bình luận
    01/02/2017
    • Phúc Blogger
      14 Bình luận
      05/02/2017
    • Kiên Nguyễn
      43 Bình luận
      05/02/2017
  8. Trường Nguyễn
    32 Bình luận
    03/02/2017
  9. Vỷ Trần
    2 Bình luận
    03/02/2017
  10. Cuocsongbantang
    3 Bình luận
    05/02/2017
  11. Dụng cụ cầm tay bosch
    4 Bình luận
    20/02/2017
  12. Tạ Hữu Nam
    60 Bình luận
    24/02/2017
  13. Pabuzovn
    2 Bình luận
    19/03/2017
    • Mộc
      Admin
      19/03/2017
      • Pabuzo.vn
        2 Bình luận
        20/03/2017
  14. đào đạt
    4 Bình luận
    26/03/2017
  15. Soitungtang
    1 Bình luận
    30/03/2017
    • Mộc
      Admin
      31/03/2017
  16. Huu
    1 Bình luận
    17/04/2017
    • Mộc
      Admin
      17/04/2017
  17. Bé na
    1 Bình luận
    27/06/2017
  18. Cuong Nguyen
    5 Bình luận
    07/08/2017
  19. Blog Voz
    2 Bình luận
    14/08/2017
  20. Alan Tiến
    1 Bình luận
    16/08/2017