Top 10 Scrolling, Floating Social Media facebook,Twitter Buttons Widget for blogger blog

Floating Twitter and Facebook Share Buttons (Widgets with Counter)

Here is an excellent widget that will float vertically next to your individual blog
posts.  These  engaging buttons will allow your visitors to easily share your content
on facebook, twitter, google plus, etc.  The great thing about this widget is that it
counts the number of times your posts are shared on each social network.

Add Widget to Blogger

1. Go to Blogger > Template
2. Backup your template
3. Click Edit HTML
4. Click Proceed
5. Then Click Expand Widget Templates
6. Search for this code:

<b:includable id='post' var='post'>and below it paste the following code. <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.pageType != "static_page"'> <style> .mbt_social_floating{ position:fixed; bottom:10%; margin-left:-60px; float:left; width:60px; background-color:#f7f7f7; padding: 5px 0 0px 0px; border-top:1px solid #ddd; border-left:1px solid #ddd; border-bottom:1px solid #ddd; z-index:9999px !important; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; } .mbt_social_floating .mbt_side_social_button{ margin-bottom:5px; float:none; height:auto; width:60px; } .mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{ margin-left:5px; } .mbt_social_floating .st_fblike_vcount{ margin-left:5px; } .mbt_social_floating .stButton_gradient{ background:none !important; height:21px !important; padding-left:0 !important; } .mbt_social_floating .chicklets, .mbt_social_floating .stMainServices { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjypK_12kZ8aG6qs3UxpZveJmCm-5EaM7TnkasuXY87cT2Cc5rXG9oXAJ9-R4Ar9O2FsyX1dDQfgHebRWZoTy1-KovHBf6r28oyWiNnZhK9NuZFzGykJkqbzcCXOrwtfRKs-WUQanQvkSe5/s400/gc_social_sprite.gif') no-repeat !important; height:19px !important; width:45px !important; padding:0 !important; } .st_email .chicklets{ background-position:0 -77px !important; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjypK_12kZ8aG6qs3UxpZveJmCm-5EaM7TnkasuXY87cT2Cc5rXG9oXAJ9-R4Ar9O2FsyX1dDQfgHebRWZoTy1-KovHBf6r28oyWiNnZhK9NuZFzGykJkqbzcCXOrwtfRKs-WUQanQvkSe5/s400/gc_social_sprite.gif') !important; } .mbt_social_floating .st_twitter_vcount .st-twitter-counter{ background-position:0 -58px !important; } .mbt_social_floating .stButton_gradient{ border:none !important; } .mbt_social_floating .stBubble_count{ width:44px !important; font-size: 15px !important; font-weight: normal !important; padding-top:7px !important; height:23px !important; background:none !important; } .mbt_social_floating .st_twitter_vcount .stBubble_count{ color:#00a6df; background-color:#f8fbfc !important; } .st_fblike_vcount{ margin-bottom: 0px; display: block; } .st_twitter_vcount{ margin-bottom: 3px; display: block; } .st_email{ margin-bottom: 5px; margin-top: 3px; display: block; } .mbt_social_floating .stBubble{ background-position: 21px 31px !important; height:35px !important; }.mbt_social_floating .st_pinterest_vcount{ margin-left:5px; } .mbt_social_floating .st_pinterest_vcount .st-pinterest-counter{ background-position:0 -19px !important; } .mbt_social_floating .st_pinterest_vcount .stBubble_count{ color:#FF0505; background-color:#fbf8f8 !important; } .mbt_social_floating .st_pinterest_vcount .stBubble{ background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYdx421pN8KsYQeAR1qVXUXpkML5O6UamiXFHDn1EMt0p8h2tfxGIcH1u1d-aE6-A-VFXh2Km8Lidq9H_wyN65cJLb1jgxtJmfIq_ST3mtZFRhUtFJYArQPVcIQ-4cjl436996PkBO41LQ/s400/bubble_arrow_pinterest.png') !important; } .st_pinterest_vcount{ margin-bottom: 0px; display: block; } </style> <div class='mbt_social_floating'> <script type='text/javascript'>var switchTo5x=true;</script> <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/> <script type='text/javascript'>stLight.options({onhover:false, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script> <!-- No more works properly so removing it from mbt list<span class='st_fblike_vcount' displaytext=''/>--> <div style='margin:0px 0 0px 10px;'> <div id='fb-root'/> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></div> <span class='st_twitter_vcount' displaytext='' st_via='webexpert'/> <div style='margin:0px 0 0 5px;'> <span class='st_plusone_vcount' displaytext=''/> </div> <div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'> <a class='addthis_counter'/> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: "http://webexpertseotipscms.blogspot.com", ui_header_color: "#ffffff", ui_header_background: "#0080FF" } </script> <span class='st_email' displaytext=''/> <p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'> <a href='http://webexpertseotipscms.blogspot.com/2014/04/top-10-scrolling-floating-social-media-facebook-twitter-buttons-widger-for-blogger-blog.html' style='color:#CAC8C8;'>Widgets</a></p> </div> </b:if></b:if>

Add Widget to Website

Just place the code above anywhere between the body section of your template.
The widget will appear where the code is placed. 

Customization

Replace the code below with your own twitter username. st_via='webexpert'

 

More Top 3 Scrolling, Floating Social Media Buttons for blogger blog

This gadgets look like these.

So here it is how to install 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 you have to paste the following code to install the gadget to your blog.
• Its not so difficult to add just copy it and paste it in the box like shown above.

Adding the code social buttons looks like this 

                Add This Code

                            

        <!-- 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://mbgadget.blogspot.com/2013/06/scrolling-social-buttons-blogger.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 -->

Adding the code social buttons looks like this

                                                                                 Add This Code

                                   <!-- 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://webexpertseotipscms.blogspot.com/2014/04/top-10-scrolling-floating-social-media-facebook-twitter-buttons-widger-for-blogger-blog.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 -->

I personally added 8 total social network in this gadget you can easily edit them  
here it is

• Just remove the line in the code 
• Like if you want to remove MySpace.com button remove this line from the code

                                <a class="addthis_button_myspace"></a>

These 8 social networks are here

Facebook.com                        Twitter.com
Delicious.com                         Pinterest.com
Digg.com                                Orkut.com
Googleplus.com                      Myspace.com

Adding the code social buttons looks like this

                                                                               Add This Code

                                   <!-- 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://webexpertseotipscms.blogspot.com/2014/04/top-10-scrolling-floating-social-media-facebook-twitter-buttons-widger-for-blogger-blog.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 -->

You can also remove or edit the code and here is also 8 networks added just see the above method how to remove the 1 network you just have to remove the line in the code that's it.

So these are the 3 top gadgets for social share buttons they are the most useful gadget for every blogger blog should add it on their page.

While adding this gadget is not so difficult its scrolled when the page is scrolled down or up, its bring more social share to the webpage.

How May I Help You?

If you're still having problems with the getting the Floating Social Media facebook,Twitter Buttons Gadget to display properly, let me know. Comment below and I will be happy to assist you.
Cheers!