[Tips] - Recent Posts dạng tin tức cho blogspot

Recent Posts cách hiển thị bài viết dùng js để hiện thị bài viết trên widget dành cho những blog muốn làm phong phú blog của mình hay những site tin tức muốn hiển thị bài viết theo nhiều kiểu khác nhau. Thì tiện ích widget Recent Posts là khá hợp lý và chuyên nghiệp.

XEM DEMO

Hôm nay Khám Phá Blog's muốn chia sẻ đến các bạn một dạng Recent Posts dạng hiển thị bài viết theo dạng tin tức khá đẹp và chuyên nghiệp.

Cách thêm Recent Posts widget cho blogsot

1. Thêm css

Để thêm css vào blog thì các bạn tìm đến thẻ </head> và thêm đoạn code sau trên thẻ này

<style type="text/css"> #rc-plus {width:260px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff} .rc-plus h2{background:#39c;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-weight:bold} .rc-plus ul{list-style:none;margin:0;padding:0} .rc-plus li{text-indent:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDTRBPaHJd1WsSJ03LClXz_W33ru89dL9PtKxPcgECHTlDkyWNb12mCQLaEeEKClyf0YU_th9qGvj1BOxMyCL__KhVfkfPtKow5nkDBPD-MRmJ58FMbnYbuFxOxiwJNQF5guBO0twSwD_r/) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px} .rc-plus h2 a:link, .rc-plus h2 a:visited {color:#fff} </style>

2. Hiển thị widget Recent Posts

Để hiện thị widget Recent Posts thì các bạn thêm một tiện ích HTML ở phần bố cục và dán vào đoạn code sau :

<div id="rc-plus" class="rc-plus"> <h2><a href="/search/label/Tên Nhãn">Phần mềm</a></h2> <script type='text/javascript'> numposts = 5; list1 = 1; sumPosts = 168; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(a, b) { var s = a.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, b - 1); return s } function showrecentposts(e) { img = new Array(); for (var i = 0; i < numposts; i++) { var f = e.feed.entry[i]; var g = f.title.$t; var h; if (i == e.feed.entry.length) break; for (var k = 0; k < f.link.length; k++) { if (f.link[k].rel == 'alternate') { h = f.link[k].href; break } } if ("content" in f) { var j = f.content.$t } else if ("summary" in f) { var j = f.summary.$t } else var j = ""; s = j; 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 l = '<table border="0" cellpadding="0" cellspacing="0" style="margin-bottom:5px;border-bottom:double #eee"><tr><td><img width="110" height="85" src="' + img[i] + '" align="left" border="0" title="' + g + '" alt="' + g + '" style="margin:5px 10px 0 0"><a href="' + h + '"><b>' + g + '</b></a><p style="margin:0;padding:5px 0 10px">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>'; var m = '<li><a href="' + h + '">' + g + '</a></li>'; if ((i >= 0) && (i < list1)) { var n = l } if (i == list1) { var n = '<div class="rc-plus"><ul>' + m } if ((i > list1) && (i < numposts - 1)) { var n = m } if (i == numposts - 1) { var n = m + '</ul></div>' } document.write(n) } } document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); //]]> </script> </div>

Sau khi bạn dán như trên vào widget thì nó sẽ hiển thị toàn bộ bài viết trên blog và muốn hiển thị theo nhãn thì bạn chỉnh sửa đoạn

/feeds/posts/default

Thành

/feeds/posts/default/-/Tên Nhãn

Sau đó lưu lại và kiểm tra thành quả.
Kết luận : Không nên quá lạm dụng Recent Posts cho blog bởi vì Recent Posts gắn liền với js góp phần làm chậm cho blogspot của bạn. Nếu bất khả khán bạn phải dùng thì hãy tối ưu js để cho blog của bạn load nhanh hơn nhé.

Xêm thêm : Cách tối ưu js và css cho blogspot

Nguồn : Đồng Việt Blog