Blogger.com is a wonderful platform that offers bloggers to continue their career blogging journey with several amazing features including free domain and free hosting service. Although it is easy, light, and free, it has some certain limitations that limits people from non-coding background to showcase their blogging style as they desire. But we are here to help them make their Blog look beautiful, better and easy to customize.
How To Show Specific Posts From Specific Label on Blogger Home Page, Sidebar, Footer, etc. Using HTML & JavaScript
In this article we are devoted to our readers for providing some simple HTML & JavaScript codes, by using which they can easily show specific blog posts from a specific label on the home page of their blogger website, together with the blog archive.
This require zero coding knowledge and zero coding experience. The scripts is very simple, readers can copy that from this post, and paste that on their particular sites.
How To Show Specific Posts From Specific Label on Blogger
Visit the blogger website, and login to your blogger dashboard. Once you successfully log in to your dashboard, go the layout section. and there, choose the right places where you want to show the blog posts based on your labels.
these places can be like above your main blog posts, below any blog posts, right sidebar, left sidebar, footer, etc.
Now, once the place is selected. On that place, add a new gadget, and that gadget should not be other than HTML/JavaScript. And on that widget box, you need to paste the following html and JavaScript code mentioned below. Let us elaborate the steps in a batter way.
Steps To Show Specific Posts From Specific Label on Blogger
1. Go To Your Blogger Dashboard:
- Visit the official blogger website – https://www.blogger.com/
And login to your blogger dashboard.
2. Click On Layout:
- Click on Layout, from the left Menu
3. Choose A Place You Want To Show The Posts:
- Choosing the right place for you blogger posts to appear on your home page is an important step. You should not place the posts on places where reader’s impression becomes low. Anyway choose a better place like sidebar or footer, and continue the following steps.
4. Click On Add A New Gadget:
- Once you select the place, if your theme allows, click on the Add a Gadget link.
Sometimes your theme may not allow users to add extra gadgets, so check carefully.
5. Select HTML/JavaScript:
- Once you click on Add a Gadget, there will be a list of some gadgets, and among them, choose the HTML/JavaScript. And once you select that, there will be appearing a window.
- As you can see on the above image, there will be two sections on the window: Title & Content
- On the Title section, add the name of the Label you want to show posts from.
- On the Content section, add the following Html/JavaScript code.
6. Paste The Following Code:
- Paste the following codes on the content box of the widget window: And you need to replace the ‘Label Name‘ with your required Label.
How To Show Specific Posts From Specific Label on Blogger
<style>
/* Recent posts by labels widget by tutes inside*/
img.label_thumb{
float:left;
margin-right:10px !important;
height:60px; /* Thumbnail height */
width:60px; /* 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: left;
font: normal 15px 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 = true;var displayseparator = true;var showcommentnum = false;var showpostdate = true;var showpostsummary = false;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/LABEL NAME?published&alt=json-in-script&callback=labelthumbs"></script>How To Show Specific Posts From Specific Label on Blogger
7. Customize The Code As Per Your Requirements:
- Yes! we can also customize the codes as per our requirements. These customizations includes number of posts to display, font style, font width, thumbnail size, background, padding & margin.
Not only this, we can also enable and disable the features of showing post publishing date, author name, small summary of the post, etc. - I have highlighted the sections with RED, where you can customize the script.
- You need to replace the ‘Label Name‘ with your required Label.
8. Save The Widget:
Once you complete all the previous steps, simply click on save to update the widget.
9. Visit Your Blog:
After saving the widget, visit your website, or refresh if it is already opened. And see the result.
10. See The Result:
I think you are satisfied with the result. And if yes, then please leave a beautiful comment down here.
You can also tell us if you are facing any issue regarding this topic or any other topic as well.