Add Featured Category / Label Section for Blogger Posts

Hello friends, after a long time I’m back with cool Blogger tutorial. As you can find every blog is having Label which is nothing but separating your post or content with category. The post will be shared from your blog on the category/label basis only. But in the default label widget you can only show all labels together at one place. You can’t show up them separately. This may be not suitable for news, entertainment blogs. But this feature is active on all WordPress blog. But I’ve noticed on some blog that the blog post are shown based by label on homepage with thumbnail. So this can surely impress your readers to check out the content as you have shown them separately.

Add Featured Category / Label Section for Blogger Posts

So how to alter your label with your blog post respect to label in your blog homepage. Check the below image for live demo. Do you like to add this widget to your blog? If yes, then join me. Its simple to add Labels List With Thumbnail in Blogger.

How to Add Label/Categories With Thumbnail in Blogger

Step 1: Go to your Blogger Dashboard.

Step 2: Navigate to Template >> Edit HTML

Step 3: Then Copy the code below, and paste above ]]></b:skin>

/*** Divided Labels ***/
 border:1px solid #8f8f8f;
     .label_with_thumbs {
 float: left;
 width: 100%;
 min-height: 70px;
 margin: 0px 10px 2px 0px;
 adding: 0;
     ul.label_with_thumbs li {
 padding:8px 0;
    .label_with_thumbs a {}
    .label_with_thumbs strong {}

Step 4: Now search for </head> tag in your template and paste the below code just above </head> tag,

<script type=’text/javascript’>
function labelthumbs(json){document.write(‘<ul class=”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<;k++){if([k].rel==’replies’&&[k].type==’text/html’){var[k].title;var[k].href;}
if([k].rel==’alternate’){[k].href;break;}}var thumburl;try{$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=’’;}
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]=”Jun”;monthnames[7]=”Jul”;monthnames[8]=”Aug”;monthnames[9]=”Sep”;monthnames[10]=”Oct”;monthnames[11]=”Nov”;monthnames[12]=”Dec”;document.write(‘<li class=”clearfix”>’);if(showpostthumbnails==true)
document.write(‘<a rel=”nofollow” href=”‘+posturl+'” target =”_top”><img class=”label_thumb” src=”‘+thumburl+'”/></a>’);document.write(‘<strong><a rel=”nofollow” href=”‘+posturl+'” target =”_top”>’+posttitle+'</a></strong><br>’);if(“content”in entry){var postcontent=entry.content.$t;}
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(flag==1){towrite=towrite+’ | ‘;}
if(commenttext==’1 Comments’)commenttext=’1 Comment’;if(commenttext==’0 Comments’)commenttext=’No Comments’;commenttext='<a rel=”nofollow” href=”‘+commenturl+'” target =”_top”>’+commenttext+'</a>’;towrite=towrite+commenttext;flag=1;;}
{if(flag==1)towrite=towrite+’ | ‘;towrite=towrite+'<a rel=”nofollow” href=”‘+posturl+'” class=”url” target =”_top”>More »</a>’;flag=1;;}

Step 5: Once you finsh adding up on your blog just Save your template. Now check your blog, its cool!

Hope you have added this new widget to your blog. If you’re facing any issues then share it with us in comments below. Don’t forget to share your thoughts in comments. Cheers;)

About Harshit Jain

Harshit Jain is a tech-savvy blogger. He is graduated from Mumbai University. He likes to share his knowledge through his own blog at TripoSoft, Best Beard Trimmer, Best Electric Toothbrush & TechHug as well as by writing guest articles on other blogging sites. Follow him on Facebook, Google+, Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.