Home » Blogger Tutorials, Tricks and Hacks » Horizontal Featured Posts Widget

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Horizontal Featured Posts Widget

Horizontal Featured Posts Widget

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,422 views

Bloggers usually place their Featured Posts widget vertically on their side bar or horizontally below the web page. I found this Featured Post widget from Saikiran Reddy of GoodInBlogging so nicely designed that I’d include it in our list of featured tutorials today.

Saikiran’s gives you two design options to choose from: one with a rounded corner design combined with a cool opacity effect, while the has a stylish square border. What makes it even better is that it doesn’t require you to tinker your template’s code, which can mess up your site. All it takes is making use of Blogger’s ‘Add a Gadget’ feature.

  1. In you Blogger dashboard,  go to ‘Design’ and then ‘Layout
  2. Click on ‘Add a Gadget’
  3. And then copy/paste the code of the widget design that you’d like to use

For the rounded square design with opacity effect copy/paste this code:

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

 

For the stylish square corner design, copy/paste this code:

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

4. Replace the highlighted values (title, link, image) with that of your own and save your widget.

And that’s it, you’re done. Enjoy your new Featured Posts widget!

Liked It ? Please Share

Comments

One Response | Post A Comment | Subscribe To Comments RSS Feed

  1. Ahmed says:

    Very Very Good Post, Thank You

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here