Sunday, 8 September 2013

Featured Posts Widget with Images for Blogger

Featured 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.

Live Demo

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/AVvXsEgd7N4-ocKHuGVkV9Ui-RnyF_pNGUZwqZpvcYbHtxosu5hsqcZ6xl6-9sJoYgaeBxVffyFG3hta8d9AXQDWImslUvRTwaKNW-8o5H_59WwelnaUmd8ZCzmboqNt3nidKhaGvjqs0fx02IU/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.

<<<<<****************************************************************>>>>>

We hope you have Enjoyed this Widget & find it useful for you. If you have any Problem or Issue with this Widget, Please do visit the Official page of this Widget here and directly ask the developer of this Widget for the Solution by Commenting there.