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.


Show Specific Label Posts In Blogger


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


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

var numposts = 5;



I like blogging as much as I like coding and designing though not more than traveling.
If I'm not here publishing stuff then you will find me researching about SEO and marketing.
Love to meet new people and try to help every person.
Find me interesting or have any issue?
Shoot a message and I'll be with you.

12 comments:

  1. Only 25 posts can be fetched with this script, is there any thing need to be changed to get all the posts with specific label ?

    ReplyDelete
  2. Only 25 posts can be fetched with this script, is there any thing need to be changed to get all the posts with specific label ?

    http://www.hitmalayalamsong.com/p/sujatha.html#

    ReplyDelete
  3. This is what I've been looking for almost 2 hours. Thanks man.

    ReplyDelete
  4. But if you change visitor settings to "authors only" this code will not work. I changed visitors to "public" and now it's working. Thank you. God bless your hustle.

    ReplyDelete
  5. Thanks Tute Inside. I have it now on my blog (memonaija.com)

    ReplyDelete
  6. Awesome post and it looks good/does what I want, except I only want to display it on the label page for that particular label.

    I tried putting this in front:


    And this at the bottom:


    It still wants to show up on every page.

    ReplyDelete
  7. Thank you so much !!!!!!!!! 2019 ~~

    ReplyDelete

Don't forget to check 'Notify me' box to get notification of reply.