Show Particular Post By Label On Blogger (Blogspot)

0 3 minutes read

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;

Apply Now: Add Visitor Tracking Widgets On Blog Or Website [Working Perfectly]

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:

https://www.memonaija.com/search/label/News

(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.

<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='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/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>

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

Apply Now: Add Recent Post Widget With Thumbnail On Blogspot (Working Perfectly)

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

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!

Apply Now: How To Add Poll Widget To Blogspot [Easy Guide]

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.