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

Vào lúc 2:08 PM
Giới thiệu 1 chút về Recent Postswidget 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 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/AVvXsEgN4b54_DyX6afUY-ty-TBOaU_OqKEp78sB-ezgcf4CNUHoRRgT-1F5YslvLArP-2CNOUsTBtuS-u3IwPdYPHIcbjpEvpFE5TuDlagENtXNUwrdGfaRR87vuaKkVqRSsaxa9BqagIwW785w/) 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

Mẫu giao diện liên quan

6 Komentar
avatar

Cái này cho vào chỗ nào trong blog cũng được hả bạn

Balas
avatar

Bạn có thể sửa giúp mình địa chỉ của văn Việt's Blog thành Tên Hiển thị Đồng Việt's Blog, địa chỉ blog dongvietblog.blogspot.com? Thanks bạn!

Balas
avatar

Mình sửa rồi bạn nhé

Balas
avatar

CHỉnh lại màu chữ thì làm sao vậy bạn ?

Balas

Hãy để lại bình luận của bạn
  • Vui lòng để lại ý kiến của bạn về chủ đề. Comments bao gồm liên kết hoạt động, quảng cáo, hoặc tương tự sẽ bị xóa.
  • Để chèm một đoạn code ngắn <i rel="code"> Mã code </i>
  • Để chèn một đoạn code dài <i rel="pre"> mã code </i>
  • Để chèn trích dẫn <i rel="quote"> Nội dung trích dẫn </i>
  • Để chèn hình ảnh <i rel="image"> Link ảnh </i>
  • Để chèn một đoạn video [iframe] URL embed video [/iframe]
  • Sau đó click dán vào ô bên dưới </>
  • © 2015 Khám Phá Blog ✔

Tìm Chúng tôi trên bản đồ
-->