'The Next Web' Featured Post Widget With Shadow Effect

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.

the next web featured post widget

Looking forward to that, we are going to share this great widget with you guys. Before moving any further, take a look at the recent widgets that we shared:


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!

Need Help?


In case you need any help customizing the widget, leave out a comment below and i would love to get back to you. smile

COMMENTS

.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: 'The Next Web' Featured Post Widget With Shadow Effect
'The Next Web' Featured Post Widget With Shadow Effect
http://4.bp.blogspot.com/-vRd7_s7rsFU/UCtQCCH498I/AAAAAAAAFwA/eNsckICsrTc/s640/Untitled.png
http://4.bp.blogspot.com/-vRd7_s7rsFU/UCtQCCH498I/AAAAAAAAFwA/eNsckICsrTc/s72-c/Untitled.png
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2012/08/the-next-web-featured-post-widget-with.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2012/08/the-next-web-featured-post-widget-with.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade