How to add the best floating social media buttons gadget in blogger (3 Designs To Choose)

Here is the best (for me) floating social media buttons gadget that have a clean and simple design. Many Professional blogger too use this gadget..

Design 1: 

Click to Enlarge

How To Add It:

• Go to your blogger dashboard
• Select your blogger blog
• Click on Layout from Drop Down menu (shown in picture)

• A new Window appear
• Click on Add gadget
• And select HTML/JavaScript
• Next Box of HTML/JavaScript will appear (shown in picture)

    

• Now the box of HTML/JavaScript will appear when you click on the box.

• Now paste the following code to install the gadget to your blog.

Code For Design 1:

<!-- Scrolling social Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
<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><a href="http://pretoproblogger.blogspot.com/2013/07/how-to-add-best-floating-social-media.html">Widget</a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831"></script>
<!-- Scrolling social Button END --> 

Design 2:

Click to Enlarge

How To Add It:

• Go to your blogger dashboard
• Select your blogger blog
• Click on Layout from Drop Down menu (shown in picture)

• A new Window appear
• Click on Add gadget
• And select HTML/JavaScript
• Next Box of HTML/JavaScript will appear (shown in picture)

    

• Now the box of HTML/JavaScript will appear when you click on the box.

• Now paste the following code to install the gadget to your blog.

Code For Design 2:

<!-- Scrolling social Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_delicious"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_digg"></a>
<a class="addthis_button_orkut"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_compact"></a><h6>
<a href="http://http://pretoproblogger.blogspot.com/2013/07/how-to-add-best-floating-social-media.html">Widget</a></h6>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831"></script>
<!-- Scrolling social Button END --> 

Design 3 :

Click to Enlarge

How To Add It:

• Go to your blogger dashboard
• Select your blogger blog
• Click on Layout from Drop Down menu (shown in picture)

• A new Window appear
• Click on Add gadget
• And select HTML/JavaScript
• Next Box of HTML/JavaScript will appear (shown in picture)

    

• Now the box of HTML/JavaScript will appear when you click on the box.

• Now paste the following code to install the gadget to your blog.

Code for Design 3:

<!-- Scrolling social Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_delicious"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_digg"></a>
<a class="addthis_button_orkut"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_compact"></a><h6>
<a href="http://pretoproblogger.blogspot.com/2013/07/how-to-add-best-floating-social-media.html">Widget</a></h6>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831"></script>
<!-- Scrolling social Button END -->