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.


featured post widget glass effect

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.

What Do You Think?


Hope you liked the featured post widget. Would love to hear your feed back. Stay safe guyssmile

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: Blogger Featured Post Widget With Glass Shine Hover Effect
Blogger Featured Post Widget With Glass Shine Hover Effect
http://1.bp.blogspot.com/-vrCtyb8SlEQ/UfMCe7LZp2I/AAAAAAAALXo/LzTF-znPdQM/s1600/live+demo.jpg
http://1.bp.blogspot.com/-vrCtyb8SlEQ/UfMCe7LZp2I/AAAAAAAALXo/LzTF-znPdQM/s72-c/live+demo.jpg
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2012/08/blogger-featured-post-widget-with-glass.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2012/08/blogger-featured-post-widget-with-glass.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