Featured posts Widget with Opacity effect for Blogger

In this Post, i am going to give a tutorial on how to add the best and most beautiful featured posts widget for blogger which changes its opacity on mouse hover. As you can see, i have implemented this widget on my blog itself at the bottom. I just feel like you are eager of adding this featured posts widget on your blogger blog so you are still reading this post. So let me help you in implementing this widget on your blogger blog now.

Featured Posts Widget with Opacity Effect for Blogger

1. Go to your Blogger dashboard -->  Template --> Edit Html.

Featured posts widget style code

2. Find ]]></b:skin> and add the following code just above it.

#btboxes{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:;border:0px solid #333; padding:5px 5px;}#btboxes ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; }#btboxes ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }#btboxes ul li:hover{ border-bottom:1px solid #c5c5c5; }#btboxes img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px;  margin-top:0px;}#btboxes img:hover{border: 1px solid #c5c5c5; }.btbody img{float:left}.btbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}.btbody h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;}.btbody h3 a:link,.btbody h3 a:visited{color:#2F97FF;}.btbody h3 a:hover{color:#c5c5c5}.btbody p{margin:0; padding:0 0;color:#cdcdcd;font:10px normal verdana, sans-serif, Arial;}.Fadein3 img {filter:alpha(opacity=80);opacity: 0.8;border:0;}.Fadein3:hover img {filter:alpha(opacity=100);opacity: 1.0;border:0;} 

3. Save your Template.

Featured posts widget Html code

4. Now Go to Layout --> Add a gadget.

5. Choose Html / Javascript gadget and paste the following code inside it andsave the gadget.

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

Customizations

• Replace POST LINK with the Links of Particular posts.
• Replace POST IMG LINK with the Thumbnail image Urls of particular posts.
• Replace POST DESCRIPTIONS and POST PARAGRAPH with your own content.

Hint:

If you find any width issues or wish to add this widget exactly as i have added on my blog, then please follow these steps::

• Find the end of outer wrapper or the opening of your lower or footer wrapper 
• (Ex: <div id='lower'> or <div id='foot'>) --> This may vary with respect to templates.
• Add the gadget code just after the end of outer wrapper and before the opening of lower, footer wrapper.