Auto Categories feature With Thumbnails

Features automatic category with thumbnails is actually a development from previous tricks about Featured Category By Name Labels, this feature can be viewed categories based on the category name and thumbnail images with a summary of the article.

An example application of automated feature category with thumbnails you can see the demo at Revolution Fresh Template:

Live Demo:

Desired categories or labels will appear automatically without requiring you to edit it at any time.

What should be prepared? you should prepare is just a category name you want in the show. But keep in mind that this label name is case-sensitive meaning that the pairs of letter names must exactly match the label on your blog, eg Health category name is different from health therefore make sure first that the letters are exactly the same label name.

An easy way to see the exact name of the label is trying to show the first label widget in your blog, then highlight the desired label name and then look at your Internet browser's statusbar.

Featured seen that label, the label name is actually featured (all small letters), this happens because the display on the blog is influenced by setting the CSS. In this case, what is needed is the name of the original label.

Here are the steps to create automatic with thumbnail feature category.


The first step

1. Login to blogger with your ID.
2. Click Design.

3. Click the Edit HTML tab.

4. It is recommended to make a backup first, click on the words Download Full Template.

5. Find the code ]]>, copy and paste the following code just above the code of ]]>

/*** Featured Categories ***/
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 {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {}

6. Find the code , copy and paste the following code right above the code



7. Click Save Template button.
8. The first step is completed.

the second step I will explain at next post