Make On Blog: Blogger Tutorial - Blogger Templates - Gadgets
Select Recent Post Widget For Bloggers That You Love - Make On Blog: A complete tutorial of how to install recent post widget in blogger, choose the widget that you like, you may install a simple recent post, recent post with thumbnail, or recent post by label widget.
Select Recent Post Widget For Bloggers That You Love

Select Recent Post Widget For Bloggers That You Love

Posted by on
Recent post widget is one of widget that is widely used by bloggers.

The function of this widget is to display a list of recent articles in our blog, but beside of it there’s also a recent post widget by label that simply displays a list of recent articles by a particular label.

The recent post by label widget is mostly used on blog that use magazine style template, even though it widget can also be used on the blog using a simple blogger template.

Well, on this occasion I will write some recent post widgets, as recent post widget with a thumbnail and a summary, a simple recent post, and recent post by label.

Before I write the widgets codes, I will write how to install the recent post widget, in case anyone needs it.
Recent Post Widget

How to Install Recent Post Widget In Blogger

This is the easiest way to install the recent post widget in blogger, the steps should be taken are:
  1. Sign in to your blogger dashboard
  2. Go to Layout page
  3. Click Add a Gadget
  4. Select gadget HTML / JavaScript
  5. Replace the recent post widget code on the Conten
  6. Save.
In addition, there’s also another way to install the recent post widget in blogger by editing blogger template that we use.

Here are some of recent post widget code that you can plug in the gadget contains HTML / JavaScript, please choose the code that you like

Simple Recent Post Widget

This is a simple recent post widget without thumbnail or summary, as well as open recent post by label.
DEMO


<script type="text/javascript">
function showrecentposts(json){for(var  i=0;i<numposts;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);if(standardstyling)document.write('<li>');document.write(posttitle)}if(standardstyling)document.write('</li>')}
</script><script type="text/javascript">
var numposts = 5;
var standardstyling = true;</script>
<script type="text/javascript"  src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>
Information:
  • Please replace number 5 on code var numposts=5; with the number of articles you want.

Recent Post Widget With Thumbnail + Summary

This is a recent post widget with thumbnail and summary that you can set according to taste, either just want to show post title + thumbnail, post title + summary, or want to show all of them.

But this widget does not show recent post by label
DEMO
Widget code:

