10 kiểu Recent Posts (Bài viết gần đây) đẹp và đơn giản cho Blogger/Blogspot

Dạo gần đây méo có cảm hứng đăng cái vẹo gì, cữ mỗi lần viết bài tầm 5, 10 phút lại tụt hứng, một phần cũng bận vọc làm video nên méo có thời gian chăm coi blog.

Thôi thì up đại 1 bài cho có lệ vậy, dưới đây là: 10 kiểu Recent Posts (Bài viết gần đây) đẹp và đơn giản cho Blogger/Blogspot. Cho bạn nào cần mà lên mạng toàn mấy cái lẻ tẻ nay gom lại thành một đóng cho gọn, đỡ mất công tìm kiếm. 🙃

◉_◉

Style 01: Xem demo + code bên dưới 👇

<div id="hlrpsa"><span style="font-family: Mali; font-size: medium;">
<span style="font-size: medium;"><script type="text/javascript">
function showrecentposts(t) {
    for (var e = 0; e < numposts; e++) {
        var n, r = t.feed.entry[e], i = r.title.$t;
        if (e == t.feed.entry.length) break;
        for (var s = 0; s < r.link.length; s++)
            if ("alternate" == r.link[s].rel) {
                n = r.link[s].href;
                break;
            }
        i = i.link(n);
        var a = "...",
            d = r.published.$t,
            u = d.substring(0, 4),
            o = d.substring(5, 7),
            c = d.substring(8, 10),
            l = new Array();

        // Thay đổi thứ tự hiển thị ngày
        var formattedDate = c + "/" + o + "/" + u; // dd/mm/yyyy

        if ("content" in r)
            var m = r.content.$t;
        else if ("summary" in r)
            var m = r.summary.$t;
        else
            var m = "";
        
        var w = /<\S[^>]*>/g;
        m = m.replace(w, "");
        
        document.write('<div class="rctitle">');
        if (standardstyling) document.write("<br>");
        document.write(i);
        if (1 == showpostdate) document.write(" - " + formattedDate);
        document.write('</div><div class="rcsumm">');

        if (1 == showpostsummary) {
            if (standardstyling) document.write("");
            if (m.length < numchars) {
                standardstyling && document.write("<i>");
                document.write(m);
                standardstyling && document.write("</i>");
            } else {
                standardstyling && document.write("");
                m = m.substring(0, numchars);
                var g = m.lastIndexOf("");
                m = m.substring(0, g);
                document.write(m + a);
                standardstyling && document.write("");
            }
        }
        document.write("</div>");
        standardstyling && document.write("");
    }
    standardstyling || document.write('<div class="bbwidgetfooter">');
    standardstyling && document.write("");
    document.write("");
    standardstyling || document.write("</div>");
}
</script></span></span></div>

<span style="font-family: Mali; font-size: medium;">

<span style="font-size: medium;"><script type="text/javascript">
var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 150;var standardstyling = false;
</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script>
<noscript>Trình duyệt của bạn không hỗ trợ JavaScript!</noscript>
<style type="text/css">
.rctitle a{font-weight: bold;color:#444444;}#hlrpsa {color: #999999; font-size: 12px;}.rcsumm {border-bottom:1px dotted #cccccc; padding-bottom:10px;margin-top:5px;}
</style>

Style 02: Xem demo + code bên dưới 👇

<div id="hlrpsb">
<span style="font-family: Mali; font-size: medium;"><script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var d=0;d<r.link.length;d++)if("alternate"==r.link[d].rel){n=r.link[d].href;break}i=i.link(n);var s=r.published.$t,a=s.substring(0,4),o=s.substring(5,7),l=s.substring(8,10),u=new Array;u[1]="01",u[2]="02",u[3]="03",u[4]="04",u[5]="05",u[6]="06",u[7]="07",u[8]="08",u[9]="09",u[10]="10",u[11]="11",u[12]="12",standardstyling||document.write(""),document.write('<div class="rctitles2">'),standardstyling&&document.write(""),document.write(i),standardstyling&&document.write(""),1==showpostdate&&document.write(" - " + l + "/" + u[parseInt(o, 10)] + "/" + a),standardstyling||document.write("</div>"),document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("/div")}
</script>
<script type="text/javascript">var numposts = 5;var showpostdate = true;var standardstyling = true;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script></span></div>
<span style="font-family: Mali; font-size: medium;"><noscript>Ồ! Hãy đảm bảo JavaScript đã được bật trong trình duyệt của bạn.</noscript>
<style type="text/css">
#hlrpsb a {font-weight: bold;color:#444444;}.rctitles2 {padding-bottom:10px;margin-bottom:10px;border-bottom: 1px dotted #cccccc;}
</style>

