Cool Metro Style Bookmarking Widget For Blogger

There are several of social bookmarking widgets for blogger that too with different hover effects. Recently I shared an new widgets Auto-Numbering Popular Posts Widget For Blogger. But today I’m here to share awesome Windows 8 look social bookmarking widget for blogger. This widgets looks like an professional widget. And this widget was named as Metro Style Widget. This widget includes the Facebook, Twitter, Google Plus and RSS Feed widget and with cool style. This widget is completely made up of CSS and not with Java scripts.

Well this post idea belongs to Widget Generators. So I thank him for this wonderful widget. So now just check out below steps on how to install this on your blog.

How to Add Metro Style Widget for Blogger

Go to Blogger “Dashboard”
Click on the “Layout”
Then hit “HTML/JavaScript Gadget”
Then paste below code in it.

<style>
#WG-social {
width:305px;
float:left;
margin-top:10px;
}
#WG-social li {
position:relative;
cursor:pointer;
padding:0!important;
}
#WG-social .fb,.tw,.gp,.fd {
position:relative;
-moz-transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
z-index:5;
display:block;
float:left;
margin:1px;
}
#WG-social .fb {
width:150px;
height:152px;
background:url(//goo.gl/6xmUk) no-repeat center center #3b5998;
}
#WG-social .tw {
width:150px;
height:74px;
background:url(//goo.gl/oyiFK) no-repeat center center #3b5998;
}
#WG-social .gp {
width:150px;
height:74px;
background:url(//goo.gl/oT0kF) no-repeat center center #3b5998;
}
#WG-social .fd {
width:302px;
height:74px;
background:url(//goo.gl/ncoLY) no-repeat center center #3b5998;
}
#WG-social li:hover .fb {
-moz-transition:all .1s ease-in-out;
-webkit-transition:all .1s ease-in-out;
background:url(//goo.gl/MH8AP) no-repeat center center #3468b6;
}
#WG-social li:hover .tw {
background:url(//goo.gl/hHRHv) no-repeat center center #4099ff;
-moz-transition:all .1s ease-in-out;
-webkit-transition:all .1s ease-in-out;
}
#WG-social li:hover .gp {
background:url(//goo.gl/wva4B) no-repeat center center #e44524;
-moz-transition:all .1s ease-in-out;
-webkit-transition:all .1s ease-in-out;
}
#WG-social li:hover .fd {
background:url(//goo.gl/JFGqn) no-repeat center center #f60;
-moz-transition:all .1s ease-in-out;
-webkit-transition:all .1s ease-in-out;
}
</style>

<div class=”WG” id=”WG”>
<ul id=”WG-social”>
<li><a class=”fb” href=”https://www.facebook.com/Triposoft”></a></li>
<li><a class=”tw” href=”http://www.twitter.com/triposoft”></a></li>
<li><a class=”gp” href=”https://plus.google.com/102229186630832989606″></a></li>
<li><a class=”fd” href=”http://feeds.feedburner.com/triposoft”></a></li>
</ul>
</div>

That’s it !

Some Tweak and Instruction

Replace “Triposoft” with your Facebook Page Username.
Replace “triposoft” with your Twitter Username.
Replace “102229186630832989606” with your Google + Username.
Replace “triposoft” with your Feed Burner Username.

Need Any Help ?

This is the easiest method for adding a Metro Style Widget on your blog. I simply hope I did justice with the post by creating it as simple as attainable. If you’re facing confusion in any half simply feel assured to depart your comment within the comment box below and I will be at your service 24/7. Share your thoughts in comments !