Saturday, 21 September 2013

How To Add Floating Social Sharing Button In Blogger

In The Previous Post in Blogger Tutorial We Explained You How To Add Floating Navigation Bar In Blogger. Today You Will Know How Can You Add Floating Social Sharing Button In Blogger. You Will Know How Simple It Is To Add Floating Social Sharing Button In Blogger. All You Need To Do Is Add The Code In Your Blogger Gadget. Don't Worry We Will Explain You Step By Step In Adding Floating Social Sharing Button In Blogspot Blog. You Can Also Add This Gadget/Widget In WordPress. It Is Explained Below.

In this Gadget every social sharing buttons is included, if you think it is not enough for you than in that case you can add more sharing buttons at any time

Floating Social Bookmarking Buttons

How To Add Floating Social Media Buttons To Your Blogger Blog

I. How to add the buttons

Adding Floating Social Sharing Gadget To Blogger

Go to Layout (old interface: Design --> Page Elements).
Click Add A Gadget.
In the Add A Gadget window, select HTML/JavaScript.
Copy the code you find below and paste it inside the content box.
Save the gadget.
Drag the gadget and reposition it below the Blog Posts gadget.
Click Save (top right hand corner).

Adding Floating Social Sharing Gadget To Wordpress

Go to Dashboard --> Appearance --> Widgets --> Available Widgets.
Drag Text widget into a sidebar.
Copy and paste the code inside the text widget.

<!-- floating share bar Start -->
<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;/*bs-fsmsb*/margin:5px 5px 0 5px;}
<div id='pageshare' title="Get This From">
<div class='sbutton' id='like' style='margin-left:8px;'>
<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); = id;
js.src = "//";
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 class='sbutton' id='rt'>
<script src="" type='text/javascript'></script>
<div class='sbutton' id='su'>
<script src=""></script>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src=""></script>
<g:plusone size="tall"></g:plusone>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="">widget</a></div><!-- Please do not remove this link -->
<!-- floating share bar End -->

II. Customization

Vertical alignment
Change the value of bottom in code line 3. The code positions the button relative to the bottom of your browser window. To fix the distance even when the window is resized, specify the value in px (pixels) instead of %.

Horizontal alignment
Change the value of margin-left in code line 3. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right.
To position the button relative to the left or right edge of browser window, replace the margin-left with left (as in left:10px;) or right (as in right:10px;) respectively.
Replacing and removing buttons
You can replace existing buttons with your own. Each button is represented by the following code:
<div class='sbutton'>



To replace the button, simply replace the button code with your chosen code.
To remove the button, simply delete the whole div.

Troubleshooting (for Blogger): If somehow your Google +1 button doesn’t appear despite other buttons appearing successfully, try this workaround:

Go to Template --> Edit HTML (old interface: Design --> Edit HTML) and find (Ctrl + F) the following line:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'> 

Copy the share bar code and paste it right below said line.
Replace the margin-left:-71px; in code line 3 with left:10px;.
Preview, then save.
That’s all!

Best Of Luck

You May Also Like

1 comment:

  1. Great post! You make blogging glance easy. The overall glance of your web site is fantastic, let alone the content!
    website design