Vertical Social Media Sharing Buttons Widget For

Pin It
Vertical Social Media Sharing Buttons Widget For Blogger
Blogging becomes interesting when people share your content on different social media sites and other websites with friends. In order to share your content on social media sites by visitors; you need to add some beautiful and smashing social sharing widgets. If your widget is looking attractive and catches people's attention then your content might get shared by visitors. For this purpose, there has been a huge number of Blogger widgets and plugins by different designers. Today, I would like to share a floating social sharing widget with you which scrolls down automatically when visitors scroll down the page. You can see this widget on my blog. The same widget I'm sharing with you.

You would also like:  Facebook Widgets for Blogger

The Benefits of This Widget:

There are many advantages you can get by using this widget on your blog. The first benefit is that you can have all social sharing buttons in a single widget and also one can send your content to someone via email by using this widget. The second benefit is that this widget don't have loadable JavaScript or jQuery codes so it can easily be loaded by browser and also it scrolls down automatically and user can observe sharing your content somewhere, while visiting your blog.

You would also like:  Add Facebook Comments Box in Blogger

How to Add Social Media Floating Widget to Blogger?

The process of adding this widget to your blog is simplest. You need just to follow below steps:

1. Open Blogger
2. Go to Layout
3. Add a Gadget
4. Add HTML/JavaScript
5. Copy the below code and Save

<div <!–sidebar floating share buttons code start–>
<style>
#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000000;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;-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="Apply this Widget on your website or Blog">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="UmarKhaleeq">Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></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='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 class="DiggThisButton DiggMedium"></a></div>
<br/><div style="clear: both;font-size: 9px;text-align:center;">[<a href="http://www.blogtipsuk.com/2013/03/vertical-social-media-sharing-buttons-blogger.html">share buttons Blogger</a>]<font></font></div></div>
<!–sidebar floating share buttons code end–></!–sidebar></!–sidebar>


6. Save Arrangement


Customization

The floating is set to left side of your blog, if you want set it for right side of your blog then simply change the bolded  float:left property to float:right.

PLEASE NOTE:

If you have any questions regarding this article,please comment and I'll reply as soon as possible.

We have Zero Tolerance to Spam. Comments with Links will be deleted.

5 comments:

  1. Vertical Social Media Sharing Buttons Widget For Blogger

    Vertical Social Media Buttons

    http://topclassfun.blogspot.com/2013/01/vertical-social-media-sharing-buttons.html

    ReplyDelete
  2. Hi. Thanks for this widget. I have one issue, though. When I hit "like", the share box appears but only partially. Would you mind taking a look and see what's wrong? www.celineism.com :) Thank you so much and more power to you and blogstipsuk.com!

    Celine of www.celineism.com

    ReplyDelete
    Replies
    1. Change HTML code of float . Try the below steps

      1. Edit HTML/JavaScript

      2. in the 3rd line , #pageshare {position:fixed; bottom:15%; right:10px; float:left; .....

      3. change right:10px; to left:10px;
      or
      change float:left; to float:right;

      4. i recommend you to change right:10px; to left:10px;

      this will look better for your site design. :)

      Delete
smileys in site comments
Show Emoticons >>

PLEASE NOTE:

If you have any questions regarding this article,please comment and I'll reply as soon as possible.

We have Zero Tolerance to Spam. Comments with Links will be deleted.