Một số cách hiển thị bài viết mới trong Blogspot Phần 2

Hôm nay mình sẽ chia sẻ một số cách để hiển thị bài viết mới trong Blog. Kèm theo là các kiểu css để bắt mắt hơn. Lần trước mình có hướng dẫn lại cách 1 nhưng nó chỉ hiện thị một số mẫu template nhất định và sẽ không hiển thị trên một số mẫu thì hôm nay với các cách này bạn sẽ an tâm hiển thị trên tất cả các mẫu của blog.

Với Style 1:

Với đoạn script này các bạn có thể chèn theo link này hoặc bạn dán code trực tiếp thế cho src mà đưa vào trong <script style="text/javascript"> ....code..</script>

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>

Và thay cho nó là ....code:

function showlatestpostswiththumbs(json) {
document.write('<ul class="recent-posts-container">');
for (var i = 0; i < posts_no; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var postsurl;
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 commentstext = entry.link[k].title;
var commentsurl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
postsurl = entry.link[k].href;
break;
}
}
var recenthumb;
try {
recenthumb = 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 != "")) {
recenthumb = d;
} else recenthumb = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMSa4jkcgcia98IpcGITa3Me1wbJ9lnuxgf1sBYGOe3RThcJn7k-mYf5xLZNcm0rTIFRkacDxjLpnhga4N3HKkfQyMQ6AKp9iMJ0ZsAE7NXqt0FpYMLK7cI6oFkrcgpx1XStlT_DHC8hWi/s1600/no-thumb.png';
}
var postdate = entry.published.$t;
var showyear = postdate.substring(0, 4);
var showmonth = postdate.substring(5, 7);
var showday = postdate.substring(8, 10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
document.write('<li class="recent-posts-list">');
if (showpoststhumbs == true)
document.write('<a href="' + postsurl + '"><img class="recent-post-thumb" src="' + recenthumb + '"/></a>');
document.write('<div class="recent-post-title"><a href="' + postsurl + '" target ="_top">' + posttitle + '</a></div>');
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 (post_summary == true) {
if (postcontent.length < summary_chars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, summary_chars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
}
}
var posts_details = '';
var flag = 0;
document.write('<br><div class="recent-posts-details">');
if (posts_date == true) {
posts_details = posts_details + monthnames[parseInt(showmonth, 10)] + ' ' + showday + ' ' + showyear;
flag = 1;
}
if (readmorelink == true) {
if (flag == 1) posts_details = posts_details + ' | ';
posts_details = posts_details + '<a href="' + postsurl + '" class="url" target ="_top">Read more</a>';
flag = 1;;
}
if (showcommentslink == true) {
if (flag == 1) {
posts_details = posts_details + ' <br> ';
}
if (commentstext == '1 Comments') commentstext = '1 Comment';
if (commentstext == '0 Comments') commentstext = 'No Comments';
commentstext = '<a href="' + commentsurl + '" target ="_top">' + commentstext + '</a>';
posts_details = posts_details + commentstext;
flag = 1;;
}
document.write(posts_details);
document.write('</div>');
document.write('</li>');
}
document.write('</ul>');
}

Với đoạn script này các bạn có thể chèn theo link này hoặc bạn dán code trực tiếp thế cho src mà đưa vào trong <script style="text/javascript"> ....code..</script>

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>

Mẫu:

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script><script style="text/javascript">var posts_no = 5;var showpoststhumbs = true;var readmorelink = true;var showcommentslink = false;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><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' /><style type="text/css">img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}.recent-posts-container a { text-decoration:none; }.recent-posts-container a:hover { color: #222;}.post-date {color:#e0c0c6; font-size: 11px; }.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}.recent-post-title {padding: 6px 0px;}.recent-posts-details a{ color: #222;}.recent-posts-details {padding: 5px 0px 5px; }</style>

Với Style 2:

Code cần thay là:

function showlatestposts(json) { for (var i = 0; i < posts_no; 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 = "... read more";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var showyear = postdate.substring(0,4);
var showmonth = postdate.substring(5,7);
var showday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
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, "");
document.write('<li class="recent-post-title">');
document.write(posttitle);
document.write('</li><div class="recent-post-summ">');
if (post_summary == true) {
if (postcontent.length < summary_chars) {
document.write(postcontent);
}
else {
postcontent = postcontent.substring(0, summary_chars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + ' ' + readmorelink);
}
}
document.write('</div>');
if (posts_date == true) document.write('<div class="post-date">' + monthnames[parseInt(showmonth,10)] + ' ' + showday + ' ' + showyear + '</div>');
}
}

