Recent Posts - Thủ thuật bài viết mới nhất dạng tin tức cho Blogger

Recent Posts là tiện ích giúp hiển thị những bài viết mới nhất theo từng trương mục hoặc cho toàn bộ Blog. Thủ thuật blogger này được sử dụng rất phổ biến trên các Website nhằm “hô biến” 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ả.

>>Khung Code - Tổng hợp thủ thuật và các khung code đẹp cho Blogger

>>Button - Thủ thuật tạo button ẩn hiện nội dung cho Blogger

>>Slide - Thủ thuật tạo slide ảnh Accordion Slider cho Blogger

>>Page Navi - Thủ thuật tạo phân trang cho Blogger trên 3000 bài

>>Menu - Thủ thuật tạo Menu ngang có hiệu ứng khi rê chuột cho Blogger

>>Drop Down Menu - Thủ thuật Menu xổ xuống tự động cập nhật cho Label Blogger
>>Drop Menu - Thủ thuật tạo Menu click thì xổ dọc xuống Blogger
>>Trang chủ - Thủ thuật code đặt website làm trang chủ trình duyệt cho Blogger
>>Loading - Thủ thuật tạo hiệu ứng loading cho Blogger
>>Code - Thủ thuật tạo khung chứa Code có nút Chọn tất cả cho Blogger
>>Breadrumbs - Thủ thuật tạo Breadrumbs cho Blogger / Blogspot

>>Recent Posts - Thủ thuật tạo bài viết mới nhất giống Quản Trị Mạng cho Blogger

>>Recent Posts - Thủ thuật tạo bài viết mới nhất giống VnExpress cho Blogger

>>Recent Posts - Thủ thuật tạo bài viết mới nhất giống trang báo chí cho Blogger

Tuy nhiên, việc ứng dụng nó cũng gây ra một số “tác dụng phụ” như : ảnh hưởng đến tốc độ load Blog, không tốt cho SEO,…do phải sử dụng JavaScript để lấy dữ liệu từ nguồn cấp Feed. Vì vậy, bạn hãy suy nghĩ thật kỹ trước khi áp dụng nó cho Blog của mình.

1- Đăng nhập vào Blogger / Blogspot

2- Vào Bố cục (Lauout)

3- Chọn Thêm tiện ích (Add widget) => Tạo một widget HTML\JavaScript và dán vào đoạn code bên dưới :

<style type="text/css">
#thietkeblogger-rc {width:300px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff}
.thietkeblogger-rc h2{background:#39c;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-weight:bold}
.thietkeblogger-rc ul{list-style:none;margin:0;padding:0}
.thietkeblogger-rc li{text-indent:0;background:url(http://4.bp.blogspot.com/-TVFMWMC-lZw/UasMPl5QstI/AAAAAAAADVw/Th-PSA_b3SI/s1600/tag_blue.gif) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px}
.thietkeblogger-rc h2 a:link, .thietkeblogger-rc h2 a:visited {color:#fff}
</style>
<div id="thietkeblogger-rc" class="thietkeblogger-rc">
<h2><a href="http://www.thietkeblogger.net/search/label/Blogger?&amp;max-results=5">Thủ thuật blog</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="thietkeblogger-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.thietkeblogger.net/feeds/posts/default/-/Blogger?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
</div>

• 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)
• Thay  http://www.thietkeblogger.net/ thành URL địa chỉ blog của bạn.
• Thay Blogger thành nhãn muốn hiển thị bài đăng mới nhất.

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.thietkeblogger.net/feeds/posts/default/-/Blogspot-tips?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

Thànhđoạn code bên dưới.

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

5- Sau đó Lưu Mẫu Mẫu lại.

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"> 
#thietkeblogger-rc {width:260px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff} 
.thietkeblogger-rc h2{background:#39c;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-size:12px;font-weight:bold} 
.thietkeblogger-rc ul{list-style:none;margin:0;padding:0} 
.thietkeblogger-rc li{text-indent:0;background:url(http://4.bp.blogspot.com/-TVFMWMC-lZw/UasMPl5QstI/AAAAAAAADVw/Th-PSA_b3SI/s1600/tag_blue.gif) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px} 
.thietkeblogger-rc h2 a:link, .thietkeblogger-rc h2 a:visited {color:#fff} 
</style>
<div id="thietkeblogger-rc" class="thietkeblogger-rc"> 
<h2><a href="http://www.thietkeblogger.net/search/label/Blogger?&amp;max-results=5">Thủ thuật blog</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]="http://3.bp.blogspot.com/-Mjpy0f-Hl7w/UasOP9MzQPI/AAAAAAAADV8/Wy3i7VX59f0/s1600/no-image.jpg";} 
        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="thietkeblogger-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.thietkeblogger.net/feeds/posts/default/-/Blogger?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); 
//]]> 
</script> 
</div>

• 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.

Để rút gọn tiêu đề bài viết quá dài, làm mất thẩm mỹ của tiện ích, bạn có thể sử dụng thủ thuật sau đây:
1. Cài đặt Recent Posts. 

2. Tìm trong đoạn code đó bạn sẽ thấy đoạn code có dạng tương tự như dưới (phàn mình tô màu xanh):

<a href="' + h + '"><b>' + g + '</b></a>

Code trên xuất hiện 2 lần.
3. Thay thế đoạn code trên thành đoạn code như bên dưới :

<a href="' + h + '" title="' + g + '"><b>' + removeHtmlTag(g, sumtitle) + '...</b></a>

4. Tiếp tục tìm đoạn code có dạng như sau :

<script type='text/javascript'>      
numposts = 5; list1 = 1; sumPosts = 168;      
</script>

và thay thế thành :

<script type='text/javascript'>      
numposts = 5; list1 = 1; sumPosts = 168; sumtitle = 36;      
</script>

với 36 là số ký tự sẽ lấy làm tiêu đề bài viết. Bạn có thể thay thành số khác nếu muốn.
5. Lưu lại và xem thành quả.