Floating Social Media Sharing is the most attractive and popular Social Media Sharing for any blog or website. As can be seen in almost all of the top level websites having this Social Media Sharing button. This helps blog styling, as well as contribute to share blog posts quickly. As a result, the number of the visitors to the site increases from the Social Medias.
 |
| Floating Social Media Sharing Widget |
Today, I will share the Floating Social Media Sharing Widget have been added with Facebook Like, Twitter Share, Google+ and Stumble Upon buttons. Like and Share buttons in the separate box will count the numbers. Moreover, you can also add more buttons to it. Usually, you cannot customize “Add This” button from their website. But I'm here to give you the ways through our coding. As a result, you can customize it to your wishes.
How to add:
- First, log into your blog.
- Click Layout from the Blogger dashboard.
- Click on Add Gadget, on the right side of the layout. See the figure below –
 |
| Add Floating Social Media Sharing Widget |
- Click on the HTML / JavaScript.
- Now copy the following codes HTML / JavaScript and paste it into the box.
<style type="text/css">#social-buttons { position:fixed; bottom:30%; margin-left:-740px; float:left; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background-color:#fff; padding:0 0 2px 0; border:2px solid #000000; z-index:10;}#social-buttons .button-share { float:left; clear:both; margin:5px 5px 0 2px;}</style><div id='social-buttons' title="Get This From www.prozokti.com"><div class='button-share' id='like' style='margin-left:7px;'><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><div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div></div><br /><div class='sbutton' style="margin-left: 2px;" ><a class='twitter-share-button' data-count='vertical' data-via='prozokthi' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script><br /><div class='button-share' style="margin-left: 3px;" id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div><div class='button-share' style='margin-left:3px;' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div><div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://www.prozokti.com/2015/05/floating-social-media-sharing-buttons-for-blogger.html">widget</a></div></div></div>
- Finally, Save the Gadget.
Customization:
- Red marked bottom:30% indicates the Vertical alignment. This is what you are trying to keep on top or below. This is likely to increase as the number goes up position changes to the top.
- The second red considerable portion margin-left:-740px indicates the Horizontal alignment. What are you trying to keep it to the right or the left? This is likely to move to the left as increase the number.
- The Pink colored prozokthi, replace with your Twitter account Username.
- If you like, you can delete a button from the Widget. If you wish, you can also add new buttons.
