Featured Posts widget with images for Blogger



Blogger WidgetFeatured Posts is a widget through which you can display your own selected posts on your Blogger blog. The setup is really easy and requires just a work of 5 minutes.

 If you want to target a specific post to all your readers, this widget may be helpful for you. This widget also comes with an hover effect. You can add 4 featured posts with the help of this widget. 3 will have images whereas one will have just the title . The demo of this widget can be seen by click the button below.




 Step 1 : Adding CSS to Template


Head up to Blog Title → Template → Edit HTML. Search for the tag  ]]></b:skin>  by pressing Ctrl + F. Add the below given code just above  ]]></b:skin> 


#featured-post a{color:#fff}
#featured-post ul{list-style:none;padding:0}
#featured-post ul li{padding:2px 0 0 2px;float:left;clear:none;width:183px}
#featured-post .item-content{background:transparent}
#featured-post .item-thumbnail{background:transparent}
#featured-post .item-content img{width:183px;height:183px}
#featured-post .item-title{line-height:1.3em;font-size:90%;min-height:50px;max-height:50px;;opacity:0.75;background:#000;margin:-63px 0 1px;padding:5px;color:#fff;overflow:hidden}
#featured-post ul li:first-child{height:250px!important;width:250px!important;padding:2px 0 0!important}
#featured-post ul li:first-child img{height:250px!important;width:250px!important}
#featured-post ul li:first-child + li + li + li{width:368px!important;height:64px!important;overflow:hidden}
#featured-post ul li:first-child + li + li + li img{width:368px!important;height:368px!important}
#featured-post ul li:first-child + li + li + li div.item-title{margin:-373px 0 5px;padding-right:60px;min-height:56px;max-height:56px;opacity:0.90;background: #000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpA3tHWh_DKbjfV7FzINBfjN-N17U8KhQYjlnOSU4uMKp-v0C5gQV_Vi5F7ugWNaKP2DLVgANTOwAME4SFa4_bChqNlH7lF7BW1XGQxJO_Jcj2j_pkLnPrASzwUEX2LsRBJXsVEuIzlf4/s48/Arrow%2520Right.png')  305px 7px no-repeat!important}
#featured-post ul li:first-child + li + li + li div.item-title a{font-size:16px;line-height:1.2em}

Save the template.

Step 2 : Add Widget to your blog


Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Add the below code in it and click on Save.


<div id="featured-post">
<ul>
<!--Featured Post 1> 
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="post url"><img src="image url" /> </a></div>
<div class="item-title">
<a href="post url">Post Title</a></div></div></li><!Featured Post 1 end--> 
<!--Featured Post 2> 
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="post url"><img src="image url" /> </a></div>
<div class="item-title">
<a href="post url">Post Title</a></div></div></li><!Featured Post 2 end-->
<!--Featured Post 3>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="post url"><img src="image url" /> </a></div>
<div class="item-title">
<a href="post url">Post Title</a></div></div></li><!Featured Post 3 end-->
<!--Featured Post 4>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="post url"><img src="image url" /> </a></div>
<div class="item-title">
<a href="post url">Post Title</a></div></div></li><!Featured Post 4 end-->
</ul>


Replace post url, image url, and post title with your desired URL/Link/Name.  Save the Template. You are done. Don't forget to add the widget on the right place.

17 comments:

  1. very helpful post.thanks a lot.

    Regards,
    http://genuinecontent.blogspot.com

    ReplyDelete
  2. Glad to know you liked my post. Thanks a lot

    ReplyDelete
  3. Hi it works, i tryed this on my Blog : http://www.modelee.com/

    ReplyDelete
  4. code:
    ]]>
    not in my html code
    please help me

    ReplyDelete
  5. Nice one but the demo domain has expired... thought it worth trying

    ReplyDelete
  6. Thanks for the info, going to try this.

    ReplyDelete