Show Recent Posts With Thumbnails For Particular Label Or Category In Blogger

Mostly peoples now add resent post widget in blogger , but now a day you can in many sites many resent post widgets for add for many label or category in blogger . If you also want to add this type of widget then you can do it very easily with some simple steps , in this tricks i am tell you about add resent post with thumbnails for particular label or category in blogger .

With this tricks you can add different labels resent post with thumbnail widget in You blog easily ...

Show Recent Posts With Thumbnails For Particular Label Or Category In Blogger

1. Go to Blogger > Template > Edit html .
2. Now Find ( Ctrl+F ) </head> , and Paste this code before it .

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="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'&&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)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoN43Oh1R58MnH8UriCGcAoRNTt1TpjKtt9zwwphdyzdXqsUmBYthubX4v-JaO9oxNXC3mk5Uue42f8pJyrJ_7zJtMsGt8DI-wh9seqcOQmbqHioLbcn6sBX56od38EIEFth9ZGX6jmQE/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><br>');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('<br>');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>

3. Now Go to Blogger > Layout > Add Gadget .
4. Now choose HTML/Javascript widget . and Paste this code in it .

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Name_of_label?published&alt=json-in-script&callback=labelthumbs"></script>

 Name_of_label : change this with your label name . like :

<script type="text/javascript" src="/feeds/posts/default/-/template?published&alt=json-in-script&callback=labelthumbs"></script>

• numposts = 3 :- change this number how many post you want .
• showpostthumbnails = true :- if you don't want thumbnail image then change it to ' false ' .
• showpostsummary = true :- if you don't want to add summary then change it to ' false ' .
• displaymore = false :- if you want to add read more link with post change it to ' ture ' .
• showcommentnum = false :- if you want to show number of comment in post change it to ' true ' .
• numchars = 100 :- change number of post characters . 
• showpostdate = false :- if you want to add posts date change it to ' true ' .

Enjoy Blogging :)
If you like this post or any other please share with your friends on facebook , google+ , Twitter .

 If you have any problem feel free and write your problems in Comment !!