Featured Post Widget For Blogger

This is another widget to increase traffic and inbound links. This widget will make your readers surf more on your blog. This widget is placed at the bottom of your Blog. This can be customized by us.

Why To Use It ?

• Easy To Use.
• Eye Catchy.
• Low CSS means High Loading Speed.
• Easy To Customize.

Steps To Add This Featured Post Widget

• Login to your Dashboard.
• Go to Layout.
• Add a Gadget >> Html/Javascript.
• 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.

Categories: Blogger Widgets , CSS