How To Add Recent Post Widget With or Without Thumbnails in blogger?

Adding recent post widget with Thumbnails or without Thumbnails or with style into your blogger blog can be helpful for you in different ways.

By adding this widget into your blogger blog you can get a lot of benefits. If you are thinking it is not necessary to add related posts to your blogger blog, then you are wrong. By displaying related posts in your blogger blog you can easily keep your readers engaged with your blogger blog, also it helps them to easily navigate with your blogger related posts links those you have recently written. 

If your blogger blog homepage has a lot of labeled grids or its posts published as the label or category wise then readers cannot identify what are your recent posts, so if you add that recent post widget into your blogger blog it will help your readers to identify your recent post among the other posts in your homepage. So your readers can find what’s new on your blog.

recent post widget html code screen
Adding recent post widget to blogger

Recent post widget is the very useful widget for our blog like breaking news bar, related, Breadcrumbs navigation and back to top button widgets those we discuss in previous posts.

What are the recent posts?

Recent posts are latest or recent published posts those related to your current reading posts. It displays base on the latest date of the post published in your blogger blog. latest posts are in the top and old post going to down or below the latest posts. So readers can easily find your recent posts quickly among the previous articles in your blogger blog.  

That recent post widget helps you to display your latest posts on your blogger slide bar or footer. There is a different type of recent post widgets. Some will display only post titles, some will display recent post title with image thumbnails or some will display recent post title with image thumbnails with post summary, publish date and amount of post comments.

Below are some benefits of adding recent post widget to your blogger. 

  • Improve blog site performances
  • Improve blog traffic
  • Improve internal links
  • Decrease your blog bounce rate
  • Improve your page views
  • Improve user interaction
  • Improve user experience and improve blogger SEO
  • Readers can quickly identify your latest posts

How to add recent post widget to your blogger?

You can add recent post widget with Thumbnails or without Thumbnails or with stylish.

How to add recent post widget with Thumbnails to blogger?

Step 01: Sign in to your blogger blog

Step 02: Go to Dashboard >> Layout >> Add a widget >> HTML/JavaScript widget

Step 03: Copy and Paste below code into the widget

    <style type='text/css'>

    img.recent_thumb {padding:1px;width:55px;height:55px;border:0;

    float:left;margin:10px;}

    .recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}

    ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}

    .recent_posts_with_thumbs a {text-decoration:none;}

    .recent_posts_with_thumbs strong {font-size:10px;}</style>

    <script style='text/javascript' src='http://recent-post-techkgp.googlecode.com/files/recent%20post_www.techkgp.com.js'></script>

    <script style='text/javascript'>

    var numposts = 5;

    var showpostthumbnails = true;

    var displaymore = false;

    var displayseparator = true;

    var showcommentnum = false;

    var showpostdate = false;

    var showpostsummary = true;

    var numchars = 100;</script>

    <script src='http://www.yourdomain.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Customize – Replace http://www.yourdomain.com with your blogger URL.

  •   Replace value var numposts = 2 with the number of maximum posts that you want to display.
  •   Replace value var numchars = 100 with any number of characters that you want to show in summary of recent posts.
  •  By changing true or false you can customize activate or deactivate of any feature of your recent post widget.

Step 04: Save your widget and replace where you want to display your recent post widget.

Step 05: Save the layout.

Now process to view your recent post widget.

How to add recent post widget without Thumbnails in blogger?

Step 01: Sign in to your blogger blog

Step 02: Go to Dashboard >> Layout >> Add a widget >> HTML/JavaScript widget

Step 03: Copy and Paste below code into the widget

Customize – Replace http://www.yourdomain.com with your blogger URL.

                           Replace 2 with the number of maximum posts that you want to display.

Step 04: Save your widget and replace where you want to display your recent post widget.

Step 05: Save the layout.

    <script type=”text/javascript”>

    function recentpostslist(json) {

     document.write(‘<ol>’);

     for (var i = 0; i < json.feed.entry.length; i++)

     {

        for (var j = 0; j < json.feed.entry[i].link.length; j++) {

          if (json.feed.entry[i].link[j].rel == ‘alternate’) {

            break;

          }

        }

    var entryUrl = “‘” + json.feed.entry[i].link[j].href + “‘”;//bs

    var entryTitle = json.feed.entry[i].title.$t;

    var item = “<li>” + “<a href=”+ entryUrl + ‘” target=”_blank”>’ + entryTitle + “</a> </li>”;

     document.write(item);

     }

     document.write(‘</ol>’);

     }

    </script>

    <script src=”http://www.yourdomain.com/feeds/posts/default?max-results=2&alt=json-in-script&callback=recentpostslist”></script>

