Floating Social Media Buttons for Blogger

Pin It

Tweet

I like using the floating social media buttons because I don’t like the reader to scroll back up or down to be able to just click on the like button and share it with her Facebook friends.

So today, I’m going to share with you guys the code for the floating social media buttons for blogger that I am using here in Bloggers Tech. I have also prepared different background colors for the floating buttons so that it could go with the colors with your blog or have the color that you preferred to use.

WHY HAVE A SOCIAL MEDIA SHARE BUTTONS ON YOUR BLOG?

This will totally help the exposure to your blog. Your readers could share it with their friends, and their friends will share it to their friends and so on. This will really mean traffic to your blog.

Another thing is that, it also helps and gives you a positive result on search results and impressions, which is totally great! All you have to do is put up some social media share buttons and encourage your readers to share, +1 or tweet about your post and you’re already trying to increase the exposure of your blog.

Here are the different colors I've prepared for you guys for our floating social media buttons:

If you have selected the desired color that you want then select their codes below according to the color that you want.

HOW TO ADD SOCIAL MEDIA BUTTONS ON BLOGGER?

Here's a step by step instruction on how to add a widget on your blog. 

STEP 1: CLICK DESIGN
STEP 2: ADD A GADGET
STEP 3: FIND HTML/JAVASCRIPT WIDGET
STEP 4: PASTE CODE ON CONTENT BOX. YOU CAN LEAVE TITLE BLANK.
STEP 5: CLICK SAVE.

For the code of the floating social media button, just choose one below (whichever color you prefer to use) and just click on "SELECT CODE" button then press "CTRL" along with "C" key on your keyboard ( ctrl + C ) to copy the code. The button will just highlight all code, so you need to copy it.

WHITE

<style type="text/css"> * html #ss-box{ position: absolute; } #ss-box{ width: 70px; background:#fff;border:1px solid #dedede;border-radius:px;-moz-border-radius:px; -webkit-border-radius:px;position:fixed;left:4%; top: 20%; height:200px; height:auto; } #ss-box div{ padding:6px 8px 4px 5px; } #icon_twitter,#icon_digg{ margin-left:-2px; } #icon_linkedin{ margin-left:-5px; } #sfs{ margin-left:-5px; } #ss-get{ bottom: -20px; clear: both; color: #666666; font-size: 9px; left: 18px; position: absolute; text-align: center; text-decoration: none; } </style><br /> <br /> <div id="ss-box"><div id="ssl-box"><br /> <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&appId=186259918098008"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script><br /> <br /> <div class="fb-like" data-send="false" data-layout="box_count" data-width="80" data-show-faces="true" data-font="arial"></div><br /> <div id="icon_googleplus"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><br /> <g:plusone size="tall"></g:plusone> <br /> </div><br /> <center> <a href="https://twitter.com/share" class="twitter-share-button" data-related="agigil" data-lang="en" data-size="medium" data-count="vertical">Tweet</a><br /> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></center><br /> <br /> <center><script src="http://platform.linkedin.com/in.js" type="text/javascript"></script><br /> <script type="IN/Share" data-counter="top"></script></center><br /> <br /> <center><!-- Place this tag where you want the su badge to render --><br /> <su:badge layout="5"></su:badge><br /> <br /> <!-- Place this snippet wherever appropriate --> <br /> <script type="text/javascript"> (function() { var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; li.src = 'https://platform.stumbleupon.com/1/widgets.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); })(); </script><br /> </center><br /> </div><br /> <div style="clear:both;"></div></div>

BLUE

