Floating Social Media Buttons

The widget uses Socialite to asynchronously load all the scripts and styles related to the buttons as and when the user hovers over the widget. The widget comes in mainly two versions , one with small buttons and the other with large buttons.

How To Add This Widget To Blogger
Use of this widget in blogger is very easy, if you know how to add HTML/JavaScript gadget in blogger blog, you can skip this part and add this tool as HTML/JavaScript gadget. For other bloggers, read the steps given below.

• Go to your blogger dashboard and select the blog in which you want to add this gadget.
• Now select layout from the menu at the left side of the page.
• Now you will see the design look of your blog. Click on Add a Gadget link.

<style type="text/css">.vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
 
/*
.socialite-instance { display: none; opacity: 0; }
.socialite-loaded .socialite-button { display: block; opacity: 1; }
.socialite-button iframe { max-width: 100%; max-height: 100%; }
*/
 
#syb-social-load { margin: 0 0 0.625em 0; font-weight: bold; padding: 5px; }
 
#syb-social {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
background-color: white; display: block; list-style: none; padding: 0; position:fixed; left:20px;top:200px; display: block; list-style: none;  }
#syb-social li {clear: both; text-align: center; display: block; margin: 0; padding: 10px 3px 0px 6px !important; }
#syb-social .socialite { display: block; position: relative; width: 55px !important; height: 30px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRAI-tpo9jFHMOwx7mZMyuJPd6q3IOFvSmTNtMdljhYsoCjLhMCED0ELoD5owR0272ftRZAW3d4gMtKQ_vKx3Snnd9k1RWIroQboubvRQ6xIJrMmVs-aKdcQ2VmCbCIki1cOsdu_viIKGd/s1600/custom-default.png') 0 0 no-repeat; }
#syb-social .socialite-loaded {width: 100px !important; background: none; }
 
#syb-social .twitter-share { background-position: 0 0; }
#syb-social .googleplus-one { background-position: 0 -45px; }
#syb-social .facebook-like { background-position: 0 -90px; }
#syb-social .linkedin-share { background-position: 0 -135px; }
#syb-social .pinterest-pinit { background-position: 0 -175px; }
</style>
<p><a alt="Blogger Tutorials" href="https://how-its-made2.blogspot.com/2017/12/floating-bubble-sharing-hook.html"><img src="http://img1.blogblog.com/img/blank.gif" /></a></p>

<ul class="cf" id="syb-social">
 <li><a class="socialite twitter-share" data-count="horizontal" data-via="YourTwitterHandle" href="http://twitter.com/share" rel="nofollow" target="_blank"><span class="vhidden">Share on Twitter</span></a></li>
 <li><a class="socialite googleplus-one" data-size="medium" href="https://plusone.google.com/_/+1/confirm?hl=en" rel="nofollow" target="_blank"><span class="vhidden">Share on Google+</span> </a></li>
 <li><a class="socialite facebook-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="60" href="http://www.facebook.com/sharer.php" rel="nofollow" target="_blank"><span class="vhidden">Share on Facebook</span> </a></li>
 <li><a class="socialite linkedin-share" data-counter="right" href="http://www.linkedin.com/shareArticle?mini=true" rel="nofollow" target="_blank"><span class="vhidden">Share on LinkedIn</span> </a></li>
 <li><a class="socialite pinterest-pinit" data-count-layout="horizontal" href="http://pinterest.com/pin/create/button/?description=."><span class="vhidden">Pin It!</span> </a></li>
</ul>
<script type="text/javascript"  src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script><script type='text/javascript'>
//<![CDATA[
 
        // add pinterest extension
        (function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("'+c+'")})();')},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);
 
var element ;
element = document.getElementById('syb-social');
element.onmouseover = function () {
    Socialite.load();
};
//]]>
</script>

This is it. Save your template and You are done.