Thursday, March 7, 2013

Attractive CSS Social Media Sharing Widget (With Mouse Hover Effect) For Blogger

Friends, This is a special widget to your blogger, It work with CSS code with mouse hover effect. This is a stylish widget, buttons are arranged vertically. You can add this widget without effort .Keep read this post and add this widget into your blogger.

Select Layout option.

Click on Add gadgets

Select HTML/Javascript from list.

Copy below code and paste in HTML/Javascript box.

<style>
#BT_social {width: 260px;margin: 5px 20px;padding:5px;}#BT_social li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#BT_social .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuHDOfhUHonCVP8xL5NQDjhOEfpZpUEgu2Guy7wginyX3eMwSttxtoLRd7Xvt1uBgCfzRPwADtzX2OY4_7gTIIBORljMlIbHELW0v19-TUjkiRiwv1O-o1NSWQv_-wM93tdUUjh4wXKpw/s1600/Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #0033CC;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}
#BT_social span:hover {visibility: hidden;}
#BT_social span {display: block;top: 15px;position: absolute;left: 90px;}
#BT_social .icon {color: #fafafa;overflow: hidden;}
#BT_social .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -190px;}
#BT_social .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -238px;}
#BT_social .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -286px;}
#BT_social .rss {background-color: rgba(204, 0, 0, .42);background-position: 0 -333px;}
#BT_social li:hover .icon {width: 250px;}
#BT_social li:hover .icon {background-color: #d91e76;}
#BT_social li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}
#BT_social li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}
#BT_social li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#BT_social li:hover .rss {background-color: #EC5601;background-position: 0 -142px;}
#BT_social .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>
<br />
<ul id="BT_social">
<li><a class="icon fb" href="http://www.facebook.com/YOUR-FACEBOOK-USERNAME">Like us on Facebook</a>Like us on Facebook </li>
<li><a class="icon twit" href="https://twitter.com/YOUR-TWITTER-USERNAME">Follow us on Twitter</a>Follow us on Twitter </li>
<li><a class="icon google" href="https://plus.google.com/YOUR-GOOGLEPLUS-USER-ID">Follow us on Google+</a>Follow us on Google+ </li>
<li><a class="icon rss" href="http://www.feedburner.com/YOUR-FEEDBURNER-USERNAME">Subscribe via RSS</a>Subscribe via RSS </li>
</ul>