Featured Posts Widget For Blogger With Thumbnails

In this post, I am going to give a tutorial on how to add the most beautiful Featured Posts Widget with thumbnail 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 find this Widget very useful and Traffic generating for Bloggers. There are many posts which bloggers think are not getting the traffic they deserve, So adding a Featured Post Widget will help those posts get attention and It can increase traffic.

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

STEP 1: Adding The Featured Posts 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 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 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://shakeelasghar.blogspot.com/2012/08/featured-posts-widget-for-blogger-with.html'>Featured Post Widget</a></div></div></div>

Customizations:
The widget contains 5 featured posts. So you have 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 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

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.

Like Us.... Receive updates on your Facebook wall!!!!

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

Kindly Bookmark and Share it: