ShareThis

How to add Floating Social Media Buttons for Blogger


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.

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

Like anyone of the below


Then follow the below steps

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.

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 enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

1 comment:

  1. The wage gap also undermines women's retirement security, which can often be based on earnings while within the workforce Pay Day uk some new house buyers might be choosing fha loans to create it simpler to be eligible for a a larger home loan.
    Also see my web page - Pay Day uk

    ReplyDelete