New Stylish Metro-Style Interface (WINDOWS-8) Social Sharing Widget For Your Blogger

Friends, This is a social media sharing widget with mouse hover effect.  This is a new generation widget like Windows 8 desk top design. It make your blog more attractive. Do you want to add it in your blog, please follow this post.

Live Demo

 

Log in to your Blogger account

• Select  Layout option

 

• Click on Add a Gadget

 

• Select HTML/JavaScript from the given list

 

• 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 RED color with your  Social media links.

 

• Save It.

 

 

 

Leave a comment…………………… if  you like this post……………….