FEATURED POST WIDGET FOR YOUR BLOG

Here is another important trick for everyone that is featured post widget.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.You all you have to do is to follow the steps.

1. Login to your account and click on design.
2. Now go to template and click on Edit HTML.
3. Now press (CTRL+F) and search for ]]></b:skin>
4. Now add the script given below just above the ]]></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/AVvXsEjEhJKhTN9rlSUtZNNLYjyrGR-WZzctyEWKZxM3pw5D6kzbkxuyHyZzjY8mlUnGrhkCp_W5F-BqihPbCEBcf5QyCXYxULpCFPc6snXoeGJckCkMoxYzct6Sn36toEp0dt8J59sYcYe4e1c/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}


Now click on save template.

Add Widget:

1. Now go to layout and click on (Add a Gadget).
2. Now select HTML/Java Script.
3. Now add the code given below in it.

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

• Now click on save.
• Here please replace the POST URL/POST TITLE and IMAGE URL with your desire URL/LINK/NAME.
• Now place the gadget where you want to show it.
• So is it useful for you tell me in comments ?

Asad

Author & Editor