Add featured posts with thumbnails to your blogger blog

Many people would love to highlight few of their top posts in their blog and for such reason there are popular posts widget given default by blogger. But if you want it to look little bit professional and want few posts to appear either at the top or at the bottom of your blog here is a simple customization which would help to pin some of the best posts or posts which need users attention. 

1. Go to your Blogger Dashboard click on ----> Template ---> Edit HTML tab.

2. Make sure to take backup of your Template before making any changes to your HTML.

3. Now click on Expand Template Widgets check box.

4. Search for below code in your Template.

]]></b:skin>

5. Now just above this code, add the following code.

#kbposts{height:210px;overflow:hidden;margin:0px;position:relative;width:948px; border:0px solid #333; padding:5px 5px;}
#kbposts ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; }
#kbposts ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }
#kbposts img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px;  margin-top:0px;}
#kbposts img:hover{border: 1px solid #c5c5c5; }
.kbbody img{float:left}
.kbbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}
.kbbody h3 {font-family: arial,sans-serif,arial;font-size: 12px;font-weight: bold;margin-bottom: 1px;margin-right: 18px;margin-top: 10px;padding: 5px 0;text-align: center;}
.kbbody h3 a:link,.kbbody h3 a:visited{color:#004B80;text-decoration:none;}
.kbbody h3 a:hover{color:#434340; text-decoration:underline;}
.kbimg img {filter:alpha(opacity=80);opacity: 0.8;border:0;}
.kbimg:hover img {filter:alpha(opacity=100);opacity: 1.0;border:0;}

6. Save your template.

7. Go to your layout tab.

8. Click on "Add a Widget" then select "HTML/Javascript" Widget. Now place this widget depending on your need either at the top or bottom of the blog. It is a wide widget so it doesn't fit on your side bar anything below your header or above your footer looks great.

9. Next add below code inside the Widget.

<div id='kbposts'>
<div style='visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 100%; '>
<ul>
<li>
<div class='kbbody'>
<a class='kbimg' href='POST 1 LINK'>
<img height='100' src='POST 1 IMG LINK'?imgmax=800 width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 1 LINK'>POST 1 DESCRIPTION</a></h3>
</div>
</li>
<li>
<div class='kbbody'>
<a class='kbimg' href='POST 2 LINK'>
<img height='100' src='POST 2 IMG LINK'?imgmax=800 width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 2 LINK'>POST 2 DESCRIPTION</a></h3>
</div>
</li>
<li>
<div class='kbbody'>
<a class='kbimg' href='POST 3 LINK'>
<img height='100' src='POST 3 IMG LINK'?imgmax=800 width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 3 LINK'>POST 3 DESCRIPTION</a></h3>
</div>
</li>
<li>
<div class='kbbody'>
<a class='kbimg' href='POST 4 LINK' rel='nofollow'>
<img height='100' src='POST 4 IMG LINK'?imgmax=800 width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 4 LINK' rel='nofollow'>POST 4 DESCRIPTION</a></h3>
</div>
</li>
<li>
<div class='kbbody'>
<a class='kbimg' href='POST 5 LINK'>
<img height='100' src='POST 5 IMG LINK'?imgmax=800 width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 5 LINK'>POST 5 DESCRIPTION</a></h3>
</div>
</li>
</ul>
</div>
</div><div class='clear'/>

10. Replace all above links with your post links, images and description which are given in different colours.

11. Once you added your post links above, save your widget refresh your blog and see.

Note : The images that you would link to the widget, should be 160px width and 100px in height.