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……………….
0 comments