In this tutorial we are going to explain how to add floating vertical bar with social media share buttons to blogger.We are providing you 3 different size of floating vertical share buttons bar.This is widget is very easy to use and which enables your visitors to share every post of your website or blog.To grab this widget follow the steps mentioned below.
How to add floating vertical social sharing bar widget in blogger
installation steps
1.Go to blogger and select Layout2.Click Add Gadget and select 'HTML/Javascript"
3.Now Copy The Following Code and Paste in HTML/JAVASCRIPT.
Style 1
<!-- AddThis Button BEGIN By BloggersStand.Com -->
<div class="addthis_toolbox addthis_floating_style" style="background: #98A2A7; border: 1px solid #000000;top:120px;left:50px;">
<div class="addthis_counter_style"><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a></div>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4e7d75dd1a411e95"></script>
<!-- AddThis Button END By BloggersStand.Com -->
customization
- To change the background color,replace 98A2A7 with your hex color value,you can choose colors from here color wheel picker,color generator,flat ui colors.
- To change the border line size replace 1 with your desired pixel.
- To Change the border line color replace 000000 with your color hex value.
- To change the Position from top and left replace 120 and 50 with your desired position pixel.
Style 2
<!-- AddThis Button BEGIN By BloggersStand.Com -->Style 3
<div class="addthis_toolbox addthis_floating_style" style="background: #98A2A7; border: 1px solid #000000;top:120px;left:50px;">
<div class="addthis_32x32_style"><a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a></div>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4e7d75dd1a411e95"></script>
<!-- AddThis Button END By BloggersStand.Com -->
<!-- AddThis Button BEGIN By BloggersStand.Com -->
<div class="addthis_toolbox addthis_floating_style" style="background: #98A2A7; border: 1px solid #000000;top:120px;left:50px;">
<div class="addthis_16x16_style"><a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a></div>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4e7d75dd1a411e95"></script>
<!-- AddThis Button END By BloggersStand.Com -->
Save your Gadget Done..!!