How To Show Specific Posts By Labels Widget/Gadget In Blogger Blog

After creating an account in blogger and choosing a self-centered oriented niche, confidence and willpower is portrayed as the start of a profitable blog and identifying hurdles likely to shook your blogging enthusiasm. There's room to add custom layouts like showing specific posts by labels in blogger blog hence blogging using blogger platforms is very easy unlike other CMS. The cheapness of blogging using free Blogspot extension does not give sufficient customization thus newbies decide to have a self-hosted blog.

Step By Step Guide On How To Show Specific Posts By Labels In Blogger Blog

Apart from my step by step guide being a complete tutorial, it guarantees 100% trust and it works perfectly. We are going to participate practically and have our blog/website showing specific posts by labels in blogger.

Step 1 Copy The Code Below 

We have provided the code which will perform the assigned task.

Get The Copy

<style>
/* Recent posts by labels widget by BenArdent*/
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/AVvXsEiSFMsGiKh7duEjTKZ97hjBAsrid1kUidIdTaET61O_UGlciH0YoFoHsMKGqnXckFzmoyjQ7rwDjbr66ueVoQhEUKcAhYMWExtpLZSYUh4kn0wpByI1qwbJ0v7rWq-jIIr8nXk_wC1-DdQ/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/-/YOUR LABEL HERE?published&alt=json-in-script&callback=labelthumbs"></script>

Step 2 Sign In Blogger Account 

Go to your blogger sign in section and provide the correct logging in credentials to let you in.

Step 3 Go To Layout

After signing in your blogger account, Scroll down and select layout at the dashboard section

Step 4 Add A Gadget

Let's be keen here! Before we select or add a gadget, we have to choose where our preferred labels must appear. A blog always has four well-known sections, for example, content bar, sidebars, header, and footer bar.

Step 5 Click HTML/JavaScript

Although we are limited to accessing many blogger gadgets, the HTML/JavaScript gives access to as many add-ons without clutter.

Step 6 Paste The Code

Name your label as it appear on your Label lists then paste the code

Step 7 Click on Save 

A Complete Set-Up On How To Show Specific Labels In Blogger Layout

To make a complete set up on how to show labels in blogger layout, we sometimes find needless to stick to default set-up thus a prerequisite for configuration.

The red-colored elements are what you are going to edit. Continue reading for more information.

height:72px; /* Thumbnail height */
width:72px; /* Thumbnail width */

The size of your images(Thumbnails) attached to your relevant posts appears exactly on the homepage. However, this image is just an insight that brings more meaning to whatever you flaunt on your post. The size of these images is set to default hence for comfortability and the flexibility on the size of appearance allows you to edit.

The height is just the normal height you came across in mathematics but width is the extension of the pic perpendicular to height.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSFMsGiKh7duEjTKZ97hjBAsrid1kUidIdTaET61O_UGlciH0YoFoHsMKGqnXckFzmoyjQ7rwDjbr66ueVoQhEUKcAhYMWExtpLZSYUh4kn0wpByI1qwbJ0v7rWq-jIIr8nXk_wC1-DdQ/s1600/picture_not_available.png

This picture is a very good example when your article has no image therefore, this simple image appears like this one. You can create a no-image png with a full step by step guide but in the meantime, you can use the one on I have provided on my blog.

var numposts = 5

This is quite self-explanatory. Therefore, it instructs our code to show 5 labeled posts but you can choose the number of your posts by the label to any desired numeric.

YOURLABELHERE

This is the first step you would consider when you setting up at the very first phase. We have just decided to follow the order of appearance as not to confuse you. Your label is also your category