[Update] Add Vertical Floating Social Sharing Widget For Blogger

It is necessary widget for blogger so that visitor directly can like the post.today we will learn how to add vertical floating social sharing button in blog.This is very cool and effective as it include many sharing button, like facebook , google plus, linkedin, pintrest and twitter.

Also see:How to add pin it button on image

Intro to widget

let be introduce you this widget and its feature.This social sharing widget has beautiful layout show facebook how many people likes it and count google plus.while moving down in the page these buttons float vertical.when you click on facebook like button or any other button then new pop up appears and can like or share if you are login otherwise you can put you username and password and share it.

How to add social sharing widget in blogger

First login to blogger account and go to the layout.

Add a Gadget of HTML

Then paste the given piece of code there.

<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/AVvXsEh-17DoZH5nzwBaVWv4qVZrfgvnCS_sXHst620_5Pw8RaoKXpZejK6VQdh1na8_T-glRXaCuyWmR2oMJn2tqhKouZkyUQ2s7ZKZeVQMDaN1eVgrlq8KUB0XKO_6N4HwNGBegDcbPDFrGu-K/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><a href="http://mx-machine.blogspot.com/2015/11/add-floating-social-sharing-widget.html" alt="Blogger widget" ><img src="http://img1.blogblog.com/img/blank.gif" /></a><ul id="syb-social" class="cf"><li > <a href="http://twitter.com/share" class="socialite twitter-share" data-count="horizontal" data-via="YourTwitterHandle" rel="nofollow" target="_blank"> <span class="vhidden">Share on Twitter</span></a> </li><li> <g:plusone size="Tall" expr:href="data:post.url"></g:plusone> </li><li> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like> </li><li> <a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="right" rel="nofollow" target="_blank"> <span class="vhidden">Share on LinkedIn</span> </a> </li><li> <a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="horizontal"> <span class="vhidden">Pin It!</span> </a> </li></ul><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>

Now save it and place the gadget any where then save arrangement.Enjoy vertical sidebar floating widget for blogger

Share this post