BLENGOK

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.

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;}

STEP 2: Featured Posts Widget HTML Code

<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>

Now today I am shear a post about how can you customize blogger’s official popular post widgets the biggest advantage of this widget is that don’t need to install heavy JavaScript because 
JavaScript always increase page load time and also increase bounce rate of your blog. And also we are using widget stored in blogger server and we just alter its look and shape to make it blend with your BlogSpot.

I hope you will find today tutorial pretty 
interesting. Always write a comment to shear your suggestion. So now let’s go to plying with these beautiful widgets.

Adding popular post widget in to your blog!

• Log in to your blogger account.
• Click on blog title in which you want to add This Popular Post widget.
• Go to layout and then click on "Popular Post" gadget from the list provided

          by blogger.

• Now make these settings

Now Hit save. and search for

]]></b:skin>

• Just above it paste the following code.

/*** KH Popular Post ***/
.popular-posts { margin: 10px 0px 5px 0px;}
.popular-posts ul{padding-left:0px; 
font: normal 13px Arial, Tahoma, Verdana;}
.popular-posts ul li {background: #fff
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxkR3I5lTUJKhlBVT73FrbIRGSY6Bsdz-M4QH1NeKCD_VvKR98QYol-4ss8ulZdejW7xzeKDVzwKpr-WUQV1ZvWfriV3RjnEmhDI7Yi4qtn1C2CEbwCyepmCL6g7BjYrl18gukAatCBAg/s1600/kutebkhana.png) 
no-repeat 2px;
list-style-type: none;
margin: 0 0 5px 0px;
padding: 5px 5px 5px 30px !important;
border: 1px solid #007D47;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.popular-posts ul li:hover { 
border:1px solid #80FEC8; 
}
.popular-posts ul li a:hover { 
text-decoration:none; }

Customization!