Featured Posts With Thumbnails Widget For Blogger Blogspot

In this post, I am going to give a tutorial on How To Add Beautiful Featured Posts With Thumbnail Widget/Gadget To Blogger Blogspot which changes its opacity on Mouse Hover. As you can see, I have implemented this Widget on My Blog itself at the bottom.

Display your best articles in a simple featured post section using the custom HTML gadget. the display can be customized just like Random and Recent Posts Widgets. The Widget includes resizeable Post Thumbnails. This Widget is extremely easy to install. So lets start and add it to your blog.

STEP 1: Adding The Featured Posts With Thumbnail Widget CSS Code

1. Go to your Blogger dashboard > Template > Edit HTML.
2. Find ]]></b:skin> and add the following code just above it.

#b4eboxes{height:210px;overflow:hidden;margin-bottom:10px;position:relative;width:auto;background:Your Color Code;border:0px solid #333; padding:5px 5px;}
#b4eboxes ul{margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 100%;}
#b4eboxes ul li{overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px;}
#b4eboxes ul li:hover{border-bottom:2px solid #cdcdcd;}
#b4eboxes img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px; margin-top:0px;}
#b4eboxes img:hover{border: 1px solid #c5c5c5;}
#fw{float:right; font-size:10px; margin-top:10px; padding-right:13px;}
.b4ebody img{float:left}
.b4ebody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}
.b4ebody h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;}
.b4ebody 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.

Customize Featured Post Widget:
If you want to match the Widget with your colored Template. You can easily do that by changing the CSS Code. Change it little bit to get your Widget/Gadget customizable according to your Template. background:Your Color Code

You could add a border to the Widget by using 1 or 2 at instead of Value 0. border:0

STEP 2: Featured Posts With Thumbnail Widget HTML Code

Go to Design > Add a Gadget > HTML/JavaScript. Now simply add the following code in that widget:

<div id='b4eboxes'><div style='visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 100%;'><ul>
<li><div class='b4ebody'><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='b4ebody'><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='b4ebody'><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='b4ebody'><a class='Fadein3' href='POST 4 LINK'><img height='100' src='POST 4 IMG LINK' width='170'/></a><div class='clear'></div><h3><a href='POST 4 LINK'>POST 4 DESCRIPTION</a></h3><p>POST 4 PARAGRAPH</p></div></li>
<li><div class='b4ebody'><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 id='fw' title='Featured Posts Widget For Blogger'> <a href='http://www.blogger4ever.com/2012/08/featured-posts-widget-for-blogger-with.html'>Widget</a></div></div></div>

Customizations:
The widget contains 5 featured posts. So you need to configure all those posts links, images for each posts, their description and a small paragraph related to that post.

Replace POST LINK with the Links of your Posts.
Replace POST IMG LINK with the Image Links of your posts.
Replace POST DESCRIPTION with the title of your blog posts.
Replace POST PARAGRAPH with your own content.

Save your template.

HINT: If you find any width issues or wish to add Featured Post Widget exactly as I have added on my Blog, then please follow these steps: Find the opening of your lower or footer wrapper in your template.

Example: <div id='lower'> or <div id='footer'> This may very with respect to templates. Add the Featured Posts Widget HTML Code before the opening of lower or footer wrapper.
That's all. Hope that was useful and exciting.

Conclusion:
I hope this tutorial on Featured Posts With Thumbnails Widget For Blogger Blogspot helped you. You can add featured posts with thumbnails widget on your blogger blogspot. If you like it then must share it with your friends.

You might also like: How To Add Inline Related Posts Middle Of The Content In Blogger
How To Add Contact Form Widget In Blogger Blogspot