Today I will be sharing with you how to add blogger recent post widget with home, next and previous option. And adding this widget is just an easy one step method and your blogger blog will be looking elegant.

I decided to share this great tool with you so as to enable you to expose a wide range of your blogger contents to your readers without filling up your blog with a lot of widgets. And also the widget performs well in terms of traffic and SEO, as it enables your readers to read a wide range of post they see on the sidebar.

The beauty of adding this widget is that it is extremely easy and straight forward. I mean it is beautiful. The plugin shows the following features.

Features Of Blogger Recent Post Widget

  • Post-Thumbnail Image
  • Post Title snippet
  • Summary (If enabled). 
Normally recent post widget offers only the above-listed options. But this new blogger recent post widget features more advanced features.

Advanced Recent Post Features

  • A home button located at the bottom
  • Next page button which opens up another set of posts
  • Previous page button which takes you back to the already open post.
Now with the above features, you definitely need to include this widget on your blog.

Recommended: 5 Reasons Why Copy Bloggers Never Get Paid

How to Add Blogger Recent Post Widget With Home, Next, And Previous Option

Adding this widget is very easy as long as you understand HTML and JavaScript. But if you don't, be sure to get a safe guide.

Log in to your blogger blog, and head straight to the Layout tab in your vertical menu. Now clink on add new gadget (Wherever you want this plugin to be shown). Find the HTML/JavaScript and clink on the + button.


<style scoped='' type='text/css'>
/* Recent Post Navigasi */
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
.recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}
.recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111}
.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url( 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}
#recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:5px 10px}
#recentpostnavfeed .next{float:right}
#recentpostnavfeed .previous{float:left}
#recentpostnavfeed .home{text-align:center}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}
<script type='text/javascript'>
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "";
    var charac = 40;
    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 showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<;l++)"previous"[l].rel&&([l].href),"next"[l].rel&&([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<;l++)if("alternate"[l].rel){[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?$thumbnail.url:"",s+="<div class='recentpostel'>",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("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("recentpostnavfeed").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=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").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)};
<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>
Copy the above code and paste it into the HTML/JavaScript box, Once done, make a few customization as shown below.

Recent Post Widget Customization

  1. Change to your homepage URL.
  2. You can also customize the number of posts to be shown perpage by simply change the " var numfeed = 5;" to any preferred number.
  3. The last thing to change is the number of characters to be shown as the title and summary. Here you can change the value " var charac = 40;".

Rounding Up

Blogger is a home of customizations, and if you have any idea of what you doing, then you can create amazing widgets for yourself.


  • 0
  • Share
  • You must be loggedin to comment