Style 03: Xem demo + code bên dưới 👇

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recentq-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX0G9SKW1_yrj1quhv0Zazb8FymbvPYxHOeFihz87L5fG7P7rj9pEoG3AMAERX-1JAqfevhQqNJ6puO-GjwVAVdCAnMFTVwvbWr1HxPtdRz69d8CWzQBPfCC2KmBwq2M3u6KL_P8qlzTexNb744iZSzGFtOtKp84aJKHTtZWEVS7RmP_Z8qiyAMFXd7GM/s72-c/%E1%BA%A2nh.jpg'}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="01",w[2]="02",w[3]="03",w[4]="04",w[5]="05",w[6]="06",w[7]="07",w[8]="08",w[9]="09",w[10]="10",w[11]="11",w[12]="12",document.write('<li class="recentq-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recentq-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recentq-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recentq-posts-details">'),1==posts_date&&(_=_+v+"/"+w[parseInt(g,10)]+"/"+f,$=1),1==showcommentslink&&(1==$&&(_+=" | "),"1 Bình luận"==l&&(l="1 Comment"),"0 Bình luận"==l&&(l="0 Bình luận"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Xem tiếp ⋙</a>',$=1),
document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>

<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestpostswiththumbs"></script>
<noscript>Trình duyệt của bạn không hỗ trợ JavaScript!</noscript>
<style type="text/css">
img.recentq-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recentq-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;}
ul.recentq-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recentq-posts-container li:nth-child(2n+0) {background: #FCD092; width: 100%}
ul.recentq-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 100%;}
ul.recentq-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 100%;}
ul.recentq-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 100%;}
ul.recentq-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #444;}
.recentq-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recentq-post-title a {font-size: 14px;color: #333; font-weight: bold;}
.recentq-post-title {padding: 6px 0px;}
.recentq-posts-details a{ color: #222;}
.recentq-posts-details {padding: 5px 0px 5px; }
</style>

Style 04: Xem demo + code bên dưới 👇

<div class="recentpoststyle">
<span style="font-family: Mali; font-size: medium;"><script type="text/javascript">
function showlatestposts(e) {
    for (var t = 0; t < posts_no; t++) {
        var r, s = e.feed.entry[t], n = s.title.$t;
        if (t == e.feed.entry.length) break;
        for (var a = 0; a < s.link.length; a++) {
            if ("alternate" == s.link[a].rel) {
                r = s.link[a].href;
                break;
            }
        }
        n = n.link(r);
        var i = "... Xem tiếp ⋙";
        i = i.link(r);
        var l = s.published.$t,
            o = l.substring(0, 4), // year
            u = l.substring(5, 7), // month
            c = l.substring(8, 10); // day
        var m = new Array;
        if (
            (m[1] = "01", m[2] = "02", m[3] = "03", m[4] = "04", m[5] = "05", m[6] = "06", 
             m[7] = "07", m[8] = "08", m[9] = "09", m[10] = "10", m[11] = "11", m[12] = "12"),
            "content" in s
        ) var d = s.content.$t;
        else if ("summary" in s) var d = s.summary.$t;
        else var d = "";
        var v = /<\S[^>]*>/g;
        if (
            (d = d.replace(v, ""), 
            document.write('<li class="recent-post-title">'), 
            document.write(n), 
            document.write('</li><div class="recent-post-summ">'), 
            1 == post_summary)
        ) if (d.length < summary_chars) document.write(d);
        else {
            d = d.substring(0, summary_chars);
            var f = d.lastIndexOf(" ");
            d = d.substring(0, f), document.write(d + "" + i);
        }
        document.write("</div>");
        1 == posts_date && document.write('<div class="post-date">Cập nhật lần cuối: Ngày ' + c + "/" + m[parseInt(u, 10)] + "/" + o + "</div>");
    }
}
</script>

<script type="text/javascript">
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script><noscript>Trình duyệt của bạn không hỗ trợ JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none;color: #111111;}
.recentpoststyle a:hover {color: #df5b5b;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#df5b5b; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}
.recent-post-title a {color: #444;text-decoration: none;font-weight: bold;}
.post-date {font-size: 11px;color: #555555;margin:0px 0px 15px 32px;}
.recent-post-summ {border-left:1px solid #df5b5b; color: #444; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px;}
</style></span></div>

Style 05: Xem demo + code bên dưới 👇

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recenta-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX0G9SKW1_yrj1quhv0Zazb8FymbvPYxHOeFihz87L5fG7P7rj9pEoG3AMAERX-1JAqfevhQqNJ6puO-GjwVAVdCAnMFTVwvbWr1HxPtdRz69d8CWzQBPfCC2KmBwq2M3u6KL_P8qlzTexNb744iZSzGFtOtKp84aJKHTtZWEVS7RmP_Z8qiyAMFXd7GM/s72-c/%E1%BA%A2nh.jpg"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="01",w[2]="02",w[3]="03",w[4]="04",w[5]="05",w[6]="06",w[7]="07",w[8]="08",w[9]="09",w[10]="10",w[11]="11",w[12]="12",document.write('<li class="recenta-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recenta-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recenta-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf("");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recenta-posts-details">'),1==posts_date&&(_ = _ + v + "/" + w[parseInt(g,10)] + "/" + f,$=1),1==showcommentslink&&(1==$&&(_+=" | "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Xem tiếp ⋙</a>',$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 50;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestpostswiththumbs"></script>
<noscript>Trình duyệt của bạn không hỗ trợ JavaScript!</noscript>
<style type="text/css">
img.recenta-post-thumb{padding:2px;width:72px;height:auto;float:left;margin:0px 10px 10px 10px;border: 1px solid #df5b5b;}
.recenta-posts-container {font-size:12px;}
ul.recenta-posts-container li{list-style-type: none;font-size:12px;float:left;width:100%}
ul.recenta-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}
ul.recenta-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #df5b5b;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.recenta-posts-container a{text-decoration:none;}
.recenta-post-title {margin-bottom:5px;}
.recenta-post-title a {font-size:13px; color: #111111;font-weight: bold;}
.recenta-posts-details {margin: 5px 0px 0px 92px;}
.recenta-posts-details a{color: #333333;}
</style>

Style 06: Xem demo + code bên dưới 👇

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recentb-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX0G9SKW1_yrj1quhv0Zazb8FymbvPYxHOeFihz87L5fG7P7rj9pEoG3AMAERX-1JAqfevhQqNJ6puO-GjwVAVdCAnMFTVwvbWr1HxPtdRz69d8CWzQBPfCC2KmBwq2M3u6KL_P8qlzTexNb744iZSzGFtOtKp84aJKHTtZWEVS7RmP_Z8qiyAMFXd7GM/s72-c/%E1%BA%A2nh.jpg"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="01",A[2]="02",A[3]="03",A[4]="04",A[5]="05",A[6]="06",A[7]="07",A[8]="08",A[9]="09",A[10]="10",A[11]="11",A[12]="12",document.write('<li class="recentb-posts-list">'),1==posts_date&&document.write('<div class="postb-date">Ngày: '+v+"/"+A[parseInt(w,10)]+"/"+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recentb-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recentb-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recentb-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="areadmorelink" href="'+r+'" class="url" target ="_top">Xem tiếp ⋙</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestpostswiththumbs"></script>
<noscript>Trình duyệt của bạn không hỗ trợ JavaScript!</noscript>
<style type="text/css">
img.recentb-post-thumb {padding: 2px; width:35px;height:auto;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recentb-posts-container {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recentb-posts-container li {padding:5px 0px!important;min-height:65px; list-style-type: none; margin: 0px 10px 5px 50px!important;}
ul.recentb-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recentb-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #AC707A;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.recentb-posts-container a { text-decoration:none; }
.recentb-posts-container a:hover{color: #AC707A;}
.postb-date {color:#AC707A; font-size: 11px; }
.recentb-post-title a {font-size: 14px; color: #5C4D4D;font-weight: bold;}
.recentb-post-title { margin: 5px 0px; }
.recentb-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recentb-posts-details a{ color: #AC707A;}
a.areadmorelink {color: #AC707A;}
</style>

Style 07: Xem demo + code bên dưới 👇

<script type="text/javascript">
function showlatestpostswiththumbs(t) {
    document.write('<ul class="recentc-posts-container">');
    for (var e = 0; e < posts_no; e++) {
        var r, n = t.feed.entry[e], i = n.title.$t;
        if (e == t.feed.entry.length) break;
        for (var o = 0; o < n.link.length; o++) {
            if ("replies" == n.link[o].rel && "text/html" == n.link[o].type)
                var l = n.link[o].title, m = n.link[o].href;
            if ("alternate" == n.link[o].rel) {
                r = n.link[o].href;
                break;
            }
        }
        var u;
        try {
            u = n.media$thumbnail.url;
        } catch (p) {
            s = n.content.$t, a = s.indexOf("<img"), b = s.indexOf('src="', a), c = s.indexOf('"', b + 5), d = s.substr(b + 5, c - b - 5), u = -1 != a && -1 != b && -1 != c && "" != d ? d : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX0G9SKW1_yrj1quhv0Zazb8FymbvPYxHOeFihz87L5fG7P7rj9pEoG3AMAERX-1JAqfevhQqNJ6puO-GjwVAVdCAnMFTVwvbWr1HxPtdRz69d8CWzQBPfCC2KmBwq2M3u6KL_P8qlzTexNb744iZSzGFtOtKp84aJKHTtZWEVS7RmP_Z8qiyAMFXd7GM/s72-c/%E1%BA%A2nh.jpg";
        }
        var h = n.published.$t,
            f = h.substring(0, 4),
            w = h.substring(5, 7),
            v = h.substring(8, 10),
            A = new Array;
        A[1] = "01", A[2] = "02", A[3] = "03", A[4] = "04", A[5] = "05", A[6] = "06", A[7] = "07", A[8] = "08", A[9] = "09", A[10] = "10", A[11] = "11", A[12] = "12";
        
        document.write('<li class="recentc-posts-list">'),
        1 == posts_date && document.write('<div class="postc-date">Ngày đăng: ' + v + "/" + A[parseInt(w, 10)] + "/" + f + "</div>"), // Changed order here
        1 == showpoststhumbs && document.write('<a href="' + r + '"><img class="recentc-post-thumb" src="' + u + '"/></a>'),
        document.write('<div class="recentc-post-title"><a href="' + r + '" target ="_top">' + i + "</a></div>");
        
        var g = "", k = 0;
        document.write('<div class="recentc-posts-details">'),
        1 == showcommentslink && (1 == k && (g += " <br> "), "1 Comments" == l && (l = "1 Comment"), "0 Comments" == l && (l = "No Comments"), l = '<a href="' + m + '" target ="_top">' + l + "</a>", g += l, k = 1),
        1 == readmorelink && (1 == k && (g += " | "), g = g + '<a class="readmorelink" href="' + r + '" class="url" target ="_top">Read more</a>', k = 1),
        document.write(g),
        document.write("</div>"),
        document.write("</li>");
    }
    document.write("</ul>");
}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script rel="nofollow" src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestpostswiththumbs"></script>
<noscript>Trình duyệt của bạn không hỗ trợ JavaScript!</noscript>
<style type="text/css">
img.recentc-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recentc-posts-container {  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recentc-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recentc-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
ul.recentc-posts-container li {padding:5px 0px!important;min-height:50px; list-style-type: none; margin: -2px 20px 5px 20px!important;  border-top: 2px solid #FCD6CB;}
ul.recentc-posts-container {border: 2px solid #FCD6CB; }
.recentc-posts-container a { text-decoration:none; }
.recentc-posts-container a:hover { color: #222;}
.postc-date {color:#df5b5b; font-size: 11px; }
.recentc-post-title a {font-size: 14px;color: #616662;font-weight: bold;}
.recentc-post-title {padding: 6px 0px;}
.recentc-posts-details a{ color: #888;}
.recentc-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #df5b5b;}
</style>

Style 08: Xem demo + code bên dưới 👇

<div id="recentapostiris"></div>
<div id="recentapostnavfeed"></div>

<script type="text/javascript">
//<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "https://chitose2d.blogspot.com/";
    var charac = 50;
    var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostiris(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX0G9SKW1_yrj1quhv0Zazb8FymbvPYxHOeFihz87L5fG7P7rj9pEoG3AMAERX-1JAqfevhQqNJ6puO-GjwVAVdCAnMFTVwvbWr1HxPtdRz69d8CWzQBPfCC2KmBwq2M3u6KL_P8qlzTexNb744iZSzGFtOtKp84aJKHTtZWEVS7RmP_Z8qiyAMFXd7GM/s72-c/%E1%BA%A2nh.jpg",s+="<div class='recentapostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentapostiris").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>⇦ Trước</a>":"<span class='noactived previous'>Mới nhất</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Sau ⇨</a>":"<span class='noactived next'>Cũ nhất</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("recentapostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostiris",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentapostiris").innerHTML="<div id='recentapostload'></div>",document.getElementById("recentapostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<style type="text/css">
/* Recent Post Navigation */
#recentapostnav{border:1px solid #585858;width:100%;margin:0 auto;}
#recentapostiris{margin:0px 0px 0px 0px;}
.recentapostel{display:block;margin:0px 0px 0px 0px;height:auto;min-height:77px;border-bottom:1px dashed #eee;}
.recentapostel:last-child{border-bottom:0;}
.recentapostel img{background:#;float:left;height:auto;margin:0px 10px 0px 0px;width:72px;}
.recentapostel h6,.recentapostel h6 a{font-size:13px; font-weight: bold;margin:0 0 0px 0;color:#444}
.recentapostel h6 a:hover{color:#fc4f3f;}
.recentapostel:hover{background-color:#;}
.recentapostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentapostload{color:#888;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-VHZiNV2ylmoMcZ3ljIY9Z7N3p2AQyeK81aM3QD6l0ETFtOb2vAeB81ZaeeGRmRabBFX8lBe3gmKWKYhoGUKSPsDtTGVpRUOpt3mIuDk1tbWUAVwDSMIANBgkE5OfMwYZdxeS_uExVUve/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;}
#recentapostnavfeed{color:#bbb;font-size:12px;text-align:center;margin:0}
#recentapostnavfeed:hover{background-color:#}
#recentapostnavfeed a{color:#111!important;font-size:12px!important; font-weight: bold;display:block;padding:5px 10px}
#recentapostnavfeed span{padding:5px}
#recentapostnavfeed .next{float:right;color:#999; font-weight: bold;}
#recentapostnavfeed .previous{float:left;color:#999; font-weight: bold;}
#recentapostnavfeed .home{text-align:center}
#recentapostnavfeed a:hover,#recentpostnavfeed span.noactived{color:ff00ff}
</style>

Style 09: Xem demo + code bên dưới 👇

<style type="text/css">
.bbrecpost2 {width:100%; box-sizing:border-box; padding:7px; border-bottom:1px solid #d1d1d1;}
.bbrecpost2:last-child {border:none; }
.bbrecpost2 a{color: #555;font-weight:bold;}
.bbrecpost2 a:hover {color:#df5b5b;}
.bbrecpost2 span {font-size:13px;}
</style>
</span><div style="border: 1px solid rgb(209, 209, 209); box-sizing: border-box;">
<span style="font-family: Mali; font-size: medium;"><script>
//<![CDATA[
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "Xem tiếp ⋙";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Tháng 1";
monthnames[2] = "Tháng 2";
monthnames[3] = "Tháng 3";
monthnames[4] = "Tháng 4";
monthnames[5] = "Tháng 5";
monthnames[6] = "Tháng 6";
monthnames[7] = "Tháng 7";
monthnames[8] = "Tháng 8";
monthnames[9] = "Tháng 9";
monthnames[10] = "Tháng 10";
monthnames[11] = "Tháng 11";
monthnames[12] = "Tháng 12";
var postcontent = ("content" in entry) ? entry.content.$t : ("summary" in entry) ? entry.summary.$t : "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write('<div class="bbrecpost2">');
document.write('<span>');
document.write(posttitle);
if (showpostdate) document.write(' – ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + ' năm ' + cdyear + '<br>');
if (showpostsummary) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '… ' + readmorelink);
}
}
document.write('</span>');
document.write('</div>');
}
}
//]]>
</script>
<script>
var numposts = 5;
var showpostdate = true;
var showpostsummary = true;
var numchars = 90;
var standardstyling = true;
</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>
</span></div>

Style 10: Xem demo + code bên dưới 👇

<style type="text/css">
.danhsach {float:left; width:100%; margin:0; padding:0; font-size:13px; background:#fff; box-shadow: 0 0 1px #d1d1d1; }
.danhsach li {float:left; width: 100%; margin:0 !important; padding-bottom:5px;padding-top:5px;min-height:75px; list-style-type:none !important; line-height:1.5em; border-bottom:1px dotted #d1d1d1;}
.danhsach li:last-child {border:none;}
.danhsach img {padding:0px;width:72px;height:auto;float:left;margin:0px 10px 10px 0px}
.danhsach a {text-decoration:none; font-weight:bold; color:#666;}
.danhsach i {font-style:; font-size:12px; }
.danhsach strong {color:#666;}
.danhsach hr {display:none;}
</style>
<script>
function showrecentpostswiththumbs(json){document.write('<ul class="danhsach">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;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!="")){thumburl=d;}else thumburl='http://www.webaholic.co.in/other/no-image.jpg';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Tháng 1";monthnames[2]="Tháng 2";monthnames[3]="Tháng 3";monthnames[4]="Tháng 4";monthnames[5]="Tháng 5";monthnames[6]="Tháng 6";monthnames[7]="Tháng 7";monthnames[8]="Tháng 8";monthnames[9]="Tháng 9";monthnames[10]="Tháng 10";monthnames[11]="Tháng 11";monthnames[12]="Tháng 12";document.write('<li>');if(showpostthumbnails==true)
document.write('<img class="anh" src="'+thumburl+'"/>');document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('<i>');document.write(postcontent);document.write('</i>');}
else{document.write('<i>');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('</i>');}}
var towrite='';var flag=0;document.write('<br><strong>');if(showpostdate==true){towrite=towrite+cdday+' '+monthnames[parseInt(cdmonth,10)]+' năm '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Chi tiết !</a>';flag=1;;}
document.write(towrite);document.write('</strong></li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('<hr size=0.5>');}document.write('</ul>');}
</script>
<script>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs"></script>

Vài điều cần lưu ý khi sử dụng các code trên:

Bước 1: Thêm Tiện ích HTML/JavaScript ⋙ Chọn style mà bạn thích phía trên rồi dán code nó vào nơi bạn muốn, Có thể cho trực tiếp vào blog như bài viết này cũng được.

Lưu ý các đoạn trong những code bên trên:

– showpostthumbnails: hiển thị hình ảnh (true – có, false – không).

– displaymore: hiển thị nút more.

– showcommentnum: hiển thị số lượng bình luận bằng Google

– numposts: số lượng bài viết được hiển thị.

– showpostdate: hiển thị ngày đăng (true – có, false – không).

– showpostsummary: hiển thị mô tả ngắn (true – có, false – không).

– numchars: số ký tự của đoạn mô tả ngắn.

– standardstyling: kiểu hiển thị của đoạn mô tả ngắn (true – viết liền, false – xuống dòng).

Hãy bình luận bên dưới nếu không hiểu chỗ nào nhé!

Hashtag: 10 kiểu Recent Posts (Bài viết gần đây) đẹp và đơn giản cho Blogger/Blogspot

Cập nhật gần đây

Đầu trang 1 - 728x90

468x60

Main Menu

Chủ Nhật

10 kiểu Recent Posts (Bài viết gần đây) đẹp và đơn giản cho Blogger/Blogspot

Không có nhận xét nào

Đăng nhận xét

Có thể bạn chưa xem

Đề cử

1001 kiểu tóc trong Anime, màu sắc và ý nghĩa của chúng

Top 5 tuần này

Chuyên mục

Giới thiệu

Liên kết

Pages

Méo biết

Cập nhật gần đây

Đầu trang 1 - 728x90

468x60

Main Menu

Chủ Nhật

10 kiểu Recent Posts (Bài viết gần đây) đẹp và đơn giản cho Blogger/Blogspot

Liên quan gần đây

Không có nhận xét nào

Đăng nhận xét

Có thể bạn chưa xem

Đề cử

1001 kiểu tóc trong Anime, màu sắc và ý nghĩa của chúng

Top 5 tuần này

Chuyên mục

Giới thiệu

Liên kết

Pages

Méo biết