Time and again I tell bloggers to keep an eye on the presentation
of their blogs. With blogger themes offered by default you don’t have many
options to work on the presentation. However with best design blogger templates available for free you can easily do
a blog makeover.
In this tutorial I will tell you how to filter your posts based on labels. It is common with blogger templates to list posts under categories like Popular Posts and Recent Posts but you need to do a lot more with them. How about making as many categories as you want and listing your posts respectively under these categories. For instance a news blog can have labels like Sports News, World News, Economic News and Entertainment News, it will be best for readers if they can easily locate news under their respective categories.
In this tutorial I will tell you how to filter your posts based on labels. It is common with blogger templates to list posts under categories like Popular Posts and Recent Posts but you need to do a lot more with them. How about making as many categories as you want and listing your posts respectively under these categories. For instance a news blog can have labels like Sports News, World News, Economic News and Entertainment News, it will be best for readers if they can easily locate news under their respective categories.
Unfortunately there is no readymade Widget for this task and
you have to make use of some coding manipulation to get it done. Here is how
you can proceed.
Ensure to keep a backup of your template before making changes in the
code.
Steps for filtering
blogger posts by labels
Before you proceed to the following steps, go through a
simple step first. In most of the free blogger templates most of the following code
is already existing. All you have to do is to add a HTML/Javascript widget and
paste a simple code.
Go through the following steps first
In the last step you have to add the widget to display the
posts. For this click on Layout and
select Add Gadget from the pop-up
select Html/Javascript widget
and paste following code into it
<div id="random-posts"><script style="text/javascript">var numposts_gal = 3;</script><script src="/feeds/posts/default/-/label name?published&alt=json-in-script&callback=showgalleryposts&max-results=99"></script></div>
Replace the label name with your own label and change value
of numposts_gal according to how many posts you want to display on the home
page.
Step 01: Go to
the blogger dashboard.
Step 02: Click on
Template and then click on EDIT HTML option.
Step 03: In the template
code search for ]]></b:skin>
(Press Ctrl+F to search for the code) and paste the following code just above
it.
img.label_thumb{float:left;margin-right:15px !important;height:65px; /* Thumbnail height */width:65px; /* Thumbnail width */border: 1px solid #ff00ff;}#label_with_thumbs {float: left;width: 100%;min-height: 80px;margin: 0px 15px 2px 0px;padding: 1;}ul#label_with_thumbs li {padding:6px 0;min-height:60px;margin-bottom:1px;border-bottom: 1px solid #ff99ff;}#label_with_thumbs li{list-style: none ;padding-left:1px !important;}#label_with_thumbs a { text-transform: none;}#label_with_thumbs strong {padding-left:1px; }
Step 04: Now
locate <head> tag in the code
and paste the following code just below it
<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/AVvXsEg7BgF2sXsWbOnse6y5g6RX1vCf7CaT1t5Fb2J4o0rp_NFs6Ona5uXl8dJQojRf-adH7Atq6KsUzb7-VSMrK6sEuEBbp2h35h-FhLOmtkAStFKVxWvKOnKHchkD65S3-xdghuCNmCyS6Vs/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;}elseif("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>
Now save the template.
Step 05: In the
last step you have to add the widget to display the posts. For this click on Layout and select Add Gadget from the pop-up select Html/Javascript widget and paste following code into it
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script> <script type="text/javascript" src="/feeds/posts/default/-/label name?published&alt=json-in-script&callback=labelthumbs"></script>
Step 06: Replace label name
with you own label
Step 07: You can
display as many categories as you like just add a new Html/Javascript widget
and paste the code given in step5 and change label accordingly.
This is all you have to do.
If there is any query or problem you can make use of comment
section.
Dear readers, after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me. Thank you.