Tạo Recent Posts với style tin tức đẹp cho Blogger

Giới thiệu 1 chút về 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 blogger. Recent Posts dễ dàng tùy biến và không làm ảnh hưởng lớn tới tốc độ load của Website. Widget này thích hợp để làm site Tin tức và phù hợp với những bạn làm website thủ thuật
Và sau đây mình xin hướng dẫn các bạn  Tạo Recent Posts với style tin tức đẹp cho Blogger

Để 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/AVvXsEiBsGK5wtiJuKZX9eX3ekii4kIS_dMOS3Bn9hn5entw0GZwQQZqsZg_b4coof1_Rh-Is8vAGKmUoCNraKslAVoA8y9p_QhyphenhyphengEYVHrRGn4YT68x2TvqW4ep2O30dsnX8mBow3XuDESk8nk64/) 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.ichiase.biz/search/label/Thủ%20Thuật%20Blogger">Thủ thuật Blogger</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.ichiase.biz/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.ichiase.biz thành địa chỉ blog của bạn.

-Thủ Thuật Blogger">Thủ thuật Blogger</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.ichiase.biz/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.ichiase.biz/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 : VănViet Blog's

Tag : Thủ Thuật Blogger