Today I present you with 3 best Recent posts widgets for blogger which increases your site performance and Bounce rate. There are too many benefits of using these recent post widgets, suppose a visitor is reading a particular post on your site and wanted to see your earlier or new or recent posts this will help. Here are the 3 best looking and best performing recent post widgets.
1) Recent Posts Widgets For Blogger With Thumbnails - I
How To Add Recent Posts Widgets For Blogger With Thumbnails
1. Login To Your Blogger Account
2. Open Blog in which Recent Posts Widgets With Thumbnails to be added
3. Go to layout
4. Click on “Add a Gadget”
5. Select HTML/JavaScript
6. Paste the given code there and click Save
1) Recent Posts Widgets For Blogger With Thumbnails - I
<div class="recentpoststyle">
<script type = "text/JavaScript">
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>');
}
}
</script>
<script>
var posts_no =9;
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><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.hackingdream.net/2015/12/recent-post-widgets-for-blogger-with-thumbnails.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>
To change the appearance of date on widget(true or false)
To change the appearance of post summary(true or false)
To change the Characters on sumamry(80-150 better)
2) Recent Posts Widgets For Blogger With Thumbnails - II
<script style="text/javascript" >
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/AVvXsEiHrjXNZY5fooBupS-oXS6L6GkAQb4K1prQtDoWWoAzACBjGW-ANm3qL6gcWa67LFpOF3tnP3VSPfiIP_tKzuR1ZhhTvy04pEKRi1WOz3Q3QzCRPO_dfgUVjAEHloA91RvprrFRjRwz4Ek6/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>');
} </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://www.hackingdream.net/2015/12/recent-post-widgets-for-blogger-with-thumbnails.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>
To change the appearance of Thumbnails(true or false)
To change the appearance of Readmorelink(true or false)
To change the appearance of Date(true or false)
To change the appearance of post summary(true or false)
To change the Characters on sumamry(80-150 better)
3) Recent Posts Widgets For Blogger With Thumbnails - III
<script style="text/javascript" >
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/AVvXsEiHrjXNZY5fooBupS-oXS6L6GkAQb4K1prQtDoWWoAzACBjGW-ANm3qL6gcWa67LFpOF3tnP3VSPfiIP_tKzuR1ZhhTvy04pEKRi1WOz3Q3QzCRPO_dfgUVjAEHloA91RvprrFRjRwz4Ek6/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>');
} </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://www.hackingdream.net/2015/12/recent-post-widgets-for-blogger-with-thumbnails.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 {position:relative;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>
To change the appearance of Thumbnails(true or false)
To change the appearance of Readmorelink(true or false)
To change the appearance of CommentsLink(true or false)
To change the appearance of Date(true or false)
In this you can change only objects that “Marked with Red”. Do not disturb any of the code other than it unless you are an expert.
=============== Hacking Don't Need Agreements ===============
Just Remember One Thing You Don't Need To Seek Anyone's Permission To Hack Anything Or Anyone As Long As It Is Ethical, This Is The Main Principle Of Hacking Dream
Thank You for Reading My Post, I Hope It Will Be Useful For You
I Will Be Very Happy To Help You So For Queries or Any Problem Comment Below or You Can Send me a Mail at Bhanu@hackingdream.net
![Cusrom Colt Os [Pie] For Xiaomi Redmi Note 3 (Kenzo)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEistfBvf2xoVjMK7pzme2-Qe7XnX5UsR55Y4NJkRRSG5sW7RrvAEbS2BcrWHUpbr1Z_IEX22vtRbU8B1Hl0xwOJPx6ivxHA3Tf8J1PZdbe6xolp0jCJm-kbDFJBTpoBuu80zx2aq4aCbO2z/s320/Colt+Os.png)