Add recent posts widget with thumbnails for Blogger

Recent posts widget is an important widget for a site. It helps the visitors to find your latest post.Add recent posts widget with thumbnails for Blogger As the newer post s, they should crawl and index by the search engine to hit your site. So, like popular post widget , recent post widget has the same importance for the site. Here, we are going to meet you with a excellent recent post widget with thumbnail . It is easy to add this blogger widget to your site. The appearance and design are awesome. You can please with this Recent posts widget for it’s speedy loading. It is fast and has no additional script which will decrease your page loading time. You can also use it as Label or category post widget in your blogger site.

Add recent posts widget with thumbnails in blogger

1) At first backup your blogger template and login your Blogger dashboard (If you have logout from here). Now go the layout option.
2) Click on ‘Add a gadget’ and find ‘ HTML / Java script’ gadget.
Recent posts widget with thumbnails for Blogger
3) When the new window will be opened with a box, just copy paste the bellow code there. And save the widget.

<script type=”text/javascript”>// <![CDATA[
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=”/feeds/posts/default?published&amp;alt=json-in-script&amp;callback=labelthumbs” type=”text/javascript”></script>

4) Now, return back in home page again. Go ‘Template’ option.

5) Firstly Backup the blogger template for creating any unwanted problems.

6) Select ‘Edit’ and click on it. A new window will be opened with the Template code. Find </head> [ To find it press Ctrl+F and search </head>]

7) Now copy the bellow codes and paste above </head>.

 

<!–Recent Posts with thumbnails Scripts and Styles start–><script type=”text/javascript”>// <![CDATA[
function labelthumbs(json){document.write(‘

<ul id=”label_with_thumbs”>’);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==’replies’&#038;&#038;entry.link[k].type==’text/html’){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel==’alternate’){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=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)&#038;&#038;(b!=-1)&#038;&#038;(c!=-1)&#038;&#038;(d!=””)){thumburl=d;}else thumburl=’http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png’;}
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]=”June”;monthnames[7]=”July”;monthnames[8]=”Aug”;monthnames[9]=”Sept”;monthnames[10]=”Oct”;monthnames[11]=”Nov”;monthnames[12]=”Dec”;document.write(‘

<li class=”clearfix”>’);if(showpostthumbnails==true)
document.write(‘<a href=”‘+posturl+'” target =”_top”><img class=”label_thumb” src=”‘+thumburl+'”/></a>’);document.write(‘<strong><a href=”‘+posturl+'” target =”_top”>’+posttitle+'</a></strong>
‘);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(showpostsummary==true){if(postcontent.length<numchars){document.write(”);document.write(postcontent);document.write(”);}
else{document.write(”);postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(” “);postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+’…’);document.write(”);}}
var towrite=”;var flag=0;document.write(‘
‘);if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+’-‘+cdday+’ – ‘+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+’ | ‘;}
if(commenttext==’1 Comments’)commenttext=’1 Comment’;if(commenttext==’0 Comments’)commenttext=’No Comments’;commenttext='<a href=”‘+commenturl+'” target =”_top”>’+commenttext+'</a>’;towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+’ | ‘;towrite=towrite+'<a href=”‘+posturl+'” class=”url” target =”_top”>More »</a>’;flag=1;;}
document.write(towrite);document.write(‘</li>
‘);if(displayseparator==true)
if(i!=(numposts-1))
document.write(”);}document.write(‘</ul>
‘);}
// ]]></script>
<!–Recent Posts with thumbnails Scripts and Styles end–>

 

7) Add CSS code now. Copy bellow CSS code and paste it before ]]></b:skin>

/* Recent posts by labels
——————————— */
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

#label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}

#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}

#label_with_thumbs a { text-transform: uppercase;}
#label_with_thumbs strong {padding-left:0px; }

8) Now save the template and You are done.

You can also use this Recent posts widget as Category posts widgets in your site. This widget is only applicable for Goggle blogger or blogspot site. Now add this excellent Recent posts widget with thumbnail in your blog and help the visitors to find your recent posts.