Automatic category only Thumbnails

 

See the example above where screenshot of automatic category  only thumbnail. or you can view the demo below

The following is how you will modify the coding of your template to display the automatic category only with the thumbnail.

Step 1

1. Login to blogger with your ID.
2. Click Design.
   
3. Click Edit HTML .
   
4. Please backup your full template by clicking the Download Full Template link.
   
5. Find the code ]]></b:skin>. Copy and paste the code below exactly above the code ]]></b:skin>

   /*** Labels Thumbs ***/
   img.label_thumb{
   float:left;
   border:1px solid #ccc;
   width:85px;
   height:70px;
   margin-right:10px;
   margin-bottom:10px;
   }

6. Find the code </head>. Copy and paste the code below exactly above the code </head>

   <script type='text/javascript'>
   //<![CDATA[
   function labelthumbs(json){document.write('<div>');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='';}
   document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
   if(i!=(numposts-1))
   document.write('');}
   document.write('</div>');}
   //]]>
   
   </script>

7. SAVE TEMPLATE.
8. Step 1, done.

Step 2

1. Click Page Element.
   
2. Click Add a Gadget to add a new gadget.
   
3. A new window will appear and click on the sign plus (+) for HTML/JavaScript
   
4. Copy below script and then paste it into the available field. Give a title as you desire, but previously, you have to change the red-printed text into your own category (label).

   <script type='text/javascript'>var numposts = 6;</script>
   <script type="text/javascript" src="/feeds/posts/default/-/labelname?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

5. Click SAVE
6. Step 2, done.

If you want to add other widgets for other categories, repeat from the Step 2.
For custom settings such as the size of thumbnail, border, and others, you can set up at the CSS section. Just do your own creation.


/*** Labels Thumbs ***/
img.label_thumb{
float:left;
border:1px solid #ccc;
width:85px;
height:70px;
margin-right:10px;
margin-bottom:10px;
}
To set up the number of thumbnail to display, you only need to change the value 6 into another value.
<script type='text/javascript'>var numposts = 6;</script>
Well, displaying the automatic category with only thumbnail could best fit with a blog with the gallery template, photo gallery, etc. :r

SUBSCRIBE VIA RSS FEED

If you like the article on this blog, Please CLICK HERE to subscribe for free via email, that way you will get a shipment every article there is an article that appeared in BENDOL ONLINE