New Stylish Metro-Style Interface "WINDOWS-8" Social Media Sharing Widget For Your Blogger...

Hello Friends..
To Day I Am Sharing With You New Stylish Metro-Style Interface "WINDOWS-8" Social Media Sharing Widget For Your Blogger.
What I Do You Do..

                                         Live Demo

Log in to your Blogger account

1. Select  Layout option 
2. Click on Add a Gadget
3. Select HTML/JavaScript from the given list
4. Copy and Paste the following code in HTML/Javascript box.

<div class="MH" id="MH"> <ul id="MH-social"> <li><a class="fb" href="YOUR-FACEBOOK-PAGE-LINK-HERE "></a></li> <li><a class="tw" href="YOUR-TWITTER-LINK-HERE"></a></li> <li><a class="gp" href="YOUR-GOOGLE PLUS- PROFILE-LINK-HERE"></a></li> <li><a class="fd" href="YOUR-RSS-FEED-LINK-HERE"></a></li> </ul> </div> <style> #MH-social{width:305px;float:left;margin-top:10px}#MH-social li{position:relative;cursor:pointer;padding:0!important}#MH-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}#MH-social .fb{width:150px;height:152px;background:url(//goo.gl/6xmUk) no-repeat center center #3b5998}#MH-social .tw{width:150px;height:74px;background:url(//goo.gl/oyiFK) no-repeat center center #3b5998}#MH-social .gp{width:150px;height:74px;background:url(//goo.gl/oT0kF) no-repeat center center #3b5998}#MH-social .fd{width:302px;height:74px;background:url(//goo.gl/ncoLY) no-repeat center center #3b5998}#MH-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}#MH-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}#MH-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}#MH-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>

Change all Blue color with your  Social media links.

• Save It.

Tweet