Featured Post Widget With Shadow Effect for Blogger

Today we have another amazing 'The Next Web' style featured post widget that has been customized to give it an Apple products touch. The elegant widget is really great in terms of utilizing space and serving the purpose. The previous widget : Blogger Featured Post Widget With Glass Shine Hover Effect was though a top class thing, but the down side was the space it requires for simply 3 featured posts. We could edit this 'The Next Web' featured post widget to add up  3 more posts, and that would take up the same space.

Step #1 Customize the widget code

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

<style>
  

#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;
}
</style>

Customize the code above by editing those colored tags as to what they point to. For example you need to place your first article link where First post link is mentioned.

NOTE: And make sure that your images are of dimensions 190x103 px.

Step #2 Place the widget on your blog

Navigate to your Blogger Dashboard >> Layout >> Add a gadget >> HTML/JavaScript. Paste the customized code with in it and hit save. All done folkes!