Tạo Recent Posts với style tin tức đẹp theo nhãn (label) cho Blogspot

Recent Posts là widget cập nhật thông tin bài viết mới nhất của blog hoặc theo một nhãn (label) của blog. Hôm nay, mình giới thiệu đến các bạn tiện ích này với style tin tức đẹp.

Demo-Recent Posts

Để tạo widget Recent Posts, các ban thực hiện các bước sau:

Bước 1: Các bạn vào Bố cục→Thêm tiệc ích HTML→Thêm đoạn code sau:

<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/AVvXsEiJyFYtU9PcK3gq-677SPfo2EX9IkW06IBy20DF6QR_uXKP2xSeQUSPG2WJs8gCxDPY_SSrLi539AR-O3hJWUHgX_Zroo5Mjd06S8oFnUQOYz2AK6mfKTiWLOs0j4TiGiWZpFMQMiFG_DRe/) 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> 
<div id="rc-plus" class="rc-plus"> 
<h2><a href="http://www.vanvietblog.blogspot.com/search/label/Phần mềm">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=\"http://www.vanvietblog.blogspot.com/feeds/posts/default/-/Phần mềm?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); 
//]]> 
</script> 
</div>

Lưu ý: Các bạn thay http://www.vanvietblog.blogspot.com thành địa chỉ blog của bạn.
-Phần mềm">Phần mềm</a></h2> là tiêu đề của widget.
-Phần mềm là Nhãn(label) hiển thị của wiget.
-Nếu bạn muốn widget hiển thị bài viết của tất cả các nhãn của Blog. Các bạn thay đoạn code

document.write("<script src=\"http://www.vanvietblog.blogspot.com/feeds/posts/default/-/Phần mềm?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

thành đoạn code

document.write("<script src=\"http://www.vanvietblog.blogspot.com/feeds/posts/default/?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

-Trong đoạn code trên
numposts = 5: số bài viết hiển thị;
list1 = 1: số lượng bài viết có hình ảnh avatar;
sumPosts = 168: số kí tự của mô tả;

Nguồn bài viết: ITechPlus.info-Code Edit by Văn Việt Blog's