<style type="text/css"> * html #ss-box{ position: absolute; } #ss-box{ width: 70px; background:#0067bf;border:1px solid #dedede;border-radius:px;-moz-border-radius:px; -webkit-border-radius:px;position:fixed;left:4%; top: 20%; height:200px; height:auto; } #ss-box div{ padding:6px 8px 4px 5px; } #icon_twitter,#icon_digg{ margin-left:-2px; } #icon_linkedin{ margin-left:-5px; } #sfs{ margin-left:-5px; } #ss-get{ bottom: -20px; clear: both; color: #666666; font-size: 9px; left: 18px; position: absolute; text-align: center; text-decoration: none; } </style><br /> <br /> <div id="ss-box"><div id="ssl-box"><br /> <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&appId=186259918098008"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script><br /> <br /> <div class="fb-like" data-send="false" data-layout="box_count" data-width="80" data-show-faces="true" data-font="arial"></div><br /> <div id="icon_googleplus"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><br /> <g:plusone size="tall"></g:plusone> <br /> </div><br /> <center> <a href="https://twitter.com/share" class="twitter-share-button" data-related="agigil" data-lang="en" data-size="medium" data-count="vertical">Tweet</a><br /> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></center><br /> <br /> <center><script src="http://platform.linkedin.com/in.js" type="text/javascript"></script><br /> <script type="IN/Share" data-counter="top"></script></center><br /> <br /> <center><!-- Place this tag where you want the su badge to render --><br /> <su:badge layout="5"></su:badge><br /> <br /> <!-- Place this snippet wherever appropriate --> <br /> <script type="text/javascript"> (function() { var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; li.src = 'https://platform.stumbleupon.com/1/widgets.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); })(); </script><br /> </center><br /> </div><br /> <div style="clear:both;"></div></div>

RED

<style type="text/css"> * html #ss-box{ position: absolute; } #ss-box{ width: 70px; background:#e20000;border:1px solid #dedede;border-radius:px;-moz-border-radius:px; -webkit-border-radius:px;position:fixed;left:4%; top: 20%; height:200px; height:auto; } #ss-box div{ padding:6px 8px 4px 5px; } #icon_twitter,#icon_digg{ margin-left:-2px; } #icon_linkedin{ margin-left:-5px; } #sfs{ margin-left:-5px; } #ss-get{ bottom: -20px; clear: both; color: #666666; font-size: 9px; left: 18px; position: absolute; text-align: center; text-decoration: none; } </style><br /> <br /> <div id="ss-box"><div id="ssl-box"><br /> <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&appId=186259918098008"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script><br /> <br /> <div class="fb-like" data-send="false" data-layout="box_count" data-width="80" data-show-faces="true" data-font="arial"></div><br /> <div id="icon_googleplus"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><br /> <g:plusone size="tall"></g:plusone> <br /> </div><br /> <center> <a href="https://twitter.com/share" class="twitter-share-button" data-related="agigil" data-lang="en" data-size="medium" data-count="vertical">Tweet</a><br /> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></center><br /> <br /> <center><script src="http://platform.linkedin.com/in.js" type="text/javascript"></script><br /> <script type="IN/Share" data-counter="top"></script></center><br /> <br /> <center><!-- Place this tag where you want the su badge to render --><br /> <su:badge layout="5"></su:badge><br /> <br /> <!-- Place this snippet wherever appropriate --> <br /> <script type="text/javascript"> (function() { var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; li.src = 'https://platform.stumbleupon.com/1/widgets.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); })(); </script><br /> </center><br /> </div><br /> <div style="clear:both;"></div></div>

GREEN

<style type="text/css"> * html #ss-box{ position: absolute; } #ss-box{ width: 70px; background:#06cb0f;border:1px solid #dedede;border-radius:px;-moz-border-radius:px; -webkit-border-radius:px;position:fixed;left:4%; top: 20%; height:200px; height:auto; } #ss-box div{ padding:6px 8px 4px 5px; } #icon_twitter,#icon_digg{ margin-left:-2px; } #icon_linkedin{ margin-left:-5px; } #sfs{ margin-left:-5px; } #ss-get{ bottom: -20px; clear: both; color: #666666; font-size: 9px; left: 18px; position: absolute; text-align: center; text-decoration: none; } </style><br /> <br /> <div id="ss-box"><div id="ssl-box"><br /> <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&appId=186259918098008"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script><br /> <br /> <div class="fb-like" data-send="false" data-layout="box_count" data-width="80" data-show-faces="true" data-font="arial"></div><br /> <div id="icon_googleplus"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><br /> <g:plusone size="tall"></g:plusone> <br /> </div><br /> <center> <a href="https://twitter.com/share" class="twitter-share-button" data-related="agigil" data-lang="en" data-size="medium" data-count="vertical">Tweet</a><br /> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></center><br /> <br /> <center><script src="http://platform.linkedin.com/in.js" type="text/javascript"></script><br /> <script type="IN/Share" data-counter="top"></script></center><br /> <br /> <center><!-- Place this tag where you want the su badge to render --><br /> <su:badge layout="5"></su:badge><br /> <br /> <!-- Place this snippet wherever appropriate --> <br /> <script type="text/javascript"> (function() { var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; li.src = 'https://platform.stumbleupon.com/1/widgets.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); })(); </script><br /> </center><br /> </div><br /> <div style="clear:both;"></div></div>

