UPDATE: I Have Released Updated The Version Of this widget you can get it from here.
Add Pop Out Social Bookmarking Widget with Smooth Jquery Hover Effect.
Add Pop Out Social Bookmarking Widget with Smooth Jquery Hover Effect.
1. Go to Dashboard>Design>Edit HTML and search for <head>
2. Paste this code just below it and save your template. Note: Google +1 button only works when you disable default share buttons in "Blog Posts" widget
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>
3. Go to Design>Page Elements, click Add a gadget, then choose HTML/JavaScript
4. Paste this code inside it
<style>#floatingbuttons{background:#F9F9F9;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #F9F9F9));background:-moz-linear-gradient(top, #fff, #F9F9F9);border:1px solid #ccc;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:#000;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>
<div id='floatingbuttons' title="Share this post!"><script src="http://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='http://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'><g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='stumbleupon'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='floatbutton' id='digg'><a class="DiggThisButton DiggMedium"></a></div>
<div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>
<div class="addbuttons"><a href="http://www.blogtipsntricks.com/2011/07/how-to-add-floating-social-media-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a> </div> </div>
<div id='floatingbuttons' title="Share this post!"><script src="http://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='http://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'><g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='stumbleupon'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='floatbutton' id='digg'><a class="DiggThisButton DiggMedium"></a></div>
<div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>
<div class="addbuttons"><a href="http://www.blogtipsntricks.com/2011/07/how-to-add-floating-social-media-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a> </div> </div>
5. Save your widget, refresh your blog. Now you can see the widget.
<==The left sidebar of this page is an illustration
23 comments:
sir can i adjust the widget closer to the body of my blog post? thanks
yes,you can
To adjust the width just search for left:0 from the above code and change the 0 to your size
To adjust the height search for bottom:15% and change 15% to your height
That was really gold mine article.Social media have been an indispensable one for sharing online. Got a handful of tips and learning here. Now its time for applies learning, woot.
philippine outsourcing
amazing blog and useful information is here.. simply super..keep it up.
social media Everyday I log into Facebook and Twitter and have a peek at what my friends and peers are saying. It is not uncommon for my friends to post reviews, positives, negatives and feedback regarding an experience with a local business.
Surely you have seen Facebook status updates quoting things like "Wow! That new Maccas burger is the best" or "Thanks to TGFS for their brilliant advice concerning my financial planning" or even "I love Citylink. It saves me an hour travel a day!". On the other hand, I'm also sure you have seen comments such as "Never going back to XXXXXX restaurant on Chapel St again. Food was awful and waiting stuff were rude" or "I can't believe how bad the service work was done on my car by XXXXXX" or even "Don't go to XXXXXX. They are too expensive and very over-rated".
another great post thanks dude
thanks man.really nice artical keep it up!!
this script in a add or remove the digg & other sharing site.
check this
http://www.w3mad.blogspot.com/
digg & stumbleupon button remove
Thanks for this scripts on adding social media buttons. I will try to find other button styles as well.
seo north east
Hello!
Nice post!
In my blog I described how to add Google +1 Button to every WordPress blog post in respect to iNove theme. I added the +1 button manually editing php files. Probably, it could be useful for someone. The article is here - WordPress: How to add Google +1 Button to WordPress blog post.
Thanks!
This is a big help! Thank you for sharing it! I added it to my blog...feel free to check it out: www.TheTeacherGarden.blogspot.com.
I am so much excited after reading your blog. Your blog is very much innovative and much helpful for any industry as well as for person
search engine optimization in los angeles ca
It's really a great and useful piece of info. I'm happy that you simply shared this useful information with us. Please keep us up to date like this. Thank you for sharing.
my web page: buy articles
how to align this thing to right near the scroll bar
Hi, great widget, I've just got one question. Is it possible to modify the Tweet button so it includes my username in the tweet it creates?
Hey man thanks for the widget. I hope I can direct traffic back to you so others can uses your widget as well. Thanks and God bless.
Google +1 now is really helpful on SEO in finland too many SEO guy are putting it to there site.Thanks for posting it in here.
How i I remove this from the home page, i wnat it on ly on the internal pages?
hey there, thanks for the widget
but I'm wondering, can i make it float only on a certain distance, for example from the top to the bottom of the post on blogger and not further ?
@Bhavika
You can check out this post to hide this widget from home page.
How to Show and Hide Blogger Widgets On Certain Pages?
;-) Excellent - Keep up the Good Work!
Best wishes From Cornwall, United Kingdom.
Thanks for the comment
Can you add pinterest to the code please?
Really amazing reading. Very informative, thank you
Post a Comment