How to Make Automatic Category With Thumbnails

How to Make Automatic Category With Thumbnails - Features automatic category with a thumbnail trick in beautifying the look of the blog to Category By Name Label, this feature can menampillkan category based on the category name along with a summary article thumbnail images as you wish.

Examples of the application of automatic feature category with thumbnails you can see the demo at Fresh Revolution Template below:

To make this feature very easy to follow. You just follow the instructions that we provide properly and sequentially. See the following way follow the step by step

Step Edit Template

1. Login to blogger
2. Login page / Template Edit HTML
3. Find the code (Ctrl + F) ]]></b:skin> and place the following code just above the code.
   
   

   /*** Featured Categories/ Label ***/
   img.label_thumb{
   float:left;
   padding:5px;
   border:1px solid #8f8f8f;
   background:#D2D0D0;
   margin-right:10px;
   height:55px;
   width:55px;
   }
   img.label_thumb:hover{
   background:#f7f6f6;
   }
   .label_with_thumbs {
   text-align: left;
   width: 100%;
   min-height: 70px;
   margin: 0px 10px 2px 0px;
   adding: 0;
   }
   .label_with_thumbs {
   padding:8px 0;
   min-height:65px;
   margin-bottom:10px;
   }
   .label_with_thumbs a {}
   .label_with_thumbs strong {}

   
   
4. Find the code (Ctrl + F) </head>, copy and paste the following code just above the code
   
   

   <script type='text/javascript'>
   //<![CDATA[
   function labelthumbs(json){document.write('<div 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<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/AVvXsEiNBDVmTNYyDYIT0fjTAjRmm0sN64MYlxOZHZfznXBKkYxjl7F174Et5z6INmysHm_YuA0JWFgo3XiIOSmaTXcIIdT3yG-EGdgj9U6E5TgA1ldz2B7DfBrKhqqK0lKScAATh4ZOfS_NeC5a/s70-no/noimage+-+how+to.jpg';}
   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('<div 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('</div>');if(displayseparator==true)
   if(i!=(numposts-1))
   document.write('');}document.write('</div>');}
   //]]>
   </script>

   
   
5. then save template
   

Step Add Gadget HTML/ JavaScript

1. Turn to page layout, 
2. Add the gadget HTML / JavaScript and 
3. Put the following code and save it as shown below.
   
   

   <script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
   
   <script type="text/javascript" src="/feeds/posts/default/-/Tutorial?orderby=updated&
   alt=json-in-script&callback=labelthumbs"></script>
   
   <div class="more_topic"><a href="http://how-to-ht.blogspot.com/search/label/Tutorial">More for this topic &raquo;</a></div>

   
   
   

Description of the script is written like this:

numposts var = 3;
var showpostthumbnails = true;
displaymore var = false;
showcommentnum var = false;
showcommentnum var = false;
showpostdate var = false;
var showpostsummary = true;
NUMCHARS var = 80;

Red code is a code that you can edit, show the true meaning, false means do not be in the show, 80 is the number of characters, please adjust to your liking. Good luck!!!

NB:
Highly recommended, backup first before doing Edit HTML or blog template

Related Articles