Home Blogging How To Add Floating Social Media Sharing Buttons in Blogger

How To Add Floating Social Media Sharing Buttons in Blogger

By
Tech Ora
-
0
SHARE
There are many tutorials on the internet of how to add floating social media sharing buttons to your blogger blogs. But i’m now sharing so simple technique of adding social sharing buttons into your bloggers blogs. It is one of the best and awesome tool or widgets which increase the total number of times your posts get shared on Twitter, Facebook, and other social networking websites. 
How To Add Floating Social Media Sharing Buttons in Blogger

These floating social sharing bar has the following buttons, Facebook Like button, StumbleUpon, Twitter Share button, Digg This, and Google+ and all are shows with counter on every logo buttons. You can also add other social bookmarking icons later when you want to add this into this blogger widgets.

Add Scrolling Social Media Sharing Buttons in Blogger Blogs

Step 1 : First of all go to your Blogger Dashboard, then select your blog and go to Layout.

How To Add Floating Social Media Sharing Buttons in Blogger
Step 2 : Now click on “Add a Gadget” link .
How To Add Floating Social Media Sharing Buttons in Blogger

Step 3 : A pop up window will open, now scroll down and select ” HTML / JavaScript “ gadget.

Step 4 : Now copy below code and paste it inside the empty box.

<style type=”text/css”>
#social-buttons {
position:fixed;
bottom:20%;
margin-left:-715px;
float:left;
border-radius:8px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 4px 0;
z-index:10;
}
#social-buttons .button-share {
float:left;
clear:both;
margin:5px 5px 0 2px;
}
</style>
<div id=’social-buttons’ title=”Get this from www.techora.net”>
<div class=’button-share’ id=’like’ style=’margin-left:7px;’>
<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<div class=”fb-like” data-send=”false” data-layout=”box_count” data-width=”40″ data-show-faces=”false”></div>
</div>
<br /><div class=’sbutton’ style=”margin-left: 2px;” ><a class=’twitter-share-button’ data-count=’vertical’ data-via=’TECHORANET‘ expr:data-counturl=’data:blog.url’ href=’http://twitter.com/share’ rel=’nofollow’>Tweet</a><script src=’http://platform.twitter.com/widgets.js’; type=’text/javascript’></script>
<br />
<div class=’button-share’ style=”margin-left: 3px;” id=’su’>
<script src=”http://www.stumbleupon.com/hostedbadge.php?s=5″></script>
</div>
<div class=’button-share’ id=’digg’ style=’margin-left:3px;width:48px’>
<script src=’http://widgets.digg.com/buttons.js’ type=’text/javascript’></script>
<a class=”DiggThisButton DiggMedium”></a>
</div>
<div class=’button-share’ style=’margin-left:3px;’ id=’gplusone’>
<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script>
<g:plusone size=”tall”></g:plusone>
</div>
<div style=”clear: both;font-size: 9px;text-align:center;”>Get <a style=”color: #3399BB;” href=”https://www.techora.net/”>widget</a></div></div></div>

Step 5 : Save the Widget and View your blog.

Customization : 

If you want to change alignment of vertical side, then change the 20% value of of bottom. The position of the social bar relative to the bottom of your window browser. To set to your own demand. If you want to change the horizontal alignment then change the -712px value from margin-left. As much negative value, widget push to the left of the main blog, positive value pushed it to the right. You can easily customize it as you want according to your need.
Note : Change Twitter setting, Simply replace TECHORA with your own twitter name. 

<div class=’sbutton’> BUTTON CODE HERE </div>

Use this code, to add more buttons or you can easily remove any button from this widgets.

RELATED ARTICLESMORE FROM AUTHOR