Also see:How to add pin it button on image
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.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 HTMLThen 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('http://3.bp.blogspot.com/-lGVQZowcc2k/UCeUCQ3eqoI/AAAAAAAAHH4/BV8ILPyDIGY/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://5gblogger.blogspot.com" alt="Blogger seo 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">//</script>Now save it and place the gadget any where then save arrangement.
