Show Specific Label Posts In Blogger

Labels widget in blogger shows all the labels in your blog and once clicked on any label will show all the posts with that label. But apart from that you can also show some of the posts with specific label on your blog. Though there is no widget in blogger to achieve this but it's really easy to make a widget which will show only posts with particular label.

Features of this widget

Easy to install
Easy to customise
Shows thumbnail with posts
Labels oriented

Before we proceed you should add labels to your posts if you don't have any.

If you don't know how to do that just don't worry and click the below link

FAQ- Labels in Blogger

Note- Labels are case sensitive.

Steps to follow

Open blogger
Go to Layout' and click on 'Add a gadget'
Give any title like 'Hand picked for you'
Copy and paste this code directly in that gadget and click on save

<style>
/* Recent posts by labels widget by tutes inside*/
img.label_thumb{
float:left;
margin-right:10px !important;
height:72px; /* Thumbnail height */
width:72px; /* Thumbnail width */
border: 1px solid #fff;
-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 { text-align: justify;
font: normal 18px Port Lligat Slab;
float: left;
width: 98%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:75px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}
#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}
#label_with_thumbs a:visited {
text-decoration: none;
color: black;}
#label_with_thumbs a:link {
text-decoration: none;
color: black;}
#label_with_thumbs a { text-transform: none;}
#label_with_thumbs a:hover { text-decoration: underline;}
#label_with_thumbs strong {padding-left:0px; }</style>
<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/AVvXsEgxPUKOIa7NScbPFPMx98_aqvLRr_FM9LJFCG0jAuSloZAZlNYBg1GsUGNzMZCOoboPAnf8wiFLBnC_nj0m5JUqx7V5NAadtb6l6L0yApRQ2Sos7bBo9e3qXtItZaa_2caVB_ufPZrl8SM/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>
<script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 200;</script>
<script type="text/javascript" src="/feeds/posts/default/-/YOURLABELHERE?published&alt=json-in-script&callback=labelthumbs"></script>

Your widget is live on your blog and you can visit to check out.

Customise

To place your label name in widget change the text in blue with your own label name

/feeds/posts/default/-/YOURLABELHERE?

To change height and width of image in widget change the value in blue

height:72px;
width:72px;

To change the image that appears when there is no image in post change the image URL in blue with your image URL

thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxPUKOIa7NScbPFPMx98_aqvLRr_FM9LJFCG0jAuSloZAZlNYBg1GsUGNzMZCOoboPAnf8wiFLBnC_nj0m5JUqx7V5NAadtb6l6L0yApRQ2Sos7bBo9e3qXtItZaa_2caVB_ufPZrl8SM/s1600/picture_not_available.png';}

To change the number of posts that appears in widget change the value in blue