Social Sharing Floating Bar With Multiple Background & 3D Border (V2)

Recently a lot of my readers have been saying me please sharing that floating bar which is you are using on your blog. So today we are going to bring it here for our valuable readers. To add as much value as possible i’ve included some other social sharing buttons plugins in the bar so your website or blog readers have more choice when he/she decide to share your articles. Social Share Buttons let the user stay on the site and share the content on their social media profiles with just a click and without leaving the site. Site visitors can choose interesting content to share, click on the social share button and easily post an update to their social media profiles. Check the previous version? Floating Sharing

In our newer version we just add sharethis button and also make it attractive with multiple background theme, I hope you will enjoy after adding plugin to you blog and website.

 

Live Preview

 

Add it to your blogger blog

 

1. Login to your blogger dashboard.
2. Go to your blogger Layout.
3. Click Add A Gadget.
3. In Add A Gadget window, select HTML/Javascript .
4.Copy the code below and paste it inside the content box.

 

<style type="text/css">
#floating_bar {
background-attachment:fixed;
background:
    /* top, transparent White */
    linear-gradient(
    rgba(255, 255, 0, 0.2),
      rgba(255, 0, 255, 0.2)
    ),
    /* bottom, image */
    url(http://1.bp.blogspot.com/-Q-wGfCAjwL4/U1tKDqH_1yI/AAAAAAAAEM0/ea8FqR19S5g/s1600/bg.jpg);
background-repeat: repeat;
position:fixed;
padding:0 0 3px 0;
bottom: 30%;
margin-left:-75px;
float:left;
border-top:2px groove #00a4ef !important;
border-bottom:2px groove #ffb900 !important;
border-right:2px groove #7fba00 !important;
border-left:2px groove #f25022 !important;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.2);
box-shadow:1px 1px 1px rgba(0,0,0,0.2);
z-index:10;
}

#floating_bar {
clear:both;
}
</style>
<div id='floating_bar'>
<div style='margin:10px 0 5px 13px;' id='like'>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<div style='margin:0px 0 0 10px;' id='gplusone'>
<g:plusone size="tall"></g:plusone>
</div>

<div style='margin:5px 5px 5px 6px;'>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="mybloggertriks" data-lang="en" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>

<div style='margin:5px 5px 5px 5px;' id='linkedin'>
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script data-counter='top' type='IN/Share'></script>
</div>
<div style='margin:0px 0px 5px 10px;'>
<a class="addthis_counter"></a>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
</div>
<p style='line-height:10px; margin-bottom:8px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.myblogger-tricks.com/2013/09/add-awesome-floating-sharing-bar-on.html' rel='nofollow' style='color:#777;'> Get Widget </a></p>
</div>

 

Note:- You must replace mybloggertriks highlighted in yellow color with your twitter username.

and just click on orange Save button ( Place at top right corner).

If in case the facebook like button did not work then add this Javascript code just before closing </body>.

1. Go to your blogger dashboard>> Template>> Edit Template and find the following code

 

</body>

 

2. and paste this javascript code just before </body> tag.

 

<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>

 

Widget Customization

Vertical Alignment:
In css section change the value 30% to any other which is your blog requirement for example.

 

bottom: 25 %;  or bottom: 30%; or bottom: 35%;

 

To fix the distance even when window is resized, specify the value in px (pixels) instead of %.
Horizontal Alignment
To align the widget more towards the left or right then edit this value.

 

margin-left: -60px;

 

Negative value pushes the button to the left of the main blog column, positive value pushes it to the right.
By making use of the various social media integration tools and resources, you can make your website the main social hub for user interaction and engagement, thus driving viral social traffic to your site. I Hope you will enjoy this nice floating widget. Let us know below in comment section if you got any question. Till then take good care of yourselves and your loved ones. Peace and blessings pals! :). enjoy..!!