How to Add Recent Post Widget in Blogger

How to Add Recent Post Widget in Blogger

In  this article I will explain you how to add recent post widget in blogger(blogspot). Recent post widget is most important and essential widget for blogger because by adding this features user or reader can easily see and read the latest posts.
First question arise in our mind to every blogger, what is recent post widget in blogger and second why we use recent post widget in blogger. So I will explain one by one

What is Recent Post Widget?

A recent post widget show your latest posts , for reader purpose also i want to show latest post always display on top of the page, so newest post display at top position. Other way we can say that it is a collection of all published posts in descending order that appears on web page.

Why we Use Recent Post Widget?

Recent post widget have feature to display latest post in descending order, for reader purpose. I want to show my latest post see first on the list. Recent post widget have followings features that really look nicely to blogger and for reader. It simply copy and paste required code inside the HTML/Javascript Gadget.

Recent Post Widget Features
  • Post/Article Title
  • Images
  • Post/Article Summary
  • Author/Owner Name
  • Label/Category Name
  • Comments
  • Read more/Read continue Link
  • Publish Date
  • Publish Date/Time

Mostly these features are used every blogger(blogspot) to blog

Add Recent Post Widget

Follow these steps to add recent posts widget to blog(blogsopt)

Step 1.   Login into blogger( go to www.blogger.com) with correct email and password after login

Step 2.   Select the blog if you have more than one blog its your dashboard of particular blog screen shown below


Add Recent Post Widget in Blogger




Step 3.   Click Template(left side menu bar) its open new windows screen shown below


Add Recent Post Widget in Blogger




Step 4.   Click Banckup/Restore button(see right side)  its open popup  then click Download Template after downloaded click Close button, screen shown below


Add Recent Post Widget in Blogger




Step 4 is optional but for own security purpose, before any changes in template or content the best way to take backup the template and contents

Step 5.   Click Edit HTML button and paste code before </head> tag code shown below

<script type='text/javascript'>
//<![CDATA[

function rp(json){
document.write('<ul>');
for(var i=0;i<numposts;i++){
document.write('<li>');
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="(more)";
readmorelink=readmorelink.link(posturl);
var postdate=entry.published.$t;
var cdyear=postdate.substring(0,4);
var cdmonth=postdate.substring(5,7);
var cdday=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(posttitle);
if(showpostdate==true)document.write(' - '+monthnames[parseInt(cdmonth,10)]+' '+cdday);
if(showpostsummary==true){
if(postcontent.length<numchars{
document.write(postcontent)
}else{postcontent=postcontent.substring(0,numchars);
var quoteEnd=postcontent.lastIndexOf(" ");
postcontent=postcontent.substring(0,quoteEnd);
document.write(postcontent+'...'+readmorelink)
}}
document.write('</li>')}document.write('</ul>')}

//]]>
</script>

Step 6.   Click Layout (left side menu bar, it is place where you want to display the recent post widget). You can placed any position but most blogger or best place to add this widget at sidebar (sidebar may be left or right side its depends upon which type of template layout you have.

Step 7.   Click Add a Gadget (see sidebar right) its open popup just scroll down and choose HTML/JavaScript Gadget (just click + sign) screen shown below


Add Recent Post Widget in Blogger




When you click Html/JavaScript Gadget a popup open, here give the title name whatever you want (for example Recent Post) and paste code inside the content box, code shown below


<script type='text/javascript'>
var numposts = 5;
var showpostdate=true;
var showpostsummary = true;
var numchars = 100;</script>
<script src="http://helpbloggerblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>


Here var numposts = 5 shows how many recent post to display. you can change number of post whatever you want to display.


Also Var numchars = 100; shows how many characters to display. You can change number of character.

Note:-Must change own blog URL (in above code contanis blog url like,  http://helpbloggerblog.blogspot.com)

then click Save button, screen shown below


Add Recent Post Widget in Blogger




Step 8.   Click Save arrangement button(see right side) and then click View Blog button(see top left side) screen shown below


Add Recent Post Widget in Blogger




After view blog button recent post will display look like, screen shown below


Add Recent Post Widget in Blogger







                         I hope, it helped you to understand, how to add recent post widget in blogger(blogspot)......Thanks



About MSK TUTORIAL

Hi...I am Md Sahjad Karim and I am Engineering Graduate (B.E in Computer Science and Engineering) working as a Web Developer and write Blog Articles. http://www.msktutorial.com/ was launched on july 2016 to provide free online hints, tips, guides and tutorials related to technology(PHP, CodeIgniter, WordPress, Blogger etc). My primary goal is to provide the good, quality and easily to understand the articles to readers around the world.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

Thanks For Visiting Blog...