Well This is an Awesome Widget We are Providing.This Allows us to Display Most Featured and Top Most Posts Of Our Blog in a Simpler and Easier Way So that it Not Only attracts the Visitors of the Blog But Also Helps them to Know The Top Most Posts of our blog and lets them Navigate through them in an easy way in Single Click.Well Before Going to the Tutorial Let's Have a look at the Below ScreenShot.

So Let's Start Now...


How to Create Horizontal Featured Posts Widget For Blogger:.


Login to Blogger < Design < Edit Html.


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

Save the Template.


Now Go Back to Design and Choose Add a Gadget > Html / Javascript.


Now Here iam Giving a Break. Here There are Two Type of Codes.


1. First One Creates a Featured Post Widget With Rounded Corner with Opacity     Effect.
2.Second One Creates a Featured Post Widget Which has a Stylish Square Border Like in the Above Image.

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

<div dir="ltr" style="text-align: left;" trbidi="on">

<ul style="background-color: white; color: #333333; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-size: 14px; line-height: 1.2; list-style-type: none; margin: 0px 0px 0px -15px; padding: 0px 0px 0px 1.25em; position: relative; text-align: -webkit-auto; width: 965px;">
<li style="float: left; height: 180px; margin: 0px; padding: 2px 13px 4px 0px; width: 180px;"><div class="ptb">
<a href="Post 1 Link" rel="nofollow" style="color: #111111; text-decoration: none;" target="_blank"><img height="140" src="Post 1 Image Link" style="border: 1px solid rgb(170, 170, 170); height: 140px; margin-top: 0px; max-width: 100%; padding: 3px; position: relative; width: 180px;" width="180" /></a>
<div class="clear" style="clear: both;">
</div>
<h3 style="color: black; cursor: default; font-family: Verdana; font-size: 10px; font-weight: normal; margin: 0px; padding: 5px 0px 0px 10px; position: relative; text-align: center; text-transform: uppercase;">
<a href="Post 1 Link">Post 1 Title</a></h3>
</div>
</li>
<li style="float: left; height: 180px; margin: 0px; padding: 2px 13px 4px 0px; width: 180px;"><div class="ptb">
<a href="Post 2 Link " rel="nofollow" style="color: #111111; text-decoration: none;" target="_blank"><img height="140" src="Post 2 Image link" style="border: 1px solid rgb(170, 170, 170); height: 140px; margin-top: 0px; max-width: 100%; padding: 3px; position: relative; width: 180px;" width="180" /></a>
<div class="clear" style="clear: both;">
</div>
<h3 style="color: black; cursor: default; font-family: Verdana; font-size: 10px; font-weight: normal; margin: 0px; padding: 5px 0px 0px 10px; position: relative; text-align: center; text-transform: uppercase;">
<a href=" Post 2 link ">Post 2 Titles</a></h3>
</div>
</li>
<li style="float: left; height: 180px; margin: 0px; padding: 2px 13px 4px 0px; width: 180px;"><div class="ptb">
<a href="Post 3 link" rel="nofollow" style="color: #111111; text-decoration: none;" target="_blank"><img height="140" src="Post 3 Image Link" style="border: 1px solid rgb(170, 170, 170); height: 140px; margin-top: 0px; max-width: 100%; padding: 3px; position: relative; width: 180px;" width="180" /></a>
<div class="clear" style="clear: both;">
</div>
<h3 style="color: black; cursor: default; font-family: Verdana; font-size: 10px; font-weight: normal; margin: 0px; padding: 5px 0px 0px 10px; position: relative; text-align: center; text-transform: uppercase;">
<a href="Post 3 Link">Post 3 title</a></h3>
</div>
</li>
<li style="float: left; height: 180px; margin: 0px; padding: 2px 13px 4px 0px; width: 180px;"><div class="ptb">
<a href="Post 4 Link" rel="nofollow" style="color: #111111; text-decoration: none;" target="_blank"><img height="140" src="Post 4 Image Link" style="border: 1px solid rgb(170, 170, 170); height: 140px; margin-top: 0px; max-width: 100%; padding: 3px; position: relative; width: 180px;" width="180" /></a>
<div class="clear" style="clear: both;">
</div>
<h3 style="color: black; cursor: default; font-family: Verdana; font-size: 10px; font-weight: normal; margin: 0px; padding: 5px 0px 0px 10px; position: relative; text-align: center; text-transform: uppercase;">
<a href="Post 4 Link">Post 4 Title</a></h3>
</div>
</li>
<li style="float: left; height: 180px; margin: 0px; padding: 2px 13px 4px 0px; width: 180px;"><div class="ptb">
<a href="Post 5 Link" rel="nofollow" style="color: #111111; text-decoration: none;" target="_blank"><img height="140" src="Post 5 Image link" style="border: 1px solid rgb(170, 170, 170); height: 140px; margin-top: 0px; max-width: 100%; padding: 3px; position: relative; width: 180px;" width="180" /></a>
<div class="clear" style="clear: both;">
</div>
<h3 style="color: black; cursor: default; font-family: Verdana; font-size: 10px; font-weight: normal; margin: 0px; padding: 5px 0px 0px 10px; position: relative; text-align: center; text-transform: uppercase;">
<a href="Post 5 Link">Post 5 title</a></h3>
</div>
</li>
</ul>
</div>