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