'The Next Web' Featured Post Widget With Hover Effect

Today I am sharing beautiful 'The Next Web' style featured post widget for your blogger blog. This widget will cover little space on your blog and give you huge profits.As you can see on my blog I'm also using this widget.You can display three important posts with the help of "The Next Web' featured post.

You can simply add this widget on your blogger blog.In this tutorial I will tell you "How to Add 'The Next Web' Featured Post Widget With Hover Effect To Your Blogger Blog.So,let's start this tutorial:

See Also - Add Related Posts Widget To Blogger/WordPress With Thumbnails

'The Next Web' Featured Post Widget With Hover Effect - Step 1

• Go to Blogger Dashboard > Template > Back/Restore 
• Take Your Template Backup Before Make Any Changes
• Template > Edit HTML > Proceed
• Now,Press (Ctrl+F) & Search ]]></b:skin>
• Copy Below Code & Paste Above/Before ]]></b:skin>

#topstories {

    margin: 0;

    padding: 0;

}

#topstories li {

    display: inline-block;

    float: left;

    margin: 0 22px 0 0;

    position: relative;

    width: 200px;

}

#topstories li.last-child {

    border-left: medium none;

    margin-right: 0;

}

#topstories .frame {

    border-radius: 6px 6px 6px 6px;

    box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.8);

    padding: 4px;

}

#topstories .shadow {

    background: none repeat scroll left bottom transparent;

    padding-bottom: 7px;

}

#topstories .shadow img {

    max-height: 103px;

    max-width: 193px;

}

#topstories .media-data {

    -moz-transition: background 0.3s ease-in 0s;

    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);

    left: 5px;

    position: absolute;

    top: 5px;

}

#topstories .media-data:hover {

    background: none repeat scroll 0 0 transparent;

}

#topstories .media-data .title {

    color: #FFFFFF;

    display: block;

    font-size: 18px;

    height: 85px;

    overflow: hidden;

    padding: 9px 14px;

    text-shadow: 1px 0 2px black;

    width: 165px;

}

#topstories .media-data .title:hover {

    text-decoration: none;

}

#top-stories-article {

    margin-bottom: 22px;

}

#top-stories-article #topstories {

    padding-left: 15px;

}

#top-stories-article #topstories li {

    border-right: 1px solid #EBEBEB;

    font-size: 11px;

    height: 80px;

    overflow: hidden;

    padding-right: 15px;

    width: 290px;

}

#top-stories-article #topstories li:last-child {

    border-right: 0 none;

    padding-right: 0;

}

#top-stories-article #topstories li.last-child {

    border-right: 0 none;

    padding-right: 0;

}

#top-stories-article .shadow {

    background-position: right bottom;

    padding-bottom: 0;

}

#top-stories-article .shadow img {

    border-radius: 6px 6px 6px 6px;

    max-height: 122px;

    max-width: 280px;

}

#top-stories-article .shadow .frame {

    border: 0 none;

    box-shadow: none;

    height: 80px;

    overflow: hidden;

    padding: 0;

    width: 280px;

}

#top-stories-article .media-data {

    border-radius: 6px 6px 6px 6px;

    left: 0;

    top: 0;

}

#top-stories-article .media-data .title {

    height: 62px;

    width: 252px;

}

  

  a {

    text-decoration: none;

}

  #topstories .frame {

    border-radius: 6px 6px 6px 6px;

    box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.8);

    padding: 4px;

}

  .frame, .post img {

    background: none repeat scroll 0 0 #FFFFFF;

    border: 1px solid #E0E0E0;

    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.8);

    display: inline-block;

    padding: 3px;

}

• Save Your Template and Follow Next Steps 

'The Next Web' Featured Post Widget With Hover Effect - Step 2

• Go to Blogger Dashboard > Layout Design > Click Add A Gadget
• In Add A Gadget Window, Select HTML/Javascript
• Give A Label As The Title Of Your Widget
• Copy The Code Below and Paste It Inside The Content Box
• Click Save and Its Done

<div id="top-stories-home" class="mb-2" data-vr-zone="Photo Features">

<ul id="topstories" class="clearfix">

<li data-vr-contentbox="">

<div class="shadow">

<a class="frame" href="First Post Link">

<img class="attachment-top_stories_site wp-post-image" width="193" height="103" src="First Post Image Link">

</a>

</div>

<div class="media-data">

<a class="title" href="First Post Link">First Post Title</a>

</div>

</li>

<li data-vr-contentbox="">

<div class="shadow">

<a class="frame" href="Second Post link">

<img class="attachment-top_stories_site wp-post-image" width="193" height="103"   src="Second Post Image Link">

</a>

</div>

<div class="media-data">

<a class="title"  href="Second post Link">Second Post Title</a>

</div>

</li>

<li class="last-child" data-vr-contentbox="">

<div class="shadow">

<a class="frame" href="Third Post Link">

<img class="attachment-top_stories_site wp-post-image" width="193" height="103"  src="Third Post Image Link"></a><span class="last-child" style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:180px; "><a style="color:#D3D3D3;" href="http://www.bloggingehow.com">Widgets</a></span>

</div><div class="media-data">

<a class="title" href="Third Post Link">Third Post Title</a></div></li></ul></div>

Customization 

Replace above colored lines with your own. For example you need to place your first post link where First Post Link is given.Make sure that pictures are of dimensions 190x103 px.

If you need any help regarding customization, then just leave your comments. I will help you :).Happy blogging.Blessings and Peach guys. :)