How to Add Floating Social Media Sharing Buttons to Blogger

How to Add Floating Social Media Sharing Buttons to Blogger

SHARE

Nowadays, Floating Social Media Sharing Buttons has become very popular over internet. Anybody can share your Blog with several social media if you reader like you blog. Social Media sharing is a very important element for increasing your reach. You can get more traffic from Social media by sharing your content.It’s easy to make better your ranking with Google plus sharing. IF you share your content with Google plus then Google will give your counter an extra value for that. As like Google other social media like Facebook ,twitter, pinterest also play an important role to make your content viral. A floating social media sharing button will will help you to get those benefits of social media and it’s also count of your social sharing.

But If you are using Blogger, you can see that there isn’t any option to set a floating social media sharing buttons. IF you are a Blogger user and wants to add floating social media sharing buttons to your blog ? Than this tutorial will help you to get those sharing buttons on your blog.

This floating social media sharing buttons have: Facebook share, Twitter share, StumbleUpon , Digg this and Google+ buttons. You can add more buttons anytime.This sharing buttons have built in live counter.

Add Floating Social Media Sharing Buttons to Blogger

To get this floating sharing Buttons you have to just follow 3 simple steps.
Step-1 At first you have to go on Blogger Dashboard. Than go to Layout >> Add a Gadget.

How to Add Floating Social Media Sharing Buttons to Blogger

Step-2: After clicking on “Add a Gadget” a pop-up window will appear on your browser. On that window click on HTML/Javascript.

How to Add Floating Social Media Sharing Buttons to Blogger

Step-3: After that you will see a pop-up window with a empty box named content. Now type or copy and paste the code in the empty box and give this a title, whatever you want. There isn’t any problem with this. After copy and paste click on “save” to save the gadget.

How to Add Floating Social Media Sharing Buttons to Blogger

The code have given below:

[wpsm_codebox style=”1″]<style type=”text/css”>
#social-buttons {
position:fixed;
bottom:15%;
margin-left:-721px;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 2px 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.bnewtech.com”>
<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=’bNewtech‘ 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;”><a style=”color: #3399BB;” href=”https://www.bnewtech.com/add-floating-social-media-sharing-buttons-to-blogger/” rel=”nofollow” target=”_blank”>[Get This]</a></div></div></div>
[/wpsm_codebox]

Note: If you want to change the position of Social media sharing button, then change the 15% value of bottom(red color) for vertical alignment. For Horizontal alignment just change the value
-721px from margin-left(red color). Positive value will push the button to right and negative value will push it to left side. Change the value according to your needs. Change the bNewTech with you twitter username.

Now all the work have done.Adjust the Floating social media sharing bar on your favorite place.enjoy!
Your Floating bar will look like this

How to Add Floating Social Media Sharing Buttons to Blogger

If you need any help please comment here or contact us and send your questions and problems.


SHARE

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.