New! Featured Post Widget for Blogger 2014



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.

New! Featured Post Widget for Blogger 2014

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.
New! Featured Post Widget for Blogger 2014 New! Featured Post Widget for Blogger 2014 Reviewed by Maher Afrasiab on 9:28:00 am Rating: 5

8 comments:

  1. Hope
    Smiles from the threshold of the year to come,
    Whispering 'it will be happier'...
    - ABN AMRO Login Demo - Helpdesk

    ReplyDelete
  2. great collection thanks for sharing

    ReplyDelete
  3. This was a very helpful post.

    ReplyDelete
  4. thanks there!!
    you are amazing your all posts are wonder full
    i learnt something new from here and you can learn something more unique and new on our www.tips4tricx.blogspot.com | tips4tricx blogger blog and from our onlinebloggertricks | www.onlinebloggertricks.com website| online blogger tricks dot com| tips4tricx seo, backlinks, sevida 2.4.2 themeforest template

    ReplyDelete
  5. akhirnya ketemu tutornya alhamdullilah work gan

    ReplyDelete
  6. موقع أكاديمية نيرونت
    موقع أكاديمية نيرونت هو موقع يحتوي على نخبة من أكثر المقالات تميزاً في مجالات التنمية
    البشرية المختلفة مثل الإدارة والقيادة، التنمية الذاتية،
    الصحة والطب، البرمجة اللغوية العصبية وغيرها الكثير من المجالات التي يتميز بها موقع التنمية الذاتية،
    وذلك بقلم مجموعة متميزة من محررين وكتاب ومدربين متخصصين في مجالات التنمية البشرية
    وذلك لضمان وصول المعلومات الصحيحة والدقيقة لتحقيق أكبر قدر ممكن من الفائدة للجميع

    ReplyDelete

Powered by Blogger.