Featured Posts widget with images for Blogger

Dhiraj Barnwal Tuesday, 9 April 2013 15 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.
Labels:
Google+ Pinterest

15 Comments to Featured Posts widget with images for Blogger Post Yours! Read Comment Policy ▼

very helpful post.thanks a lot.

Regards,
http://genuinecontent.blogspot.com

Glad to know you liked my post. Thanks a lot

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

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

Many thanks! Works perfect for me.

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

Thanks for the info, going to try this.