Now process to view your recent post widget.

How to add Gallery style recent post widget in blogger?

Step 01: Sign in to your blogger blog

Step 02: Go to Dashboard >> Layout >> Add a widget >> HTML/JavaScript widget

Step 03: Copy and Paste below code into the widget

    <style>

    .recent-grid {padding:0;clear:both;}

    .recent-grid:after {content:"";clear:both;display:table;}

    .recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;}

    .recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px}

    .recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}

    .recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1}

    .recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}

    .recent-grid a:hover img {border-color:#bbb;}

    </style>

    <script type='text/javascript'>

    //<![CDATA[

    // Recent Post Gallery

    function gallerygrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-grid">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+recentpost_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recentpost_thumbs+'" height="'+recentpost_thumbs+'"/>',p=recentpost_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="galleryview">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}

    //]]>

    </script>

    <script>

    var recentpost_thumbs = 8;

    var recentpost_title = true;

    </script>

    <script src="/feeds/posts/summary?max-results=9&alt=json-in-script&callback=gallerygrid"></script>

Customize – Replace value var recentpost_thumbs = 8; with the number of maximum posts that you want to display.

Step 04: Save your widget and replace where you want to display your widget.

Step 05: Save the layout.

Now process to view your recent post widget.

How to add simple stylish recent post widget in blogger?

Step 01: Sign in to your blogger blog

Step 02: Go to Dashboard >> Layout >> Add a widget >> HTML/JavaScript widget

Step 03: Copy and Paste below code into the widget

    <div class="recentpostarea">

    <style type="text/css">

    .recentpostarea {list-style-type: none;counter-reset: countposts;}

    .recentpostarea a {text-decoration: none; color: #49A8D1;}

    .recentpostarea a:hover {color: #000;}

    .recentpostarea li:before {background: #69B7E2;float: left;counter-increment: countposts;content: counter(countposts,decimal);z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff; padding: 0px 10px; margin: 15px 5px 0px -6px; border-radius: 100%;}

    li.r-p-title { padding: 5px 0px;}

    .r-p-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}

    .r-p-title a {text-decoration: none;color: #444;font-weight: bold;font-size: 13px; padding: 2px;}

    .recent-post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}

    .r-p-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>

    <script type = "text/JavaScript">

    function showrecentposts(json) {for (var i = 0; i < posts_number; 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="r-p-title">');document.write(posttitle);document.write('</li><div class="r-p-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="recent-post-date">' + monthnames[parseInt(showmonth,10)] + ' ' + showday + ' ' + showyear + '</div>'); }}

     </script>

     <script>

     var posts_number = 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=showrecentposts"></script>

     <noscript>Your browser does not support JavaScript!</noscript>

    </div>


*Customize – Replace value var posts_number = 5; with the number of maximum posts that you want to display.

Step 04: Save your widget and replace where you want to display your recent post widget.

Step 05: Save the layout.

Now process to view your recent post widget.

OK, now your blogger blog has a recent post widget with Thumbnails or without Thumbnails or with Gallery style or with Simple Stylish. As I mentioned above you can get a lot of advantages for your blogger blog. With the above codes, you can customize your recent post widget as you prefer. 

I hope the above methods help you to add recent post widget with Thumbnails or without Thumbnails or stylish widget into your blogger blog. And if you have any problem or know more fixes on this recent post widget with Thumbnails or without Thumbnails or stylish widget for to your blogger blog, Please share with us in the comments section below. Happy Blogging!

Follow me

Keshan Liyanagamage

Blogger at Takitakibiz
Hi! I'm Keshan Liyanagamage. A blogger.

Takitakibiz.com is created to provide free guides and tips to help online Entrepreneurs in enhancing and simplifying their Online/Offline Business, Blogging, and SEO knowledge. Takitakibiz was founded in Feb. 2018

I believe that knowledge should be free. So please, gain more knowledge through TakitakiBiz to Become Your Own Boss.
Keshan Liyanagamage
Follow me
Share This & Spread the Knowledge

Leave a Reply

Your email address will not be published. Required fields are marked *

two × 4 =