Blogger Featured Post Widget With Thumbnail Opacity Effect

Below are the few simple steps by which you could add the widget to your blogger blog.

Step #1 Find The Destination Code 

Go to Blogger Dashboard >> Design >> Edit HTML and backup your template. Now search for the following code (By using CTRL +F).

Note: There is no set code that you need to search for. The only reason why i have included this step is to find a place for this particular tutorial to add the featured post widget. You can experiment with different positions and then use this widget any where you may wish to.

Search for:

<div id='main-wrapper'>
<div id='content-wrapper'>

Now it may vary from template to template. So you might not be able to find the above code. BUT, you could try finding anything similar to this. We would add the Featured Post widget code above it so that the widget would appear on the top of the blog (as shown in the picture above).

Step #2 Add The Featured Post Widget Code

Now just above the code mentioned in step #1, add the following code above it. Again, there can be errors. Trial and error is the key.

<div id='BeHboxes'><div style='visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 100%; '><ul><li><div class='BeHbody'><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='BeHbody'><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='mbtbody'><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='BeHbody'><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='Behbody'><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>

Replace the color tags (each post box represents a unique color above) with the information as mentioned.

Step #3 Adding The CSS

Search for ]]></b:skin>

Now just above this code, add the following CSS for the featured post widget.

/*----------- BeH Featured Post Widget -----------------*/
#BeHboxes{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:;border:0px solid #333; padding:5px 5px;}#BeHboxes ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; }#BeHboxes ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }#BeHboxes ul li:hover{ border-bottom:1px solid #c5c5c5; }#BeHboxes img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px;  margin-top:0px;}#BeHboxes img:hover{border: 1px solid #c5c5c5; }.BeHbody img{float:left}.BeHbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}.BeHbody h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;}.BeHbody h3 a:link,.BeHbody h3 a:visited{color:#2F97FF;}.BeHbody h3 a:hover{color:#c5c5c5}.BeHbody 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;}

 In case of any problems, leave out a comment below and i would love to get back to you as soon as possible.