How To Add Recent Posts Thumbnail Widget From Selected Label

In Past We Discussed How to Add Latest/Random Posts Widget in Blogger. But if Your Website and Blogs Have Many Categories and You Can't Able to Add All Categories in Pages and Want to Give a Simple Way of Searching All Categories and Labels for Your Readers So You Must Want to Add Recent Posts Widget with Thumbnails Particular Label or Category.

This Widget is Like Recent Posts Widget in Blogger Widget Section.If You Add Recent Posts Widget All New Published Posts will Shows in Widget Area but If You Want to Show Only Selected Labels or Category Posts You Must Be Add Some Scripts in Your Blog Template.Lets Know How to Add How To Add Recent Posts Thumbnail Widget From Selected Label.

Recent Posts with Thumbnails Sorted by Labels:
Step 1. From your Blogger Dashboard, go to 'Template' and click the 'Edit HTML' button.

Step 2. Click anywhere inside the code area and search (CTRL + F) for this piece of code:

]]></b:skin>

Just above ]]></b:skin>, paste this CSS style:

 /* 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; }

Step 3. Now try to find this tag:

</head>

just above </head> add this script:

<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'&&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/AVvXsEgHuzbiqVRRHu68CXFw3_dBstYzxyHrOvB4Fuw6UGuAHuxB6KfJAiG_FJ95AoP9pEm2YtbCI_2si9-drr5FSauXv2s7cT_M-h527UdunjTZahTN-4or7XZOCOAZIibA49UzA3gyTpVT1JI/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;} elseif("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>

Note: to add your own pic for the posts with no thumbnail, replace the image url in blue with your own.

Update! For a better image resolution add this script above the </body>

<script type='text/javascript'>                    function changeThumbSize(id,size){ var blogGadget = document.getElementById(id); var replacement = blogGadget.innerHTML; blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c"); var thumbnails = blogGadget.getElementsByTagName("img");for(var i=0;i&lt;thumbnails.length;i++){  thumbnails[i].width = size;  thumbnails[i].height = size;  } }changeThumbSize("label_with_thumbs",210);               </script>

Now Save the template to finish with your changes.

So, what we have added, is the CSS to style the widget and the script to make it work. Now all we have to do is to add the widget's code to the blog sidebar in a HTML/JavaScript gadget:

Step 4. Go to Layout - click on Add a Gadget.

Step 5. From the pop-up window, choose the HTML/Javascript widget and paste this script inside the empty box:

<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-the-label?published&alt=json-in-script&callback=labelthumbs"></script>

Note: Where it says Name-of-the-label should be the name of the label that you want to display, and if your label is case sensitive, like in my example, then you should type it that way.

Within the last code, there are these parts which can be customized - change true with false or vice versa:

var numposts ← Number of posts to display var showpostthumbnails ← Show/hide thumbnails var displaymore ← Show or hide the read more link var displayseparator ← Show/hide separator var showcommentnum ← Show/hide the number of comments var showpostdate ← Show/hide the posts dates var showpostsummary ← Show or not the posts summaries var numchars ← Number of posts characters (here you have to change the 100 value)

Remember that the gadget displays the latest posts from a particular label... therefore, if you want to display the latest posts from other labels, repeat step 5 for each additional category that you want to add.