Mashable Like Floating Social Bookmarking Widget For Blogger

Its been a while many got impressed with Mashable’s floating social bookmarking widget and many tried and came up with a wordpress plugin. But actually people forgot about creating a floating social bookmarking plugin for blogger. So here in this post, I am going to teach how to add floating social widget to your blogger/blogspot blogs.

Floating Social Bookmarking Widget for Blogger

Live Demo

Step 1: Navigate to Edit HTML from Blogger dashboard and check Edit Widget Template. Search for ]]></b:skin> and replace it with the below code

#sharebox {
background-color:#FFFFFF;
border-color:#C1CDCD;
border-style:solid;
border-width:1px;
left:103px;
bottom:40px;
margin-top:10px;
position:fixed;
width:64px;
}

#sharebox .float {margin:7px}
.FBConnectButton_Text
{
font-size: 8px;
padding:2px 4px 3px !important;
}
]]></b:skin>

Step 2: This step involves inserting the widget functions into your template. Therefore, place the below code before <div class='post-header-line-1'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sharebox'>
<div class='float'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>
<div class='float'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
<div class='float'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='float'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div>
</div>
<a href='http://www.bloggermint.com/2010/06/mashable-like-floating-social-bookmarking-widget-for-blogger/'><font size='0.3'>Bloggermint</font></a>
</b:if>

Thats it and remember, the floating widget is visible only for blog post, so this widget won’t be visible on your blog homepage. If you need any customization on this widget, drop in your comments and you can also leave your questions at Bloggermint Answers

June 6, 2010. This entry was posted in Blogger, Tutorials and tagged . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!

