New Floating Social Media Buttons With Cool Hover Effect
Today I comes with New Floating Social Media Buttons With Cool Hover Effect. You can add floating social media buttons to WordPress and Blogger. You may have seen floating social media buttons on other website and blogs but we try to provide you some unique style widget which you never seen anywhere. I made this into a simple widget so you don’t need to go into your template or theme source just paste code below to your blog.
Only of best feature of this is a hover effect. When you hover your mouse the button comes with a cool background hover. I had included some most used social media sharing buttons like Google+, Facebook Like Buttons, Stumbleupon, Twitter and Digg. Each of them comes with a live counter.You can add more social bookmarking or sharing buttons later if you wish.
Adding Floating Social Media Buttons With Cool Hover Effect
You just need to place a code to your blog widget Follow following steps to add floating social media buttons to WordPress and Blogger.
Adding To Blogger
- Go to Design > Page Elements.
- Click Add A Gadget.
- In Add A Gadget window, select HTML/Javascript .
- Copy the code below and paste it inside the content box.
- Save the gadget.
- Drag the gadget and reposition it under Blog Posts gadget.
- Click Save button (top right hand corner).
Adding To WordPress
- Go to Dashboard > Appearance > Widgets > Available Widgets.
- Drag Text widget into a sidebar.
- Paste in the code.
- Save.
<!-- floating share bar Start AllBloggingTips.com-->
<style type="text/css">
.sbutton{
background:#f0f0f0;
cursor:pointer;
color:#fff;
border:none;
padding:4px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px; margin-left:8px;
font:12px sans-serif;
}
.sbutton:hover{
background:#336699;
}
#pageshare {position:fixed; bottom:15%; margin-left:-81px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#fff;border: 1px solid #f7f7f7; padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 2px 0 5px;}
#pageshare:hover {-moz-border-radius:6px;
-moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
-webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);border: 1px solid #ddd;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Get this from AllBloggingTips.com">
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a></a>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div class='sbutton' id='rt'>
<a class='twitter-share-button' data-count='vertical' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></script></div><div style="clear: both;font-size: 9px;text-align:center;"></div><!-- Do not remove this link -->
</div><!-- floating share bar End -->
Credits
This New Floating Social Media Buttons With Cool Hover Effect is first shared on AllBloggingTips. Bloggers are requested to link back if they are going to share above widget with there visitors.
If you face any problem in adding this floating social media buttons feel free to drop your comments. Enjoy! Peace
