How To Add Floating Social Media Buttons

We all know that how much social media influences our daily life. Social media can be a good way in the promotion of any blog or website. Adding social media plugins or widgets can be a great helping tool in the success of any blog or website. Floating social media button is one of the widget that you can add in your blog. Floating social media button is a very popular widget that I guess you have notice in many blogs. It looks just like the screenshot given below. Floating Social Media Buttons is a great looking widget that you can also incorporate in your Blogger blogs.




It is not an hard task to add this widget in your blog. You have to just copy and paste some piece of codes in your blog. I am here to guide you in achieving this one without any mistake. All the steps for this task are given below. Just follow the steps carefully to get the floating social media button in your blog.

Steps To Add Floating Social Media Buttons

1) Log in to your blogger account.

2) Go to Blogger Admin >> Layout >> Click on Add a Gadget




3) Select HTML/Javascript in Add a Gadget window.



4) Copy and paste the given code below in the content box

<!-- floating page sharers Start --> <style> #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;margin:5px 5px 0 5px;} .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 http://bloglivead.blogspot.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='rt'> <script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></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 class="DiggThisButton DiggMedium"></a> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone> </a></div> <div style="clear: both;font-size: 9px;text-align:center;"><a href="http://bloglivead.blogspot.com/2012/06/how-to-add-floating-social-media-buttons.html">Get this</a></div> </div> <!-- floating page sharers End -->


Click Save button and you have done it.

You can adjust the position of the this widget where you want this widget to be appeared.
In addition to this you can also add some more buttons of social networking sites. This widget is not only useful one but also great and amazing in look-wise.
Don't hesitate to ask any query. If you are facing any kind problem ask me. It will be my pleasure to answer your quieres.
Enjoy the great experience of social media sharing of your blog posts!!!

6 comments:

  1. abhijit10 October 2012 at 05:53

    Thanks a lot.

    ReplyDelete
  2. Deepak Gupta11 January 2013 at 18:23

    nice..its rely workng..
    10nx bhaiya 4 sharing it..:):)

    ReplyDelete
  3. Mubasher Nisar13 January 2013 at 05:32

    Hi there, itx looking good but could you plz tell floating bundle of facebook, google+ and twitter??

    ReplyDelete
    Replies
    1. abhijit doley13 January 2013 at 08:42

      These social media buttons already present in this widget.

      Delete
  4. A.royal20 May 2013 at 18:01

    best way to add a floating gadjet without knowing any html coding..thanks a lot its really helpful..
    www.theuttarakhandportal.blogspot.com

    ReplyDelete

Subscribe to: Post Comments (Atom)