86 Responses so far!

  1. Pingback: Tweets that mention Mashable Like Floating Social Bookmarking Widget For Blogger | Bloggermint -- Topsy.com

  2. This is a wonderful resource Franklin, your guides are getting good day by day and making your blog a must read for me, hope you could find a wordpress resource for this.

  3. Nice Post Dude! :)
    .-= Karthikeyan´s last blog ..Xbox 360 : Project Natal =-.

  4. Good Job dude! I like your way of explain things. Simple but effective. Have a nice day.
    .-= Nicola´s last blog ..Top 10 Freelance Writing Job Websites =-.

  5. @Nicola and @Karthikeyan – Thanks for your encouragement.

  6. Informative. But why couldn’t find that floating thing in this site? May be you don’t like it?
    .-= Dadhakumar´s last blog ..Carefree Scissors =-.

  7. @Dadhakumar – Not exactly, I came up with this tutorial, as many requested me for that. I already have sharing icons at the bottom of the post, so I found it unnecessary

  8. Interesting resource Franklin, Thanks for sharing.
    .-= Arafat Hossain Piyada´s last blog ..My New Theme, Issues and Your Help =-.

  9. @Arafat – Thanks for your compliment dude :)

  10. Pingback: Blogger Has Finally Added Share Buttons in Blogger Draft | Bloggermint

  11. Interesting blog

  12. It’s really awesome, But it overlaps the screen in low resolution Pcs
    .-= TechGyo´s last blog ..Register or Find World Records In The Universal Record Database =-.

  13. @TechGyo – Yes it overlaps, I am working on it. But only few are having low resolution PCs :D

  14. lukesdyer

    Is there a way to place this into an html page?

  15. @Lukes – Yes its possible. Just remove if conditional statement and use it on your html page.

  16. thnx a lot for the share!!! i used it and is great!!!

    TheSolution
    .-= {ADMIN}Solution´s last blog ..FAR CRY =-.

  17. Listn, I want to show this floating widget on my blogger homepage. For this What should I do..?
    .-= Rajesh´s last blog ..Dreamhost Promo code and coupon for July 2010 =-.

  18. @Rajesh – Remove the if conditional statement from the step 2. Thats it!

  19. nice tips, is now available at my site. thanks!
    .-= Ana´s last blog ..MGA PULIS KAMI =-.

  20. thanks.
    it looks great on my funny videos blog.
    .-= funter videos´s last blog ..Luckliest People Compilation =-.

  21. Thanks for such a nice tutorial.. However I am not happy with the way it is being displayed on my blog… When one scrolls down, the widget doesn’t move with the page and so looks weird. Can you please take a look at it ?

  22. @Anshul – I can see the widget is working fine on your blog.

  23. Thanks, finally got this working, BUT, the Digg button doesnt show up ….., just the stumbleupon, buzz and tweet….

    Also, how can I put the counter button for Facebook in there (like the tweet and buzz buttons) instead of the compact facebook button

    Gramkin Blog

  24. Thanks bro!
    .-= John´s last blog ..Links for 2010-07-15 Digg =-.

  25. What are the parameters I could change to make this “floatie” move over more to the left. Thanks again man – great tip!

  26. @MGD – The facebook share button that I used comes with the counter, once you make a share you will be able to see it. Then I haven’t added digg to my tutorial, if you need you can get it from http://about.digg.com/button

  27. @John – Increase the left px value in the CSS.

  28. Thanks that worked….great tutorial!

  29. @MGD – Thats good

  30. This is a really best tuts
    .-= robin´s last blog ..10 Best Bloggers Across The Web =-.

  31. hey, i can see only twitter button and on another browser i could see twitter, fb and THREE buzz buttons……how was tht?

  32. @Malhaar – Which browser was that?

  33. it is chrome….

  34. @Malhaar – I could see its working on Chrome, might be some prob on your side.

  35. Just wanted to say thanx for bringing this to the blogger platform! and for the simple and complete tutorial. Keep up the incredible work!

  36. @D.Ferretti – Thanks, hope to bring even more new stuffs for blogger platform.

  37. simple tutorial.. nice one :)

  38. thanks … but not working for me …. its breaking the page when i add this widget … c here Blogosys

  39. @Blogosys – Paste the step 2 code after this <div class='title'>

  40. how can i also add digg and delicious into this floating bar so as to have 6 things..
    Your help would be much appreciated :)

  41. One more request.. Is it possible to use official twitter script instead?
    (i saw an example on this site: http://blog.xmlgadgets.com/blogger/delicious-bookmark-button-counter-for-any-website-blogger-blog/)

    And i would love to use this image for delicious, which i have come across on this site here: http://www.anshuldudeja.com/2010/06/delicious-bookmark-buttons-with-counter.html
    (the image before which its written- A normal counter button like retweet button)

  42. hi my blog
    http://campbuzzz.blogspot.com/
    i tried our code but its somehow the floating buttons r not coming i did xactly the way it has been told here ….can u plz help…

  43. I’ll be sharing this with my readers in next week’s installment of top blog posts of the week.

    Nice tutorial ;-)
    .-= Udegbunam Chukwudi´s last blog ..StrictlyOnlineBiz Top Blog Posts Of The Week 27 =-.

  44. its nt working for me… can u plz help

  45. i wana to know how to add page navigation to ii

  46. Pingback: StrictlyOnlineBiz Top Blog Posts Of The Week 28

  47. It is a great tutorial! I wasn’ t looking for this information but I find it useful.Anyway I need the other one, the wordpress plugin, but now that I know that exists, it will be easy to find it.
    .-= Jorjette´s last blog ..Diferenţa dintre make money şi câştigă bani- 5 lecţii =-.

  48. hey mate .for different browsers the website template differs, so we have to code according to the browsers and this features is avialble in digg digg plugin na??
    .-= sureshpeters´s last blog ..SEO – A info for beginners =-.

  49. hey frank, thanks man,was looking for this widget very badly and found out on your blog,before this i used a template provided by you .

  50. Pingback: ShareBar | Floating Bookmarking Plugin For Wordpress | DigiSecrets

  51. Pingback: ShareBar | Floating Bookmarking Plugin For Wordpress | DigiSecrets

  52. I was searching for social bookmarking widget for my blogspot blog and i got this, fortunately i like the widget but it will be great if you’ll tell me how to add only on post page not in home page.

  53. Your widget is coming over my post, see my blog post. I want this widget to be float on a left side of my blog and it should touch monitors screen, how to do it?

  54. Fix that error soon right now i’m removing it from my blog. Also i saw one link of this post came beside my post title, fix all these errors.

  55. Looking great on my blog http://www.tech2go.in
    Thanks a lot!!!

  56. i’ve put on my blog
    Thank you very much

  57. Pingback: How to Floating Social media button for blogger

  58. it appears at where header line 1 location is but it is not floating, just stuck to the same position. i’ve removed it. any clue why it isn’t floating?

  59. Pingback: Magista - Free Premium Magazine Blogger Template | Bloggermint

  60. Hi nice widget! Can I adjust the widget to move it to the left a little far more? Because it’s distracting to the readers of the post. Can you fix it please. Thanks a bunch! Make it at least not touching the post and the page body. Thanks

  61. samantha bradley

    I am trying to put this on the Smash Mag template and cannot get it to work. I would like to have this when my new layout goes live on Saturday. Can you please help me with this and my facebook question posted on the Smash Mag template comments.

    Love both of these designs.
    Samantha

  62. Thanks so much, i have done it on my Blog

  63. nice! i use this code for my blog! tq very much!

  64. it look awesome on my site thanks bro

  65. Hi! Can we change the google buzz button into the Google Plus one? If so how?

  66. I already have this gadget but its in left hand side how do i add it right hand side?

  67. how do you add google +1 button in the widget?
    please reply!

  68. How did you make the brown box-div tag ?
    pleas teach me~! I’m using the blogger…

    I’d like to use Objective-C code in the box.
    can I ?

  69. Pingback: How to install Floating Social media buttons to Blogger | Templaget Get

  70. Simply awesome…..
    I m definitely going to use this on my blog….
    thanks a lot

  71. Great share bro…thnxxx for share among us.Keep going :)

  72. pls help, why a i cant see this on my blog
    http://wladan.blogspot.com

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>