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.
- In you Blogger dashboard, go to ‘Design’ and then ‘Layout’
- Click on ‘Add a Gadget’
- And then copy/paste the code of the widget design that you’d like to use
<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;"4. Replace the highlighted values (title, link, image) with that of your own and save your widget.
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>
And that’s it, you’re done. Enjoy your new Featured Posts widget!
0 comments:
Post a Comment