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 👇
Én Emoticons | Biểu tượng cảm xúc - 11/03/2025
Bạn thắc mắc mấy cái Emoticons này để làm cái quần què gì ư? À thì bạn có thể làm nhiều thứ ví dụ như... lụm link ảnh chèn vào phần bình luận trên blo...
Bình luận là một phần quan trọng của blog, giúp bạn kết nối với độc giả và tạo ra những cuộc thảo luận sôi nổi. Tuy nhiên, nếu bình luận mới không hiể...
Trong bài viết lần trước, mình đã giới thiệu đến với các bạn mẫu Slider ảnh cực đẹp và hiện đại cho Blogger/Blogspot. Lần này mình mang đến một mẫu mi...
Bạn muốn blog của mình trông thật ấn tượng và chuyên nghiệp? Một slider ảnh đẹp mắt không chỉ làm nổi bật nội dung mà còn tạo nên sức hút ngay từ cái ...
Fan Base Responsive Blogspot Template là một mẫu giao diện được thiết kế đặc biệt cho các blog liên quan đến anime, fanpage, hoặc cộng đồng yêu thích ...
<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&alt=json-in-script&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 👇
Én Emoticons | Biểu tượng cảm xúc - 11/03/2025
<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&alt=json-in-script&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 👇
Bạn thắc mắc mấy cái Emoticons này để làm cái quần què gì ư? À thì...11/03/2025 | 0 Nhận xét | Xem tiếp ⋙
Bình luận là một phần quan trọng của blog, giúp bạn kết nối với độc...14/02/2025 | 0 Nhận xét | Xem tiếp ⋙
Trong bài viết lần trước, mình đã giới thiệu đến với các bạn mẫu...15/01/2025 | 0 Nhận xét | Xem tiếp ⋙
Bạn muốn blog của mình trông thật ấn tượng và chuyên nghiệp? Một...10/01/2025 | 0 Nhận xét | Xem tiếp ⋙
Fan Base Responsive Blogspot Template là một mẫu giao diện được thiết...27/12/2024 | 0 Nhận xét | Xem tiếp ⋙
<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&alt=json-in-script&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 👇
Bạn thắc mắc mấy cái Emoticons này để làm cái quần què gì ư? À thì bạn có thể... Xem tiếp ⋙
Cập nhật lần cuối: Ngày 11/03/2025
Bình luận là một phần quan trọng của blog, giúp bạn kết nối với độc giả và tạo... Xem tiếp ⋙
Cập nhật lần cuối: Ngày 14/02/2025
Trong bài viết lần trước, mình đã giới thiệu đến với các bạn mẫu Slider ảnh cực... Xem tiếp ⋙
Cập nhật lần cuối: Ngày 15/01/2025
Bạn muốn blog của mình trông thật ấn tượng và chuyên nghiệp? Một slider ảnh đẹp... Xem tiếp ⋙
Cập nhật lần cuối: Ngày 10/01/2025
Fan Base Responsive Blogspot Template là một mẫu giao diện được thiết kế đặc... Xem tiếp ⋙
Cập nhật lần cuối: Ngày 27/12/2024
<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&alt=json-in-script&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 👇
- Bạn thắc mắc mấy cái Emoticons này để làm cái quần...11/03/2025 | 0 Nhận xét | Xem tiếp ⋙
- Bình luận là một phần quan trọng của blog, giúp bạ...14/02/2025 | 0 Nhận xét | Xem tiếp ⋙
- Trong bài viết lần trước, mình đã giới thiệu đến v...15/01/2025 | 0 Nhận xét | Xem tiếp ⋙
- Bạn muốn blog của mình trông thật ấn tượng và chuy...10/01/2025 | 0 Nhận xét | Xem tiếp ⋙
- Fan Base Responsive Blogspot Template là một mẫu g...27/12/2024 | 0 Nhận xét | Xem tiếp ⋙
<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&alt=json-in-script&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 👇
- Ngày: 11/03/2025
- Ngày: 14/02/2025
- Ngày: 15/01/2025
- Ngày: 10/01/2025
- Ngày: 27/12/2024
<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&alt=json-in-script&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 👇
- Ngày đăng: 11/03/2025
- Ngày đăng: 14/02/2025
- Ngày đăng: 15/01/2025
- Ngày đăng: 10/01/2025
- Ngày đăng: 27/12/2024
<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&alt=json-in-script&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 👇
Én Emoticons | Biểu tượng cảm xúc – 11 Tháng 3 năm 2025
Bạn thắc mắc mấy cái Emoticons này để làm cái quần què gì ư? À thì bạn có thể làm nhiều… Xem tiếp ⋙
Bạn thắc mắc mấy cái Emoticons này để làm cái quần què gì ư? À thì bạn có thể làm nhiều… Xem tiếp ⋙
Hiển thị bình luận gần đây trên Blog với CSS và JavaScript – 14 Tháng 2 năm 2025
Bình luận là một phần quan trọng của blog, giúp bạn kết nối với độc giả và tạo ra những… Xem tiếp ⋙
Bình luận là một phần quan trọng của blog, giúp bạn kết nối với độc giả và tạo ra những… Xem tiếp ⋙
Hướng dẫn thêm Mini Slider vào bài viết Blogger/Blogspot – 15 Tháng 1 năm 2025
Trong bài viết lần trước, mình đã giới thiệu đến với các bạn mẫu Slider ảnh cực đẹp và… Xem tiếp ⋙
Trong bài viết lần trước, mình đã giới thiệu đến với các bạn mẫu Slider ảnh cực đẹp và… Xem tiếp ⋙
Code Slider ảnh cực đẹp và hiện đại cho Blogger/Blogspot – 10 Tháng 1 năm 2025
Bạn muốn blog của mình trông thật ấn tượng và chuyên nghiệp? Một slider ảnh đẹp mắt không… Xem tiếp ⋙
Bạn muốn blog của mình trông thật ấn tượng và chuyên nghiệp? Một slider ảnh đẹp mắt không… Xem tiếp ⋙
Fan Base Responsive Blogspot Template - Theme đơn giản cho blog tải anime – 27 Tháng 12 năm 2024
Fan Base Responsive Blogspot Template là một mẫu giao diện được thiết kế đặc biệt cho các… Xem tiếp ⋙
Fan Base Responsive Blogspot Template là một mẫu giao diện được thiết kế đặc biệt cho các… Xem tiếp ⋙
<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&alt=json-in-script&callback=showrecentposts"></script>
</span></div>Style 10: Xem demo + code bên dưới 👇
- Én Emoticons | Biểu tượng cảm xúc
Bạn thắc mắc mấy cái Emoticons này để làm cái quần què gì ư? À thì bạn có thể làm nhiều thứ ví dụ...
11 Tháng 3 năm 2025 | 0 Nhận xét | Chi tiết ! - Hiển thị bình luận gần đây trên Blog với CSS và JavaScript
Bình luận là một phần quan trọng của blog, giúp bạn kết nối với độc giả và tạo ra những cuộc thảo...
14 Tháng 2 năm 2025 | 0 Nhận xét | Chi tiết ! - Hướng dẫn thêm Mini Slider vào bài viết Blogger/Blogspot
Trong bài viết lần trước, mình đã giới thiệu đến với các bạn mẫu Slider ảnh cực đẹp và hiện đại cho...
15 Tháng 1 năm 2025 | 0 Nhận xét | Chi tiết ! - Code Slider ảnh cực đẹp và hiện đại cho Blogger/Blogspot
Bạn muốn blog của mình trông thật ấn tượng và chuyên nghiệp? Một slider ảnh đẹp mắt không chỉ làm...
10 Tháng 1 năm 2025 | 0 Nhận xét | Chi tiết ! - Fan Base Responsive Blogspot Template - Theme đơn giản cho blog tải anime
Fan Base Responsive Blogspot Template là một mẫu giao diện được thiết kế đặc biệt cho các blog liên...
27 Tháng 12 năm 2024 | 0 Nhận xét | Chi tiết !
<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&alt=json-in-script&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
Không có nhận xét nào
Đăng nhận xét