Hiển thị danh sách bài viết theo nhãn trên sidebar cho blogspot (Blogger)

Xin chào các bạn! Hôm nay mình xin được chia sẻ với các bạn cách hiển thị danh sách bài viết theo nhãn (label) trên thanh bên (hay còn gọi là sidebar). Ngày trước mình cũng loay hoay "lên bờ xuống ruộng" lăn lộn tìm kiếm về vấn đề này vì cái anh Blogger thân yêu của chúng ta chỉ có tiện ích hiển thị 10 bài đăng phổ biến nhiều lượt xem nhất chứ không hỗ trợ hiển thị bài đăng theo nhãn, vì thế nên mình sẽ hướng dẫn các bạn làm thế nào để hiển thị bài viết theo nhãn cho đúng ý mình.

Đầu tiên, bạn hãy đăng nhập vào blogger của bạn, vào Bố cục, sau đó bạn nhìn xem phần sidebar của mình ở đâu rồi ấn "Thêm tiện ích". Tiếp tục chọn "HTML/Javascript" và dán code bên dưới vào phần Nội dung, còn phần Tiêu đề bạn có thể viết tùy ý.


<style type='text/css'>.label_with_thumbs { float: left; padding: 0px; } .label_with_thumbs li { float: left; margin-bottom: 20px; padding-bottom: 20px; } .label_with_thumbs img { float: left; margin-right: 10px; border: 1px solid #ddd; } .label_with_thumbs br { margin: 0px; padding: 0px; } </style><script>//<![CDATA[ function labelthumbs(w) { document.write('<ul class="label_with_thumbs">'); for (var v = 0; v < numposts; v++) { var f = w.feed.entry[v]; var g = f.title.$t; var z; if (v == w.feed.entry.length) { break } for (var r = 0; r < f.link.length; r++) { if (f.link[r].rel == "replies" && f.link[r].type == "text/html") { var n = f.link[r].title; var o = f.link[r].href } if (f.link[r].rel == "alternate") { z = f.link[r].href; break } } var j; try { j = f.media$thumbnail.url } catch (q) { s = f.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 != "")) { j = d } else { j = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-WPG8Sf7dwYM2b23c4EPclkOus3WDAhXdJDEGJEYMjLw4c33-AbZU32y7a5zkhQnIeKCz4ikUCEz0CbCYIG4zGU17AqISFVxutvnH-NwyhFXqUlvhW1DmJqwm23kIeohZW7C6x8bn6tk/s1600/no_image.jpg" } } var x = f.published.$t; var m = x.substring(0, 4); var l = x.substring(5, 7); var t = x.substring(8, 10); document.write('<li class="clearfix">'); if (showpostthumbnails == true) { document.write('<a class="picturelabela" href="' + z + '" target ="_top"><img class="label_thumb" src="' + j + '"/></a>') } document.write('<b><a class="titlelabel" href="' + z + '" target ="_top">' + g + "</a></b><br>"); if ("content" in f) { var y = f.content.$t } else { if ("summary" in f) { var y = f.summary.$t } else { var y = "" } } var p = /<\S[^>]*>/g; y = y.replace(p, ""); if (showpostsummary == true) { if (y.length < numchars) { document.write(""); document.write(y); document.write("") } else { document.write(""); y = y.substring(0, numchars); var e = y.lastIndexOf(" "); y = y.substring(0, e); document.write(y + "..."); document.write("") } } var A = ""; var u = 0; document.write("<br>"); if (showpostdate == true) { A = A + t + "/" + l + "/" + m; u = 1 } if (showcommentnum == true) { if (u == 1) { A = A + " - " } if (n == "1 " + rpbl_comment) { n = "1 " + rpbl_comment } if (n == "0 " + rpbl_comment) { n = "0 " +rpbl_comment } n = '<a href="' + o + '" target ="_top">' + n + "</a>"; A = A + n; u = 1 } if (displaymore == true) { if (u == 1) { A = A + " | " } A = A + '<a href="' + z + '" class="url" target ="_top"> + rpbl_readmore + </a>'; u = 1 } document.write(A); document.write("</li> "); if (displayseparator == true) { if (v != (numposts - 1)) { document.write("<hr size=0.5/> ") } } } document.write("</ul> ") }; //]]></script><script type='text/javascript'>var rpbl_comment = 'Nhận xét'; var rpbl_readmore = 'Đọc tiếp'; var numposts = 4; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = true; var numchars = 100;</script><script type="text/javascript" src="/feeds/posts/default/-/Featured?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Bạn cần chú ý các thuộc tính sau:

rpbl_comment, rpbl_readmore: đơn giản chỉ là đoạn chữ thay thế cho comment và readmore
numpost: số lượng bài viết.
showpostthumbnails: ẩn hiện ảnh thumbnail.
displaymore: ẩn hiện nút readmore.
displayseparator: ẩn hiện đường phân cách hr giữa mỗi bài.
showpostdate: ẩn hiện ngày đăng bài.
showpostsummary: ẩn hiện đoạn trích từ bài viết.
numchars: số lượng ký tự lấy ra cho đoạn trích dẫn.

Ngoại trừ hai đoạn văn bản thay thế cho comment và readmore thì các tùy chỉnh khác sẽ có hai lựa chọn với true (đúng) và false (sai).
Thay thế Featured thành tên nhãn của bạn.

Sau khi dán xong bạn Lưu lại và kiểm tra trên trang blog của mình.

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