3 Best Recent Posts Widgets For Blogger With Thumbnails

December 20, 2015
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.




What are Recent Posts Widgets?

A Recent posts widget displays the recent posts published in your blog. It is very helpful in displaying recent posts. A good design will help you in getting more clicks on your posts and drive more traffic to your site. 

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&amp;alt=json-in-script&amp;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">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 No of posts to appear on widget("1-10"better)
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/AVvXsEifXF209P_OmlMwC7na-ku5jpjtmg7GwxbgekzzLuIAB7Fq-l_zcQ73aEZRGA-4TMzeMsA4pHi05YWIDSDuTuWXOqCJAHYOyAsZxlDkJ99Db4QXB_uNDWeCEfvme0YFc9DUjIHzdjhIj5qT/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">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 No of posts to appear on widget("1-10"better)
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/AVvXsEifXF209P_OmlMwC7na-ku5jpjtmg7GwxbgekzzLuIAB7Fq-l_zcQ73aEZRGA-4TMzeMsA4pHi05YWIDSDuTuWXOqCJAHYOyAsZxlDkJ99Db4QXB_uNDWeCEfvme0YFc9DUjIHzdjhIj5qT/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">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 No of posts to appear on widget("1-10"better)
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)


Please do not change anything that you are not aware of as it might lead to design issues. You can change the ones marked in red however you want. 



By:
Bhanu Namikaze

Bhanu Namikaze is an Ethical Hacker, Security Analyst, Blogger, Web Developer and a Mechanical Engineer. He Enjoys writing articles, Blogging, Debugging Errors and Capture the Flags. Enjoy Learning; There is Nothing Like Absolute Defeat - Try and try until you Succeed.

1 comment:

John M said...

I use your "Recent Posts Widgets" number 2. I love it. Thanks.

July 26, 2021 at 5:19 AM

Post a Comment