Show Particular Post By Label On Blogger (Blogspot)

I was thinking about widget to use on my Blogspot blog so that i can show post by label, so I made a little research. In this article, you will know how to show particular post by label on blogger (Blogspot).

Why show particular post by label on Blogger?

If you are a blogger who blogs on many areas such as news, gist, sport, health and so on, you may want to show the post categories on your sidebars. With this, your blog layout will be more clear and you will be able to retain your visitors the more, especially if your blogger template do not have a natural way of showing posts by labels on sidebars.

If, for example, am not interested in News, i can go on to read articles on sport.

What to do before you can show particular post by label on blogger

On blogger or Blogspot, we use label. But on WordPress, we use categories. And when writing your articles on blogger, there is a place for labels. What you must do is;

1). Use a particular label for a post category. That is, if your article is on Sport News, use Sport News as the label. And it must be continuous like that till eternity.

REMEMBER: It is case sensitive. Sport News is different from sport news. DO NOT FORGET!

2). Another thing is url or linking to posts on your blogger label. To link to a particular post label on blogspot, use this sample:

(remember to change my blog name and the label). 

3). Also, when your a particular label is more than one words, use %20 to separate them. Example; For Foreign News use; Foreign%20News

Widget to show particular post by label on Blogger (Blogspot)

This widget code am about to share with you will help you in adding and showing specific post by label on blogger. Before implementing it, do not forget step three above.


To show particular post by label on your blogger sidebar,

1). copy the code below.

/* Recent posts by labels widget by tutes inside*/
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;
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'>
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<;k++){if([k].rel=='replies'&&[k].type=='text/html'){var[k].title;var[k].href;}
if([k].rel=='alternate'){[k].href;break;}}var thumburl;try{$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='';}
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;}
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(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(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
<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>

2). Log in to your blogger blog and go to your layout

show particular post by label on blogger

3). Click Add Gadget and select HTML/JAVASCRIPT from the popup options.

show particular post by label on blogger

4). Give the widget a title, and paste the code above.

Before you save it, change:

  • Post thumbnail in line 5 and 6 to whatever you want. height:72px; width:72px;
  • Replace YOURLABELHERE in line 63 with the particular label you want. See, <script type=”text/javascript” src=”/feeds/posts/default/-/YOURLABELHERE?

(Remember to separate labels that are more than one words with %20 as i discussed above).

  • To remove post summary/excerpt, change true to false in line 62. See, var showpostsummary = true;var numchars = 200;

And then, remember to save! 

Wrapping up how to show particular post by label on blogger

That is simply how to add specific post by label on your blogspot sidebar. You do not have to worry anymore if your blogger template do not have a default settings.

Were you able to add post by label widget on your blogger blog? Share your blog address in the comment and let me see. See you in next article.


Find a domain starting at $0.88

powered by Namecheap

Updated: May 1, 2019 — 6:53 pm

The Author


Hi there. I am Obembe Sunday Dapo (aka SirPhren). A RN, Web and Blog Designer, Blogger and Writer from Nigeria. I am also a graduate of American Internet Business School. I design blogs & website for businesses at affordable rates. Learn More About me here and connect with me on social media.


Add a Comment
  1. Nice one

    1. Am glad you found “How To Show Particular Post By Label On Blogger” useful.

      Thanks for checking in. Hope to see you again.

  2. Hi, Sirphren!

    That was a nice post, it would be so good if you share the detailed post to understand better for everyone.

    I have posted on SEO tips which are

    Keep posting.

    1. Hello Fasheer!

      Am glad you found “How to show particular post by label on Blogger” useful. About the details, i have explained it in simplest of term for a complete newbie to understand.

      Thanks for checking in. Hope to see you often.:)

  3. Thank you. I saved the article to bookmark for research.
    However, I’m having trouble, and want to develop this CODE. The problem is as follows:
    At the initial 250 character description, I have inserted a link to the text. But when displaying posts by label, there is no link that allows clicking. Problem set: How to display links (allow click) in the list of posts by label?

    1. Hello Bao,

      If you can examine the code slowly and carefully, there is a section to include read more. That is if you want it.

  4. I edited it many times, and added a lot about “Var” in this code:
    script type=’text/javascript’

    Can you tell me more about how to add a CODE?
    Thank you!

    1. You are probably doing something wrong. I have screenshot the part of the code for more understanding. See it here: At the second line, var displaymore=false; Change the false to true

      If you still find it difficult, use the WhatsApp or Facebook button to chat me up.

  5. Hello. I have received your feedback in the comment section. Thank you!
    I mean the first paragraph of the text, it must allow the click to take effect.
    And you will probably understand the problem right away:

    Hope you help me! I will help you with some things, if you ask.

Leave a Reply

Your email address will not be published. Required fields are marked *