Now that most blogs are starting to pare-down their social media buttons and go with the dynamic widgets offered by the three or four largest social media sites, you’ve probably seen a few sites with a floating box that hovers along the left side, staying in the view port as you scroll.
How do you make one of those?
If you don’t mind making your own from scratch, Here is a great tutorial. His floating box looks nice, moves smoothly and is very customizable, since you’re adding it directly to your theme.
Features:-
1.) Facebook Like Button With Count.
2.) Google +1 Button With Count.
3.) Tweet Button With Count.
4.) LinkedIn Button With Count.
5.) Shaded Background.
6.) Fixed Position At Left-Down Space.
6.) Fixed Position At Left-Down Space.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.
<style>#floatingbuttons{background:#aaa;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f2f2), color-stop(1, #aaa));background:-moz-linear-gradient(top, #f2f2f2, #aaa);border:1px solid #808080;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0%;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);}#floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style><br /><div id='floatingbuttons' title="Share this post!"><script src="https://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='https://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'en-US'} </script>
<g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="https://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div></div>
Customization:
1.) Change bottom:15% To Your Desire.
2.) Also Change left:0% To Your Desire.
3.) Now Enjoy...
Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “id”.
this error are come what can i do
Bug Fixed…!!!
Now You Don’t Have To Change Your Template.
Please Read Again.
So I guess my question should be, is this widget available for the new template format?
This Is Now Updates For New Templates Of Blogger With Simple Installation. Please Read The Article Again.
thanks woked a treat
http://mkleijn47.blogspot.co.uk/
You Are Welcome…!!!
i want something something like the right side twitter g+ gadgets
not like the left side ones
the cool ones in the demo on the right hand side
how do this ?
Check That Awesome Widgets Here…
Facebook, Twitter, Google Plus, Subscribe J-Query PoP Out Widget For Your Blog & Website
dude when i make my window smaller this gadget still visible i want it only when some 1 on full screen or maximize window.
can u tell me the tweak
Bro, This Is A Fixed Widget… You Can Do This With This…
Awesome thanks for sharing this 🙂
You Are Welcome…
Really Awesome Widget. I need it. thanks for sharing this 🙂
You Are Welcome…
This is a fantastic widget. I was searching for floating social sharing buttons from an hour. I found many widgets. But all are useless suddenly your name came in my mind, and I got this beautiful widget from your site. It looks fabulous. Thanks, Hassan Sir 🙂
Welcome here and thanks for using our code and sharing your view.