ADD A METRO STYLE SOCIAL BOOKMARKING WIDGET

Presently blogger has many kinds of widgets related with social bookmarking which contents the hover effect and many kinds of pro effects in it but today this widget has a very simple look but professional feel with a awesome bigger hover effect when you touch your mouse pointer at the text of the widget. It includes the Facebook, Twitter, Google Plus and RSS Feed widget and it widget named as Metro Style Widget. This widget is simply made by the short codes of CSS it doesn't include the JavaScript and No other kind of languages, so there will not face any problem in it.

Live Demo

METRO STYLE SOCIAL BOOKMARKING

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Layout
• Add a HTML/JavaScript Gadget
• 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/WidgetGenerators"></a></li>
<li><a class="tw" href="http://www.twitter.com/WidgetGenerator"></a></li>
<li><a class="gp" href="https://plus.google.com/101961392825834817673"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/WidgetGenerators"></a></li>
</ul>
</div> 

• Finally Save Your Widget.

MAKE CHANGES....!

• Replace it WidgetGenerators with your Facebook Page Username.
• Replace it WidgetGenerator with your Twitter Username.
• Replace it 101961392825834817673 with your Google + Username.
• Replace it WidgetGenerators with your Feed Burner Username.

If Any Problem Comes, Ask in Comments