How to add responding ‘Featured Posts’ to blogspot with images?

Within this year 2017, many blogger widgets has released and modified their designs. Some are responsive, some are elegant, and some are simple.

Blogger Widgets used to add more features to your blog. Featured Posts is one of the blogger widgets through which you can display your own selected posts on your own blogspot. The setup is really easy and requires just a work of few minutes.

This widget is very helpful if you want to target a specific post to all your readers. This widget also has hover effect feature that makes this widget responsive and animated. You can add four (4) featured posts with the help of this widget. Three (3) will have images whereas one will have just the title.

Below are the instructions to be followed in order to add this widget to your blogspot. Be sure to follow all the steps to avoid errors.

 Step 1 : Adding CSS Code to your Blog Template

Go to your Blog Template or Theme and Edit HTML. Find 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/AVvXsEhGl_Tka0vyDdEjFP0Zgcos75V17REYNxEmrZA9PY2ZPRKQcQACTFVFh34E6zbY0VvT6izO90FLbbmfiVP5E5Aw7JG7fB2xvkXKRLTARAZ4m6x8YfamIYyweUdluIpWphxn9vcoZj-P3RY/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 Featured Post Widget to your blog

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

<div id="featured-post"> <ul> <!--Featured 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 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 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 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> </ul>

Replace post url, image url, and post title with your own Post URL, Image URL and Post Title.  Save the Template and you are done.

Note: Don't forget to add the widget on the right place.

If you faced difficulties in implementing the code. Please put your comment below for assistance. Thank you!