Tuesday 8 October 2013
0
Tuesday 8 October 2013
Unknown
Add Social Networks Hover Buttons Widget On your blog or site
Add Social Networks Hover Buttons Widget On your blog or site
Below Code just copy paste and paste and got Networks Hover Buttons Widget On your blog or site. Like Layout > add widget >HTML/JAVA Script Box > Paste code
<style>#Fbhover {width: 260px;margin: 5px 20px;padding:5px;}#Fbhover li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#Fbhover .icon {background: #D91E76 url(http://www.educationstuffs.com/files/images/Social_Buttonhover.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #141414;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;}#Fbhover span:hover {visibility: hidden;}#Fbhover span {display: block;top: 15px;position: absolute;left: 90px;}#Fbhover .icon {color: #fafafa;overflow: hidden;}#Fbhover .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -382px;}#Fbhover .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;}#Fbhover .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;}#Fbhover .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}#Fbhover .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;}#Fbhover .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;}#Fbhover .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;}#Fbhover li:hover .icon {width: 250px;}#Fbhover li:hover .icon {background-color: #d91e76;}#Fbhover li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}#Fbhover li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}#Fbhover li:hover .google {background-color: #A70000;background-position: 0 -94px;}#Fbhover li:hover .pint {background-color: #C00;background-position: 0 -142px;}#Fbhover li:hover .linked {background-color: #005772;background-position: 0 -190px;}#Fbhover li:hover .ytube {background-color: #A00;background-position: 0 -286px;}#Fbhover li:hover .rss {background-color: #EC5601;background-position: 0 -334px;}#Fbhover .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}.Fbhovercredit{font-size: 10px;padding-left: 80%;</style><ul id="Fbhover"><li><a href="https://www.facebook.com/" target="_blank" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span> </li><li><a href="https://twitter.com/" target="_blank" class="icon twit">Follow us on Twitter</a><span>Follow us on Twitter</span> </li>
<li><a href="https://plus.google.com/" target="_blank" class="icon google">Follow us on Google+</a><span>Follow us on Google+</span></li></ul><div class='Fbhovercredit'><a href="http://www.fbhover.com/2013/08/social-subscription-buttons-smooth-hover-effect-blogger.html" target="_blank"> +get this </a></div>
Related Articles :
Do you like this article? Spread the words!
If you enjoyed this post, please consider leaving a comment or subscribing to the E-mail feed to have future articles delivered to your feed reader.
Subscribe to:
Post Comments (Atom)
0 Responses to “Add Social Networks Hover Buttons Widget On your blog or site”
Post a Comment