Featured Posts widget with images for Blogger

Posted On // 11 comments


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://lh6.googleusercontent.com/-XE052qluJF4/T5WdnWYnAmI/AAAAAAAAJTg/yzMM76rYjkI/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.

11 comments

13 April 2013 at 01:07

very helpful post.thanks a lot.

Regards,
http://genuinecontent.blogspot.com

Reply
13 April 2013 at 10:01

Glad to know you liked my post. Thanks a lot

Reply
All Height Author
28 May 2013 at 04:33

Thanks, I'll try this.

Reply
Lee Style Author
13 September 2013 at 06:33

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

Reply
Ali Author
30 September 2013 at 13:48

Not working???

Reply
Anonymous Author
17 November 2014 at 19:11

nice

Reply
Wikarso Fahri Author
11 January 2015 at 17:56

Thanks

Reply
25 January 2015 at 05:43

hey its not working

Reply
30 April 2015 at 20:53

Not working.

Reply
Arsyl Aufa Author
24 August 2015 at 07:27

sample nothing

Reply
14 December 2015 at 01:10

code:
]]>
not in my html code
please help me

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Featured Posts widget with images for Blogger |