SimpleBloggerTips: Featured Posts Widget for Blogger with Thumbnails

    
I am going to give a tutorial on how to add the best and most beautiful Featured Posts Widget for Blogger.This widget will make your readers surf more on your blog. This widget is placed at the bottom of your Blog. This Gadget is much easier to configure.So lets get started and add it to our blog.

Follow this Steps:-

• Go To Blogger > Design > Page Elements
• Click on "Add a Gadget" link
• From the pop-up window, choose HTML/JavaScript
• Copy and paste the below code there.

<style>
.Fadein3 img {
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
.Fadein3:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
#blog-toolzboxes{
height:210px;
overflow:hidden;
margin:0px;
width:948px;
padding:5px 5px;
}
#blog-toolzboxes ul{
margin-left: 10px;
 padding: 0pt;
 position: relative;
 list-style-type: none;
 z-index: 1;
  width: 100%;
 }
#blog-toolzboxes ul li{
 overflow: hidden;
 float: left; width: 180px;
 height: 180px;
 border-top:0px solid #333;
 margin-right:6px;
 padding:2px 0px 4px 0px;
 }
#blog-toolzboxes ul li:hover{

 }
#blog-toolzboxes img{
width:150px;height:100px;
 padding:2px;
 border: 1px solid #A3A3A3;
 border-radius:10px;
 -moz-border-radius:10px;  margin-top:0px;
}
#blog-toolzboxes img:hover{
 border-radius:20px;
}
.blog-toolzbody img{
float:left;

}
.blog-toolzbody {
position:relative;
margin:0 5px 0 5px;
width:170px;
height:210px;
display:inline;
float:left;
color:#c4c4c4
}
.blog-toolzbody h3{
padding:5px 0;
font-size:12px;
font-weight:bold;
 font-family: verdana, sans-serif, arial; margin:0;
}
.blog-toolzbody h3 a:link,.blog-toolzbody h3 a:visited{color:#2E91E7;}
.blog-toolzbody h3 a:hover{color:#E7892B}
.blog-toolzbody p{margin:0; padding:0 0;color:#000000;font:10px normal verdana, sans-serif, Arial;}</style>
<div id='blog-toolzboxes'>
<div style='visibility: visible; overflow: hidden;width: 100%; '>
<ul>
<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Post Link'>
<img alt='chromegt' height='100' src='Image Link' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Post Link'>Post Title</a></h3>
<p>Post Description</p>
</div>
</li>

<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Post Link'>
<img alt='chromegt' height='100' src='Image Link' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Post Link'>Post Title</a></h3>
<p>Post Description</p>
</div>
</li>

<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Post Link'>
<img alt='chromegt' height='100' src='Image Link' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Post Link'>Post Title</a></h3>
<p>Post Description</p>
</div>
</li>

<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Post Link'>
<img alt='chromegt' height='100' src='Image Link' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Post Link'>Post Title</a></h3>
<p>Post Description</p>
</div>
</li>

<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Post Link'>
<img alt='chromegt' height='100' src='Image Link' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Post Link'>Post Title</a></h3>
<p>Post Description</p>
</div>
</li>

</ul>
</div>
</div>

Note: Change the Red,Green,Blue,Pink Link as per it is written.

• Now, Click on Save and you are done!!