LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Social Sharing / Website / Website Social Sharing » Add Smashing Floating Social Sharing Widget For Blog And Website

Add Smashing Floating Social Sharing Widget For Blog And Website

Add Smashing Floating Social Sharing Widget For Blog And Website

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.

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...
Recommended For You:
Suggestions On Web Design To Effectively Narrate The Story Of Your Brand

You Like It, Please Share This Recipe With Your Friends Using...

16 Responses to “Add Smashing Floating Social Sharing Widget For Blog And Website”

  1. Gurmeet singh says:

    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

  2. Jon Haines says:

    So I guess my question should be, is this widget available for the new template format?

  3. mandy kleijn says:

    thanks woked a treat

    http://mkleijn47.blogspot.co.uk/

  4. Akram says:

    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 ?

  5. Full online says:

    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

  6. Mahesh Verma says:

    Awesome thanks for sharing this 🙂

  7. Really Awesome Widget. I need it. thanks for sharing this 🙂

  8. Prince says:

    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 🙂

Leave a Reply to Akram Cancel reply

Your email address will not be published. Required fields are marked *