Cần thay là

<script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script>

Mẫu code:

 <div class="recentpoststyle"><script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script><script>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><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><style type="text/css">.recentpoststyle {counter-reset: countposts;list-style-type: none;}.recentpoststyle a {text-decoration: none; color: #49A8D1;}.recentpoststyle a:hover {color: #000;}.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}li.recent-post-title { padding: 5px 0px;}.recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}</style></div>

Style 3

Với đoạn script này các bạn có thể chèn theo link này hoặc bạn dán code trực tiếp thế cho src mà đưa vào trong <script style="text/javascript"> ....code..</script>

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>

Code cần thay là:

function showlatestpostswiththumbs(json) {
document.write('<ul class="recent-posts-container">');
for (var i = 0; i < posts_no; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var postsurl;
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 commentstext = entry.link[k].title;
var commentsurl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
postsurl = entry.link[k].href;
break;
}
}
var recenthumb;
try {
recenthumb = 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 != "")) {
recenthumb = d;
} else recenthumb = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMSa4jkcgcia98IpcGITa3Me1wbJ9lnuxgf1sBYGOe3RThcJn7k-mYf5xLZNcm0rTIFRkacDxjLpnhga4N3HKkfQyMQ6AKp9iMJ0ZsAE7NXqt0FpYMLK7cI6oFkrcgpx1XStlT_DHC8hWi/s1600/no-thumb.png';
}
var postdate = entry.published.$t;
var showyear = postdate.substring(0, 4);
var showmonth = postdate.substring(5, 7);
var showday = postdate.substring(8, 10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
document.write('<li class="recent-posts-list">');
if (showpoststhumbs == true)
document.write('<a href="' + postsurl + '"><img class="recent-post-thumb" src="' + recenthumb + '"/></a>');
document.write('<div class="recent-post-title"><a href="' + postsurl + '" target ="_top">' + posttitle + '</a></div>');
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 (post_summary == true) {
if (postcontent.length < summary_chars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, summary_chars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
}
}
var posts_details = '';
var flag = 0;
document.write('<br><div class="recent-posts-details">');
if (posts_date == true) {
posts_details = posts_details + monthnames[parseInt(showmonth, 10)] + ' ' + showday + ' ' + showyear;
flag = 1;
}
if (readmorelink == true) {
if (flag == 1) posts_details = posts_details + ' | ';
posts_details = posts_details + '<a href="' + postsurl + '" class="url" target ="_top">Read more</a>';
flag = 1;;
}
if (showcommentslink == true) {
if (flag == 1) {
posts_details = posts_details + ' <br> ';
}
if (commentstext == '1 Comments') commentstext = '1 Comment';
if (commentstext == '0 Comments') commentstext = 'No Comments';
commentstext = '<a href="' + commentsurl + '" target ="_top">' + commentstext + '</a>';
posts_details = posts_details + commentstext;
flag = 1;;
}
document.write(posts_details);
document.write('</div>');
document.write('</li>');
}
document.write('</ul>');
}

Code: 

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script><script style="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><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com" rel="nofollow">Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><style type="text/css">img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;}.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;}.recent-posts-container a { text-decoration:none; }.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}.recent-posts-details {margin: 5px 0px 0px 92px; }.recent-posts-details a{ color: #777;}</style>

Style 4: Tương tự

function showlatestpostswiththumbs(json) {
document.write('<ul class="recent-posts-container">');
for (var i = 0; i < posts_no; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var postsurl;
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 commentstext = entry.link[k].title;
var commentsurl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
postsurl = entry.link[k].href;
break;
}
}
var recenthumb;
try {
recenthumb = 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 != "")) {
recenthumb = d;
} else recenthumb = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMSa4jkcgcia98IpcGITa3Me1wbJ9lnuxgf1sBYGOe3RThcJn7k-mYf5xLZNcm0rTIFRkacDxjLpnhga4N3HKkfQyMQ6AKp9iMJ0ZsAE7NXqt0FpYMLK7cI6oFkrcgpx1XStlT_DHC8hWi/s1600/no-thumb.png';
}
var postdate = entry.published.$t;
var showyear = postdate.substring(0, 4);
var showmonth = postdate.substring(5, 7);
var showday = postdate.substring(8, 10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
document.write('<li class="recent-posts-list">');
if (posts_date == true) document.write('<div class="post-date">' + monthnames[parseInt(showmonth, 10)] + ' ' + showday + ' ' + showyear + '</div>');
if (showpoststhumbs == true)
document.write('<a href="' + postsurl + '"><img class="recent-post-thumb" src="' + recenthumb + '"/></a>');
document.write('<div class="recent-post-title"><a href="' + postsurl + '" target ="_top">' + posttitle + '</a></div>');
var posts_details = '';
var flag = 0;
document.write('<div class="recent-posts-details">');
if (showcommentslink == true) {
if (flag == 1) {
posts_details = posts_details + ' <br> ';
}
if (commentstext == '1 Comments') commentstext = '1 Comment';
if (commentstext == '0 Comments') commentstext = 'No Comments';
commentstext = '<a href="' + commentsurl + '" target ="_top">' + commentstext + '</a>';
posts_details = posts_details + commentstext;
flag = 1;;
}
if (readmorelink == true) {
if (flag == 1) posts_details = posts_details + ' | ';
posts_details = posts_details + '<a class="readmorelink" href="' + postsurl + '" class="url" target ="_top">Read more</a>';
flag = 1;;
}
document.write(posts_details);
document.write('</div>');
document.write('</li>');
}
document.write('</ul>');
}