YELLOW

<style type="text/css"> * html #ss-box{ position: absolute; } #ss-box{ width: 70px; background:#fdff03;border:1px solid #dedede;border-radius:px;-moz-border-radius:px; -webkit-border-radius:px;position:fixed;left:4%; top: 20%; height:200px; height:auto; } #ss-box div{ padding:6px 8px 4px 5px; } #icon_twitter,#icon_digg{ margin-left:-2px; } #icon_linkedin{ margin-left:-5px; } #sfs{ margin-left:-5px; } #ss-get{ bottom: -20px; clear: both; color: #666666; font-size: 9px; left: 18px; position: absolute; text-align: center; text-decoration: none; } </style><br /> <br /> <div id="ss-box"><div id="ssl-box"><br /> <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&appId=186259918098008"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script><br /> <br /> <div class="fb-like" data-send="false" data-layout="box_count" data-width="80" data-show-faces="true" data-font="arial"></div><br /> <div id="icon_googleplus"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><br /> <g:plusone size="tall"></g:plusone> <br /> </div><br /> <center> <a href="https://twitter.com/share" class="twitter-share-button" data-related="agigil" data-lang="en" data-size="medium" data-count="vertical">Tweet</a><br /> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></center><br /> <br /> <center><script src="http://platform.linkedin.com/in.js" type="text/javascript"></script><br /> <script type="IN/Share" data-counter="top"></script></center><br /> <br /> <center><!-- Place this tag where you want the su badge to render --><br /> <su:badge layout="5"></su:badge><br /> <br /> <!-- Place this snippet wherever appropriate --> <br /> <script type="text/javascript"> (function() { var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; li.src = 'https://platform.stumbleupon.com/1/widgets.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); })(); </script><br /> </center><br /> </div><br /> <div style="clear:both;"></div></div>

BLACK

<style type="text/css"> * html #ss-box{ position: absolute; } #ss-box{ width: 70px; background:#000000;border:1px solid #dedede;border-radius:px;-moz-border-radius:px; -webkit-border-radius:px;position:fixed;left:4%; top: 20%; height:200px; height:auto; } #ss-box div{ padding:6px 8px 4px 5px; } #icon_twitter,#icon_digg{ margin-left:-2px; } #icon_linkedin{ margin-left:-5px; } #sfs{ margin-left:-5px; } #ss-get{ bottom: -20px; clear: both; color: #666666; font-size: 9px; left: 18px; position: absolute; text-align: center; text-decoration: none; } </style><br /> <br /> <div id="ss-box"><div id="ssl-box"><br /> <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&appId=186259918098008"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script><br /> <br /> <div class="fb-like" data-send="false" data-layout="box_count" data-width="80" data-show-faces="true" data-font="arial"></div><br /> <div id="icon_googleplus"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><br /> <g:plusone size="tall"></g:plusone> <br /> </div><br /> <center> <a href="https://twitter.com/share" class="twitter-share-button" data-related="agigil" data-lang="en" data-size="medium" data-count="vertical">Tweet</a><br /> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></center><br /> <br /> <center><script src="http://platform.linkedin.com/in.js" type="text/javascript"></script><br /> <script type="IN/Share" data-counter="top"></script></center><br /> <br /> <center><!-- Place this tag where you want the su badge to render --><br /> <su:badge layout="5"></su:badge><br /> <br /> <!-- Place this snippet wherever appropriate --> <br /> <script type="text/javascript"> (function() { var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; li.src = 'https://platform.stumbleupon.com/1/widgets.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); })(); </script><br /> </center><br /> </div><br /> <div style="clear:both;"></div></div>

If you find any bugs or error in this widget, feel free to add it as a comment below and I'll try to get back to you as soon as I can.

Do you LIKE this blog post?

	Pin It
Tweet

Subscribe to Bloggers Tech Updates!

Rate this post: