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/AVvXsEgs8z23nZ40fq-6dkacb3xR-63smJ9TARhtX_jVAAdDtKz8vMvlDZeNM751edICH0XFVqNezt6-Vg3xrpRr_DP-aJcBAHzh6GArQaAXBY8xQ0NAxnHfBQOkaCS-oJ9xXcm3Idfp5yddyYI/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.
![[Music] Chrys ft. Zona – Lekpa](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2xmSLQPgB1aqkCMIExjAcrggKwmB4c4AN-F0A0dWSyV2YF43rBmC5DTX7SY6GgjHSQ6MHwyCxoLXGX7QRSa9F8gYYzzos9YMAQgcRlmb0nsgq6yrVOKdUjyAUJPOdIyU7Z0pWDx_FILDz/w72-h72-p-k-no-nu/Chrys-ft-Zona-Lekpa-mp3-image.jpg)
okkkk....
ReplyDelete