Thay cho

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>

Code

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script><script style="text/javascript">var posts_no = 5;var showpoststhumbs = false;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><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com">Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><style type="text/css">img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}.recent-posts-container a { text-decoration:none; }.recent-posts-container a:hover{color: #4DACE3;}.post-date {color:#e0c0c6; font-size: 11px; }.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}.recent-post-title { margin: 5px 0px; }.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}.recent-posts-details a{ color: #888;}a.readmorelink {color: #4DACE3;}</style>

Style 5:

function showlatestpostswiththumbs(json) {
document.write('<ul class="recent-posts-container">');
for (var i = 0; i < posts_no; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var postsurl;
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 commentstext = entry.link[k].title;
var commentsurl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
postsurl = entry.link[k].href;
break;
}
}
var recenthumb;
try {
recenthumb = 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 != "")) {
recenthumb = d;
} else recenthumb = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMSa4jkcgcia98IpcGITa3Me1wbJ9lnuxgf1sBYGOe3RThcJn7k-mYf5xLZNcm0rTIFRkacDxjLpnhga4N3HKkfQyMQ6AKp9iMJ0ZsAE7NXqt0FpYMLK7cI6oFkrcgpx1XStlT_DHC8hWi/s1600/no-thumb.png';
}
var postdate = entry.published.$t;
var showyear = postdate.substring(0, 4);
var showmonth = postdate.substring(5, 7);
var showday = postdate.substring(8, 10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
document.write('<li class="recent-posts-list">');
if (posts_date == true) document.write('<div class="post-date">' + monthnames[parseInt(showmonth, 10)] + ' ' + showday + ' ' + showyear + '</div>');
if (showpoststhumbs == true)
document.write('<a href="' + postsurl + '"><img class="recent-post-thumb" src="' + recenthumb + '"/></a>');
document.write('<div class="recent-post-title"><a href="' + postsurl + '" target ="_top">' + posttitle + '</a></div>');
var posts_details = '';
var flag = 0;
document.write('<div class="recent-posts-details">');
if (showcommentslink == true) {
if (flag == 1) {
posts_details = posts_details + ' <br> ';
}
if (commentstext == '1 Comments') commentstext = '1 Comment';
if (commentstext == '0 Comments') commentstext = 'No Comments';
commentstext = '<a href="' + commentsurl + '" target ="_top">' + commentstext + '</a>';
posts_details = posts_details + commentstext;
flag = 1;;
}
if (readmorelink == true) {
if (flag == 1) posts_details = posts_details + ' | ';
posts_details = posts_details + '<a class="readmorelink" href="' + postsurl + '" class="url" target ="_top">Read more</a>';
flag = 1;;
}
document.write(posts_details);
document.write('</div>');
document.write('</li>');
}
document.write('</ul>');
}

Thay cho

<script style="text/javascript" src="https://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>

Code mẫu:

<script style="text/javascript" src="https://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="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" rel="nofollow"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-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.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style>

Nguồn: (code.freetuts.net)

Bạn đang đọc bài viết Một số cách hiển thị bài viết mới trong Blogspot Phần 2 tại Website: Học Lập Trình

• Tweet
• Share
• Share
• Share
• Share