Tiện ích Recent Posts giống iTechPlus

Recent Posts là tiện ích giúp hiển thị những bài viết mới nhất theo từng nhãn hoặc cho toàn bộ Blog với giao diện đơn giản thuần túy của Blogspot thành giao diện mang phong cách báo chí, giúp Blog bạn trở nên “Pro” hơn trong mắt độc giả.

Hình minh họa

* Cách thực hiện :
1. Vào Thiết kế > Phần tử trang
2. Tạo một widget HTML\JavaScript và dán vào đoạn code bên dưới :

<style type="text/css">
#itechplus-rc {width:260px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff}
.itechplus-rc h2{background:#39c;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-weight:bold}
.itechplus-rc ul{list-style:none;margin:0;padding:0}
.itechplus-rc li{text-indent:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCf-6DUTtVIMJn4-m2mmhvKWxSl8eqd0eaPlu2XbnA8mmX442xyLgI8a76S8sV2PhexeRG_Uxrwo4_P9BJJWgUtyDGw_8U2Nb2B7oIkHAWeuT_kWihyFiujBmhHiIvKLoAcxYrrbpKbq-b/) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px}
.itechplus-rc h2 a:link, .itechplus-rc h2 a:visited {color:#fff}
</style>
<div id="itechplus-rc" class="itechplus-rc">
<h2><a href="http://www.dvt.com.vnus.info/search/label/Office?&max-results=8">Tin học văn phòng</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="itechplus-rc"><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.itechplus.info/feeds/posts/default/-/Office?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
</div>

* Trong đoạn code trên :

numposts = 5; : tổng số bài viết được hiển thị
list1 = 1; : số bài viết hiển thị kèm ảnh thumbnail
sumPosts = 168; : số ký tự mô tả ( summary )

* Nếu bạn muốn hiển thị bài viết mới nhất cho cả Blog thì thay thế đoạn code sau :

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

thành

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

3. Save and Done.
* Update : một số bạn yêu cầu chèn thêm ảnh đại diện khi bài viết không có ảnh và tùy chọn để thay đổi màu chữ tiêu đề. Để làm điều này, bạn cần thay đoạn code chính của thủ thuật bằng đoạn code bên dưới :

<style type="text/css">
#itechplus-rc {width:260px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff}
.itechplus-rc h2{background:#39c;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-size:12px;font-weight:bold}
.itechplus-rc ul{list-style:none;margin:0;padding:0}
.itechplus-rc li{text-indent:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCf-6DUTtVIMJn4-m2mmhvKWxSl8eqd0eaPlu2XbnA8mmX442xyLgI8a76S8sV2PhexeRG_Uxrwo4_P9BJJWgUtyDGw_8U2Nb2B7oIkHAWeuT_kWihyFiujBmhHiIvKLoAcxYrrbpKbq-b/) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px}
.itechplus-rc h2 a:link, .itechplus-rc h2 a:visited {color:#fff}
</style>
<div id="itechplus-rc" class="itechplus-rc">
<h2><a href="http://www.itechplus.info/search/label/Office?&max-results=8">Tin học văn phòng</a></h2>
<script type='text/javascript'>
numposts = 5;
list1 = 1;
sumPosts = 168;
maintitle = "#f0c"; subtitle = "#39c"; </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;} else {img[i]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTyw1dVIqJijj1QDr0La4yukiOsOFsjZvCiBPhUsjo3089olnNzl0Y4nafL0ZnUTb1wsYpObgRhneXwfdVsRLUAAXQiyRCgnR-bG70SeLa0sPlSM8bwUue9Rzq3Nn4MvxLtHvtPSaTKwo/";}
        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 + '" style="color:'+maintitle+'"><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 + '" style="color:'+subtitle+'">' + g + '</a></li>';
        if ((i >= 0) && (i < list1)) {
            var n = l
        }
        if (i == list1) {
            var n = '<div class="itechplus-rc"><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.itechplus.info/feeds/posts/default/-/Office?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
</div>

Trong đó :

maintitle = "#f0c"; : màu tiêu đề bài viết đầu tiên ( có ảnh và trích dẫn )
subtitle = "#39c"; : màu tiêu đề các bài viết tiếp theo

Các bạn có thể xem lại bài viết Bảng mã màu dành cho Blogger để chọn màu phù hợp. Ngoài ra, iTechPlus cũng đã có bài viết hướng dẫn rút gọn tiêu đề đối với những bài viết có tiêu đề quá dài, cũng như hiển thị đầy đủ mỗi khi rê chuột vào, các bạn có thể xem lại tại đây.
* Lưu ý : đoạn code trên có sử dụng một số hình ảnh mà iTechPlus.info sử dụng. Vì vậy, để tránh ảnh hưởng đến site này và blog bạn, vui lòng download về và upload lên host riêng để sử dụng.
Rất đơn giản phải không các bạn !
Chúc các bạn thành công !

Theo iTechPlus.info

Tiện ích Recent Posts giống iTechPlus

Đăng nhận xét

Xem nhiều trong tuần

Tra cứu điểm sim phong thủy