In this article, I will write tutorial about How to make automatic category with Only Thumbnail. If you want to learn about how to make automatic category with thumbnail, you are lucky because you are on the right page. If you want to do it, you have to do it while you read it.

1. First time you need to do is logging in to your blogger with your ID.

2. After you are in, you need to search Design so that you can choose and click Edit HTML in its menu.

3. Before you go on the next step, you will need to back up your template first by Download Full Template.

4. After downloading the full template, you need to find the code]]></b:skin> in your template. Copy and paste the code above ]]></b:skin>

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

5. And after that you need to find the code </head> and copy this script

<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>

And save your template. If you are done with this step, you finish the first step and ready for the next.

Second Step

1. The second step of thumbnail category is started with Page Element.

2. There, you need to Add a Gadget. There will be a new window which appears and you can click on the (+) sign for HTML/Java Script. You have to copy below script and paste it on the available area. You need to give title after you change the red-printed text into your category.

<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>

You can save it as that is the second step. If you like to add more widgets, you can repeat the step 2. If you like to have your own custom, you can set it on the CSS setting to meet your characteristics.

/*** 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 show, you only need to change the value 6 into another value.

<script type=’text/javascript’>var numposts = 6;</script>

Note: Being an expert in information technology may be something difficult if you are not studying it and just think that you cannot do it. However, if you try to learn it, you will probably find it not difficult. And since technology will always be used, you will always need it. There are many ways if you like to learn it. You can learn in either autodidact or join a computer course. If you need the certificate, you can join a course. However, if you just want to understand, you can learn it autodidact.