<script  style="text/javascript">//<![CDATA[
function showlatestpostswiththumbs(t){document.write('<ul  class="recent-posts-container">');for(var  e=0;e<posts_no;e++){var  r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var  o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var  l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var  u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var  p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new  Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li  class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a  href="'+r+'"><img class="recent-post-thumb"  src="'+u+'"/></a>'),document.write('<div  class="recent-post-title"><a href="'+r+'" target  ="_top">'+i+"</a></div>"),"content"in  n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else  var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var  y=A.lastIndexOf("  ");A=A.substring(0,y),document.write(A+"...")}var  _="",$=0;document.write('<div  class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+"  "+v+"  "+f,$=1),1==readmorelink&&(1==$&&(_+=" |  "),_=_+'<a href="'+r+'" class="url" target  ="_top">Read  more</a>',$=1),1==showcommentslink&&(1==$&&(_+=""),"1  Comments"==l&&(l="1 Comment"),"0  Comments"==l&&(l="No Comments"),l='<a  href="'+m+'" target  ="_top">'+l+"</a>",_+=l,$=1),document.write(_),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;
var post_summary = true;
var summary_chars = 70;</script>
<script  src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script><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 20px 10px 0;  background: #fff; border: 1px solid #ddd;}
.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 {position:relative;padding:5px  7px;min-height:65px; list-style-type: none; margin-bottom: 5px;border:1px solid  #ddd}
ul.recent-posts-container {color:#555;counter-reset:  countposts;list-style-type: none;}
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-weght:bold; text-transform:  uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}
</style>
The widget setting:
  • var posts_no = 5; → Change number 5 to determine the amount of recent post displayed
  • var showpoststhumbs = true; →  Parameter to display thumbnail or not, change true to false if you do not want to show thumbnail
  • var readmorelink = true; → Parameters to display Read More or not
  • var showcommentslink = true; →  Parameter to display the number of comments or not
  • var posts_date = true; → Parameter to display the post date or not
  • var post_summary = true; →  Parameter to display summary or not
  • var summary_chars = 70 →  Parameter to specify the number of summaries.
To modify the appearance of the widget, edit css code that be between <style type="text/css"> and </style>

You may also move the CSS code and set it up before code </head> in the template that you use.

Recent Post Widget With Thumbnail And Navigation Next and Previous

If you want to install the latest articles list with thumbnail accompanied by navigation Next and Previous, then please use this widget.
DEMO
Widget code:

<script type='text/javascript'>//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://www.makeonblog.com/";
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<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[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<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in  t?t.content.$t:"summary"in  t?t.summary.$t:"",a="media$thumbnail"in  t?t.media$thumbnail.url:"http://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s1600/no-image.png",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)};
//]]></script>
<div id="recentpostsae"></div><div  id="recentpostnavfeed"></div>
<style type="text/css">
#recentpostnav{border:1px solid #585858;width:100%;margin:0  auto}
#recentpostsae{margin:0}
.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:hover{background-color:#fefefe}
.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(http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif)  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:hover{background-color:#fefefe}
#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}
</style>
Information :
  • var numfeed = 5; →  parameter to specify the number of articles displayed
  • var urlblog = "http://www.makeonblog.com/"; → Parameter for the blog address that will be shown the recent post list.
  • var charac = 40; → Number of summaries characters
  • <div id="recentpostsae"></div><div id="recentpostnavfeed"></div> → is the code that will call and show recent posts with thumbnails and navigation.
To modify the appearance of the widget please edit css code that is between code <style type="text/css"> and </style>

A Simple Widget of Recent Post by Label

This widget allows you to display a simple recent post by label, which will only display the post title only.
DEMO
Widget code:

<script type='text/javascript'>
function showrecentposts(t){for(var  e=0;numposts>e;e++){var  n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var  a=0;a<r.link.length;a++)if("alternate"==r.link[a].rel){n=r.link[a].href;break}i=i.link(n),standardstyling&&document.write("<li>"),document.write(i)}standardstyling&&document.write("</li>")}
var numposts = 5;
var standardstyling = true;
</script>
<div class='LatestPost'>
<script type='text/javascript'  src='/feeds/posts/default/-/blogger%20tutorial?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'></script></div>
<style type="text/css">
.LatestPost li{list-style:none;margin:0;padding:0.5em 0;border-bottom:1px  dashed;}
</style>
Info:
  • var numposts = 5; → parameter to specify the number of recent post displayed
  • /feeds/posts/default/-/blogger%20tutorial → Replace the words blogger%20tutorial with the article label name that you want to show.

Recent Post By Label Widget With Thumbnail

This is a widget that will display a list of recent articles by label we choose that are accompanied by thumbnail and summary.

This widget also has a setting that can be set as desired, for example if we want to display a list of recent articles with thumbnail without summaries.

So please set according to taste.
DEMO
Widget code:

<script  style="text/javascript">//<![CDATA[
function  labelthumbs(t){document.write('<ul  class="label_with_thumbs">');for(var e=0;e<numposts;e++){var  r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var  o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var  m=n.link[o].title,l=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var  u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg"}var  p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),w=p.substring(8,10),A=new  Array;if(A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li  class="clearfix">'),1==showpostthumbnails&&document.write('<a  href="'+r+'" target ="_top"><img  class="label_thumb"  src="'+u+'"/></a>'),document.write('<strong><a  href="'+r+'" target  ="_top">'+i+"</a></strong><br>"),"content"in  n)var v=n.content.$t;else if("summary"in n)var v=n.summary.$t;else  var v="";var  y=/<\S[^>]*>/g;if(v=v.replace(y,""),1==showpostsummary)if(v.length<numchars)document.write(""),document.write(v),document.write("");else{document.write(""),v=v.substring(0,numchars);var  k=v.lastIndexOf("  ");v=v.substring(0,k),document.write(v+"..."),document.write("")}var  _="",x=0;document.write("<br>"),1==showpostdate&&(_=_+A[parseInt(g,10)]+"-"+w+"  - "+f,x=1),1==showcommentnum&&(1==x&&(_+=" |  "),"1 Comments"==m&&(m="1 Comment"),"0  Comments"==m&&(m="No Comments"),m='<a  href="'+l+'" target  ="_top">'+m+"</a>",_+=m,x=1),1==displaymore&&(1==x&&(_+="  | "),_=_+'<a href="'+r+'" class="url" target  ="_top">More  »</a>',x=1),document.write(_),document.write("</li>"),1==displayseparator&&e!=numposts-1&&document.write("")}document.write("</ul>")}
//]]></script>
<div  class="rpplab"><script type='text/javascript'>
var numposts = 5;
var showpostthumbnails =  true;
var displaymore = false;
var displayseparator =  false;
var showcommentnum =  false;
var showpostdate = false;
var showpostsummary =  true;
var numchars =  50;</script>
<script  type="text/javascript" src="/feeds/posts/default/-/blogger%20tutorial?orderby=updated&alt=json-in-script&callback=labelthumbs"></script></div>
<style  type="text/css">
img.label_thumb{  float:left; padding:5px; border:1px solid #ddd;margin-right:10px; height:55px;  width:55px; }
img.label_thumb:hover{  background:#f7f6f6; }
.label_with_thumbs {  float: left; width: 100%; min-height: 70px; margin: 0px 10px 2px 0px; adding:  0; }
ul.label_with_thumbs{margin:0;}
ul.label_with_thumbs li  {color:#555;padding:5px 0; min-height:65px; margin-bottom:10px;list-style:none;border-bottom:1px  solid #ddd;}
.label_with_thumbs a  {color:#2aace3} .label_with_thumbs strong {}
</style>
Widget settings:
  • var numposts = 5; →  Change number 5 with the number of articles you want to display, for example become 7.
  • var showpostthumbnails = true; →  Change true to false if you do not want to display the thumbnail.
  • var displaymore = false; → Change false to true if you want to display the read more links.
  • var showcommentnum = false; → Change false to true if you want to show the number of comments on the post.
  • var showpostdate = false; → Change false to true if you want to show the date in the recent post.
  • var showpostsummary = true; → Change true to false if you do not want to show summary
  • var numchars = 50; →  Change number 50 with amount of characters that you want.
  • /feeds/posts/default/-/blogger%20tutorial →  Change blogger%20tutorial with the post label name that will be displayed. If the label name has space then replace the space with %20
To modify the widget appearance please edit css code that is between code <style type="text/css"> and </style>

Those are some recent post widget code to bloggers that I can include at this time.
How to install recent post in blogger that I wrote above is the easiest and simplest way.

If you get the way how to use the widget, then please separate the widget code and place each code at place which you like.

For example:

Css code is installed before the code </head> or before the code ]]></b:skin>

Script code before the code </head> or </body>
Share this:
Subcribe and get new posts directly in your mail
Your Privacy Is Important For Us
Load Comments