Here I am sharing a beautiful deign or way to show your featured posts to our audiences. Showing featured post is very important as it will increase your blogs traffic in the sky. Also showing beautiful things are very important so here I have created a sum of Beautiful and Useful Blogger Widget Which Will Show Your Blogs featured or special content to your audiences.
You can see the screenshot of this widget below.
Here Is the code >>
next you need to add all your links in your blogger blog.Go to Design >> Add a Gadget >> HTML/JavaScript. Now simply add the following code in that widget:
Conclusion
Before Adding this code to your blog change the colored links with your ones.for post Paragraph do not use more than 15 words.and try to write post Description in 10 Words.
You can see the screenshot of this widget below.
 |
Screenshot Beautiful Blogger featured posts |
How To Add This To Your Blogger Blog
step1 : -
in step 1 we are adding the CSS Styling to our blogger template.
at first copy the code below and add it on your blogger templates.
in step 1 we are adding the CSS Styling to our blogger template.
at first copy the code below and add it on your blogger templates.
step: Go to blogger dashboard > Template >Edit HTML > find for (CTRL+F) ]]></b:skin>after that cody the code below and add just before ]]></b:skin>
Here Is the code >>
/*----------- Labnol Like Stuff Gallery -----------------*/step 2:-
/*-----------MostUsefulTricks.com--------------------*/
/*-----------labnollikestuff.blogspot.com-------------*/
#labnollikestuffboxes{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:; border:0px solid #333; padding:5px 5px;}
#labnollikestuffboxes ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 100%; }
#labnollikestuffboxes ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }
#labnollikestuffboxes ul li:hover{ border-bottom:1px solid #c5c5c5; }
#labnollikestuffboxes img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px; margin-top:0px;}
#labnollikestuffboxes img:hover{border: 1px solid #c5c5c5; }
.labnollikestuffbody img{float:left}
.labnollikestuffbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}
.labnollikestuffbody h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;}
.labnollikestuffbody h3 a:link,.labnollikestuffbody h3 a:visited{color:#2F97FF;}
.labnollikestuffbody h3 a:hover{color:#c5c5c5}
.labnollikestuffbody 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;
}
next you need to add all your links in your blogger blog.Go to Design >> Add a Gadget >> HTML/JavaScript. Now simply add the following code in that widget:
<div id='labnollikestuffboxes'>
<div style='visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 100%; '>
<ul>
<li>
<div class='labnollikestuffbody'>
<a class='Fadein3' href='POST 1 LINK HERE'>
<img height='100' src='POST 1 IMG LINK HERE' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 1 LINK HERE'>POST 1 DESCRIPTION</a></h3>
<p>POST 1 PARAGRAPH</p>
</div>
</li>
<li>
<div class='labnollikestuffbody'>
<a class='Fadein3' href='POST 2 LINK HERE'>
<img height='100' src='POST 2 IMG LINK HERE' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 2 LINK HERE'>POST 2 DESCRIPTION</a></h3>
<p>POST 2 PARAGRAPH </p>
</div>
</li>
<li>
<div class='labnollikestuffbody'>
<a class='Fadein3' href='POST 3 LINK HERE'>
<img height='100' src='POST 3 IMG LINK HERE' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 3 LINK HERE'>POST 3 DESCRIPTION</a></h3>
<p>POST 3 PARAGRAPH</p>
</div>
</li>
<li>
<div class='labnollikestuffbody'>
<a class='Fadein3' href='POST 4 LINK HERE' rel='nofollow'>
<img height='100' src='POST 4 IMG LINK HERE' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 4 LINK HERE' rel='nofollow'>POST 4 DESCRIPTION</a></h3>
<p>POST 4 PARAGRAPH</p>
</div>
</li>
<li>
<div class='labnollikestuffbody'>
<a class='Fadein3' href='POST 5 LINK HERE'>
<img height='100' src='POST 5 IMG LINK HERE ' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 5 LINK HERE'>POST 5 DESCRIPTION</a></h3>
<p>POST 5 PARAGRAPH</p>
</div>
</li>
</ul>
</div>
</div>
Conclusion
Before Adding this code to your blog change the colored links with your ones.for post Paragraph do not use more than 15 words.and try to write post Description in 10 Words.
In Featured Posts
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.