New! Featured Post Widget for Blogger 2014

NEW BLOGGER FEATURED POST WIDGET NO CODING!

Blogger is now become a major platform of blogging since few past years. As blogger become popular the developers also start creating its templates and widgets to make blogger blog responsive and beautiful and easier to use. Today we are going to share with you a very useful new blogger widget. This widget is to display featured posts.

Note: This widget is taken up from bloggeryard.com

Features of this blogger widget

•  This widget is 100% responsive as its media queries for different screen sizes are created. So you no need to customise it for other screen sizes.
• It has beautiful Flat elegant style with beautiful mouse hover effect.
• It also show labels below every post.
• You can manually change it's label or post name 

Demo of this blogger widget

Recommended Posts:

1. 12 Best Wordpress Converted Free Blogger Templates

Note: This Blogger widget is best for Footer or Header.

How to Install 

• Goto Blogger dashboard
• Goto layout tab>>Add gadget>>HTML/Javascript
• Paste the following code in it and save

<style>
 #featured-posts{width:100%;height:200px;background:#34495e;margin-top:-1px}#featured-posts h3{color:#fff;font-size:20px;margin:0;font-weight:300;text-align:center;padding:15px}#featured-posts ul{margin:0;padding:20px}#featured-posts ul li{list-style-type:none;padding-left:10px;float:left;margin-right:20px;width: 249.5px;height:100px;border-left:3px solid rgba(255,255,255,0.5)}#featured-posts ul li span{color:rgba(255,255,255,0.5);display:block}#featured-posts ul li span i{padding-right:8px}#featured-posts ul li a{color:#fff;text-decoration:none;font-size:15px;line-height:25px}#featured-posts ul li:hover{border-color:#3498db;margin-top:-10px;-webkit-transition:all .3s ease 0;-moz-transition:all .3s ease 0;-ms-transition:all .3s ease 0;-o-transition:all .3s ease 0;transition:all .3s ease 0}#featured-posts ul li:hover span{color:#3498db}
  #featured-posts ul li:last-child { margin-right:0;}
@media screen and (max-width : 1200px) {
    #featured-posts ul li {width: 224.5px;}
  }
@media screen and (max-width : 1100px) {
    #featured-posts ul li {width: 199.5px;}
  }
@media screen and (max-width : 1000px) {
    #featured-posts .item4 {display:none}
    #featured-posts ul li {width: 243.6px;}
    #featured-posts .item3 {margin-right:0;}
  }
@media screen and (max-width : 900px) {
    #featured-posts ul li {width: 210.3px;}
  }
@media screen and (max-width : 800px) {
    #featured-posts .item3 {display:none;}
    #featured-posts ul li {width: 282px;}
    #featured-posts .item2 {margin-right:0;}
  }
@media screen and (max-width: 700px) {
   #featured-posts ul li {width: 232px;}
  }
@media screen and (max-width: 600px){
    #featured-posts ul li {width: 182px;}
    #featured-posts {height:220px;}
  }
@media screen and (max-width : 500px){
    #featured-posts{display:none!important;}
  }
</style>
<div id='featured-posts'>
<div class='container'>
<h3>Featured Posts</h3>
<ul>
<li class='item1'><a href='Your post URL here'>Your post name here</a><span><i class='fa fa-tags'/>your label here</span></li>
<li class='item2'><a href='Your post URL here'>Your post name here</a><span><i class='fa fa-tags'/>your label here</span></li>
<li class='item3'><a href='Your post URL here'>Your post name here</a><span><i class='fa fa-tags'/>your label here</span></li>
<li class='item4'><a href='Your post URL here'>Your post name here</a><span><i class='fa fa-tags'/>your label here</span></li>
</ul>
</div>
</div>

Customization 

To display posts in the featured post widget just replace the following :

• Your post URL here  with your post address which you want to display in the widget.
• Your post name here With you post name which you want to display.
• your label here with your label name which you want to display in the widget

To increase number of posts 

To increase number of posts rather than 4 just add the following below code above </ul>

<li class='item4'><a href='Your post URL here'>Your post name here</a><span><i class='fa fa-tags'/>SEO</span></li>

To reduce number of posts  

To reduce post numbers in widget just remove one time the following below code

<li class='item4'><a href='Your post URL here'>Your post name here</a><span><i class='fa fa-tags'/>SEO</span></li>

Need Help ! 

We hope that you like this New! Featured Post Widget for Blogger 2014. We hope that you understand the tutorial. If you need any help or face any problem regarding this then feel free to ask below in the comment box. We are here for your help.