Blogger Featured Post Widget With Glass Shine Hover Effect

Its been a long time that we have shared any widget with you guys. I am personally a huge fan of featured post widget and its always fun to try out new stuff every now and then. Previously we shared Blogger featured post widget with thumbnail opacity effect. Today we are sharing another amazing featured post widget with glass shine hover effect.

You could add the widget to your Blogger blogs plus WordPress too. So sit back and follow the simple steps below. You can add as many featured post in the widget. By default, we have shared 3 image/post widget. Though the process to add more post with images is fairly easy and discussed below.

Step #1 Customize The Following Code For Your Blog

/*BloggingeHow Glass Shine Featured Post Widget*/

/*First Featured Post*/

<div class="column">

<a href="Post 1 Link">
<img src="Post 1 Image link" />
</a>
<h3>
<a href="Post 1 link">Post 1 Title</a>
</h3>
</div>

/*Second Featured Post*/

<div class="column">

<a href="Second Post link">

<img src="Second Post Image link" />
</a>
<h3>
<a href="Second Post link">Second Post Title</a>
</h3>
</div>

/*Third/Last Featured Post*/

<div class="column_last">

<a rel="bookmark" Last post link">
<img src="Last post image link" />
</a>
<h3>
<a href="Last post link">Last Post Title </a>
</h3>

<p style=" line-height:0px; font-size:8px; font-weight:bold; text-align:right"><a style="color:#D3D3D3;" href="http://www.bloggingehow.com">widgets</a></p>

</div>

/*Featured Post Widget CSS Part*/

<style>
#columns {

    line-height: 23px;
    padding: 2px 0 0;
    width: 960px;
}
.column {
    border-right: 1px solid #ECE8D7;
    float: left;
    padding: 0 5px;
    width: 210px;
}
.column:hover {
    background: none repeat scroll 0 0 #F1F1F1;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.column p, .column_last p {
    padding: 0 0 10px;
}
.column h3 a, .column_last h3 a {
    color: #154A7F;
    font-size: 17px;
    font-weight: 700;
}
.column h3, .column_last h3 {
    padding: 5px 0;
}
.column h4 a, .column_last h4 a {
    color: #222222;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.column img, .column_last img {
    border: 1px solid #B9C5C9;
    border-radius: 4px 4px 4px 4px;
    margin: 5px 0px 5px;
    padding: 6px;
}
.column a, .column_last a {
    color: #154A7F;
    font-weight: 700;
}
.column_last {
    float: left;
    padding: 0 15px;
    width: 200px;
}
.column_last:hover {
    background: none repeat scroll 0 0 #F1F1F1;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
</style>

Now add the Post links/Post image links in the places/tags highlighted above in the code.

Note: Make sure that the images are 190x115 px dimensions.

To further customize the widget, say you wish to add more than 3 posts into the featured post widget, you can follow the below steps to add more posts. Its easy. In case you're ok with the current version, simply skip to step 3.

Step #2 Add More Than 3 Posts In The Widget (Optional)

To add more posts, add the follow code just above <div class="column_last">. and then add the links as shown in the step #1.

<div class="column">

<a href="Another Post link">

<img src="Another Post Image link" />
</a>
<h3>
<a href="Another Post link">Second Post Title</a>
</h3>
</div>

Step #3 Add it To Your Blog

Now simply, once the above widget code is ready, go to Blogger Dashboard >> Add a new Gadget and paste the code with in it. Done! In case of WordPress, place the CSS part in your style.css file, while place the main widget HTML (divs etc) above your main wrapper area or where ever you wish it to appear.