Social bookmarking elements after each blog post(includes Stumbleupon,Twitter,Facebook)

Update:-Facebook Icon Added
Social Bookmarking Icons for Blogger - The social bookmarking blogger widget will add neat social bookmarking icons below each of your posts so that your readers can bookmark your posts at various social bookmarking sites like digg,stumble,magnolia,delicious,google,yahoo etc.. This is the updated version of my previous post post on the same.. in this i have added a new stumble upon button.If you use this you will get the bookmarking icons after each blog post as you see on my blog here . To get this working on your blog do the following steps..

1)Goto Blogger Template>Edit HTML back up your template and expand the widget templates..
2)Now in your template find

</head>
and just above that paste the following code
<script src='http://blogger-plugins.googlecode.com/files/bkmrk_hover.js'></script>
<style type='text/css'> .bookmark img { border: 0; padding:0px; } .bookmark a:hover { position: relative; top: 1px; left: 1px; } </style>

3)Now find
<p class='post-footer-line post-footer-line-3'>

Or if that is not there then find
<div class='post-footer-line post-footer-line-3'>

and place the  following code  just below any of these lines[whichever is present in your template].
<!-- Social Bookmarking Icons Start  www.bloggerplugins.org-->
<span class='bookmark'><table align='left' border='0' cellpadding='0' width='100%'><tr><td style='vertical-align:middle' valign='middle' width='30%'><div expr:id='&quot;sbtxt&quot;+data:post.id'>Bookmark this post:</div><script type='text/javascript'>showsbtext(&quot;sbtxt&quot; + &quot;<data:post.id/>&quot;,0)</script></td><td><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,19);&quot;' rel='nofollow' target='_blank'><img alt='StumpleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN1h_b59EeC2n-7TFQ6D9bAQjnVfVIfI_yvNwzEFJoCL9cvxEtiGo_5fPlp4FblRTW3JP9mE8wBJV9qlBbLkGAtmqsd8LvNniwQbjeK9D_Bf2OfEy6dgHHHcTn7IvacCuu3JuqAm-3p1E/?imgmax=800'/></a> <a expr:href='&quot;http://digg.com/submit?phase=3&amp;url=&quot; + data:post.canonicalUrl' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,1);&quot;' rel='nofollow' target='_blank'><img alt='DiggIt!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4k5Osnx6wFreEpljH5MNS-VptyDgHLe3uYk0b6qYRw0Ca_m-BANUf3LcGoqweHDFtwCJeBCVb9d58tQqIMHxJm0gmXsCkM7nP0mAEzisWxPJ7qugOiAdn4_pP4390RS0jYYCkaVM3-p0/?imgmax=800'/></a> <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,2);&quot;' rel='nofollow' target='_blank'><img alt='Del.icio.us' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqm3QKfF420Rh2YoUTwza96IXnHE5v3dthOzIgWk-pH6QrEwKob7U3GMwlTEs9xhezD5WGfVrHrA4pDYKN90DSl1moBOjklGoDHj5CIjZituUAGbdbJJP9BI73kW0dLrJ8QlByaWQ8mF0/?imgmax=800'/></a> <a expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=&quot; + data:post.canonicalUrl + &quot;&amp;Title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,3);&quot;' rel='nofollow' target='_blank'><img alt='Blinklist' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPG6MW7VHD4PiBsfIEYbC2TlFJlHlwcanaTIqFpPYgNDRvdAv9ZKtfdg9FcnlN3gm_UamV51169ik1-s6ZzAqf8JTTOlmijHTOxuFHIquFZ9vjmeZHl-JYzqYt67Mg09zuWCJzUkNM69s/?imgmax=800'/></a> <a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.canonicalUrl + &quot;&amp;=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,4);&quot;' rel='nofollow' target='_blank'><img alt='Yahoo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0_c0B4ekz7lVRB0J01bxuiq_K3Xa3EU-PSp-S3-Cp27Rzs0IOfTirN6FFf8WoseVBMgy8t4ewbledUCqcEO6yzN-tdERdTiisUKMy5iBiDPyKvjvKzVqo1bmDd6dEwNXqq2ZvYdp36H8/?imgmax=800'/></a> <a expr:href='&quot;http://www.furl.net/storeIt.jsp?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,8);&quot;' rel='nofollow' target='_blank'><img alt='Furl' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0DA9WejkyOMXlO5DwTlzP2yYAzHmWAHdnMPLyTCX1cxq_ngsd7ac_2PPoN_eX3TFzvHaD-4rmp_OIA-qC6oaS2Et_0aDVeNyCL-X01LoQy9fgNEaPRYpr1w7GLffj32LkeXiqWskLQuc/?imgmax=800'/></a> <a expr:href='&quot;http://www.technorati.com/cosmos/search.html?url=&quot; + data:post.canonicalUrl' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,9);&quot;' rel='nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5P0PFib8IRDaF7K7lbd8SRC059crrRAkAr4LHgrV_P2V_hAMJCB5yoE8OH9H29OMYqWD1wbL8m3JAtDBAJZego2tap38VbzqIlTEtnkdVLVHPo6-Dfwe8b3iU8dk2IXh8nptcJgQDKLc/?imgmax=800'/></a> <a expr:href='&quot;http://www.simpy.com/simpy/LinkAdd.do?href=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,10);&quot;' rel='nofollow' target='_blank'><img alt='Simpy' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz-KJTASWHfIo3mjZx45jgCFhvz98SH0t1oL1XtpIQ7S5xETbGls2iXHOhnWV9yrbOX84ynqilubDDL9pZfFqQ6Abea05vIu0QbM_gqaeI7GcAjbfldsPGoC3s9RQLGrGB_P3LLqyLK1s/?imgmax=800'/></a> <a expr:href='&quot;http://www.spurl.net/spurl.php?url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; +  data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,11);&quot;' rel='nofollow' target='_blank'><img alt='Spurl' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQKkRXrMRnYkKx7X6j5co04xpNJOsRFhlNT6SP1rRmJBUHjXnpgnIT9mZAOcB2TZgTD1Vst4Y_8mkaNoC-bHbUaWIUzoZX8w8o2HHw-UAwEDbAey_1PlgJUnPLOuviVGSheHumE0BAc1w/?imgmax=800'/></a> <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,17);&quot;' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1A-FqU0hhEc_95x1k_j-PCVRK3bxfhNnkXfqNlefgBXRolOPcGGMiCnJdcbpTECA8HRXlBnAbzn2oYl7HaxBRLwLF3_ftKAmzA_C9M6eRg3IngnEliuFhVY89oQRVyNlVt_pENs5a91I/?imgmax=800'/></a> <a expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.canonicalUrl +  &quot;&amp;title=&quot;+data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,20);&quot;' rel='nofollow' target='_blank'><img alt='Google' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc59g2ifAsg_ypzoJT2mFbNmG9SMMPiVgz5x6ctbPEQu7QfgcD9Cb9ErrU4tdzSSare6FtLUUJ-rDqHcDnue2U4VXTm8TCGGZv8V6lkXg-vM9p5fpcAFjI9IdjlBP9fSC6b3f9m0W51eU/?imgmax=800'/></a>
<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
 <a expr:href='&quot;http://api.tweetmeme.com/share?url=&quot;+data:post.canonicalUrl'  expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,21);&quot;' rel='nofollow' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_r2vDFJNDo-KXg4pfMusRaViGQqpnJWlaR5s-jgwq-w2tmLMmMMcU4nT-nzmqPKIReL8nzsmL2aLTvCH3DOKfITeIxhyyagSGsJ8EfJErgkV33zZIIRQ-9Q0-PIDfnvgwgFMJOx6_YaE/?imgmax=800'/></a> <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,22);&quot;' rel='nofollow' target='_blank'><img alt='FaceBook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOlvgk2bfyRBEycZHE-xtZUQoT0YpwiGVC-FUQGAG0pc7JlG3Ts-y3BeT85NhuKfUhqfSfgJ0tDT1kzjMDrg3YZ4aXphaFJa-JAsN5VbpJeUt3TNWsD_DMpiMaTNJ98rG9oQQrjMI4b74/s400/fbicon.png'/></a>
</td>
</tr>
</table><br/>
</span>
<!-- Social Bookmarking Icons End  www.bloggerplugins.org-->


if every thing went correctly you should get the bookmarking set on your blog.. and also some mouse over animation as you see on the icons below this post.. Now you can remove the unwanted buttons by removing the corresponding <a expr:href=....</a> tag.
You can also change the button images if you like.I am looking for some better bookmarking icons(especially for that stumbleUpon).If anybody has it please leave a comment here.
Credits to Beautiful Beta for this awesome JavaScript

Comments

  1. cOOL dude

    liked u r ""buy me a coffee icon""
    :D

    dude is uggestion , u r one add is lying at bottom .
    try it at some other place :)

    ReplyDelete
  2. Hi there ... I added the "buy me coffee" thing :) ...thanks ;)

    Got another doubt too... I've these square rings around the social bookmarking buttons. How do I get rid of them? :-?

    ReplyDelete
  3. Thanks SO much for this tip. I've searched around and found other great ideas, so now I'm a subscribed fan!

    ReplyDelete
  4. thanks for the comment and the subscribtion...

    ReplyDelete
  5. It;s Really Awesome Reading Ur Post Keep Up The Gud Work Bro .. Njoy !!!

    ReplyDelete
  6. Hey, this is exactly what I have been looking for for my blog. Can you let me know if this still works?

    Thanks a lot,

    Charlie -

    ReplyDelete
  7. @charlie..

    Off course this works like charm..

    ReplyDelete
  8. i've done everything as mentioned.. but still, i'm getting error: "your request could not be completed." and i'm given a error code as well.

    ReplyDelete
  9. Works like a charm! Love your blog... have used 3 of tricks so far!

    ReplyDelete
  10. thanks very much,it's really working in my blog (http://dyharga.blogspot.com)

    ReplyDelete
  11. you are welcome.. i think you should remove the borders around your images to make it look better..

    ReplyDelete
  12. hi there, thnks 4 ur comment at my blog. and yup, it's definitely look better w/o the borders.
    1) not sure how to remove them
    2) can't seem to find 'body {'

    hope u can help me! would be much appreciated!! =)

    ReplyDelete
  13. hi Anne, you can add that css part at different places i just asked to post it in a particular place just to avoid confusion..

    just try to find ]]></b:skin> in your blog template code and the place that css part just above it..

    hope it helps..

    ReplyDelete
  14. Gr8 tip !!

    Where were your blog till today !!

    I loved it a lot !! Going to try this tip !


    Thanks !

    ReplyDelete
  15. he he it was here all the time.. but i didn't care much for optimizing it for search engines..Now trying to optimize it for better search engine results.. By the way how did you come to know of my site?

    ReplyDelete
  16. Google !

    I arrived here via google !

    ReplyDelete
  17. I can't seem to find the step 3 line of code in my blog's code. I use a slightly adapted template from blogger. Is it located in the /*Posts area of the code?

    ReplyDelete
  18. Just find

    <p class='post-footer-line post-footer-line-3'>

    This is definitely there in your template..Just expand your widget templates and look for it. and then follow the procedure..

    ReplyDelete
  19. nice.. but you haven't implemented that properly.. adding the code as a sidebar widget wont give you bookmarking icons like on my site.. you will have to add it to your template using the method i have mentioned..

    ReplyDelete
  20. Thanks Aneesh! I found the code (I kept skipping over the expand widgets step) and it installed perfectly. It looks great!

    ReplyDelete
  21. I have done what you said and it altered my site. It worked but messed up the template. Some of my posts titles are screwed up when I put the code in. I dont know what happened. I did everything correctly but for some reason it messed up how my posts looked.

    ReplyDelete
  22. i don't see the code on your site..i don't see any reason why this should mess up the template..You may not have followed the instructions properly.. if you need it fixed feel free to contact me.. sorry for the late reply.. i have classes now.. so little late..

    ReplyDelete
  23. Aneesh, FYI - The server where image icons are hosted seems to be down and so the icons are not dispaying.

    ReplyDelete
  24. thanks for the info.. that server went down just now i hope.. as i am using the same bookmarking icons.. i can't use googlepages to host these images as the googlepage websites that i use already exceed the bandwidth.. you too might have seen that when you used some of the widget installers..So i am trying to move it to a hosting account..Now i have uploaded the images to my godaddy free hosting account.So it will work perfectly for now..

    ReplyDelete
  25. Thanks - It's probably a good idea to suggest the users to upload the images on a server e.g. imageshack.com of their choosing so they don't have future problems

    I seem to have some spacing problems with my curent icons - not sure why?

    ReplyDelete
  26. you must add padding:0px; to the bookmarking image's css part..something like

    .bookmark img { border: 0;
    padding:0px;
    }

    But still your icons may not stand in one line as the wrapper width is less... in that case remove 1 or 2 of the icons..

    ReplyDelete
  27. hi genius. :)

    i have problem. i have a new 3 column template and the 2 sidebars are really too narrow. some of my widgets cannot fit it.

    and the center where i put all my blogsposts needs to be trimmed down. what should i do about it?

    ReplyDelete
  28. i just examined your template..First of all make a backup of your template and follow these instructions

    and by the way don't call me a genius. he he .. :)

    ReplyDelete
  29. Love this Aneesh keep them coming you are a blessing to us all

    Remain blessed

    ReplyDelete
  30. thanx for the widget was looking for it,lloks nice at my blog.

    ReplyDelete
  31. Thank you Thank you Thank you! So helpful!!!
    @Iago's Mom... I just commented out 2 of the icons that didn't fix in a row in my layout, so one day if I use a wider layout, I can get the extra icons back.

    Thank you again Aneesh! You're the bomb! Happy bookmarking all :)

    ReplyDelete
  32. hello plz help.
    i am not able to find
    "post footer line"
    where it is?????
    plz tell me!

    ReplyDelete
  33. you are using a lil bit complicated template.. i think it should work for you if you place the code from the text file just above <div class='postmetadata'> in your template.If you are still having trouble feel free to contact me..

    ReplyDelete
  34. I've enjoyed thoroughly your blog and thank you for the social booking marking script.

    I implemented the scrip on my blog ...

    but there is one feature that I like on yours that does not work on mine and that is

    when I hover over a button the "bookmark this blog" does not show the name of the button.

    Can you tell me how to do this?

    I hope I was clear.

    ReplyDelete
  35. hey in the social bookmarking ...the option 3 is unclear ...i couldnt find the thing in the edit html page

    ReplyDelete
  36. RIGHT on!! After HOURS of work your simple explanations FINALLY made my life easy!!

    ReplyDelete
  37. Hmm, doesn't work for me. I keep getting Blogger error codes.

    ReplyDelete
  38. That was one of the easiest, no brainer Blogger hacks I've used. Thank you!

    ReplyDelete
  39. Hi Aneesh, this is cool! I've got it installed and it works fine on Firefox 3.

    However, I've got a lil glitches when it comes to IE7. On the front page, the day of post for the first post is fine, but the subsequent posts have got the first letter of the day chopped off, e.g., 'Friday' becomes 'riday'.

    Another problem on IE7 is the counter for the number of comments. The number is wrong when each blog post is viewed individually.

    Thanks for your attention and your help in advance. :)

    ReplyDelete
  40. I have sovled the problem myself by adding an additional line after the code, i.e., < BR CLEAR="RIGHT" >< /BR >

    I think this is helpful for those having the same problem on IE7. :)

    ReplyDelete
  41. @luna.. you didn't get the hover part working because you didn't follow the first step.. that javascript is responsible for the mouse over text..

    ReplyDelete
  42. I couldn't find (p class='post-footer-line post-footer-line-3')
    so I placed it under (data:post.body/)
    instead and it worked. Thanks.

    ReplyDelete
  43. Thanks, it works well for my blog!

    BTW, it would be great if there's a related post plugin :)

    I'm waiting for your next wonderful plugins...!

    ReplyDelete
  44. Aneesh

    Thanks for your reply.

    I added the line and it is working.

    Good luck in school and I appreciate the job you have done.

    A lot of time and energy you've spent and it is truly appreciated.

    ReplyDelete
  45. Thank you! Very simple and easy to do. Took all of 5 minutes!

    One problem though - now for some reason, my comments under my post are off track.

    Any ideas on how to fix this - please?

    Thanks, Jody

    ReplyDelete
  46. I fixed my problem -

    I tried to do what CKII said but it didn't work for me.

    What did work: I added TWO
    's after the code.

    Thanks Again.

    ReplyDelete
  47. Hi,

    I am using a template from blog crowd. I am unable to use above code, Can you help me.

    ReplyDelete
  48. Hey! I did this and it automatically hid all posts except for the most recent. I want to use it but I want more than one post to show up. So I switched back to boring template with no bookmarking.
    I wasn't able to find 2nd instructions tag (won't let that html in comments) so I put the js code after the body tag as someone in comments indicated worked for them. Which caused only one post at a time to show up on blog. Some help?
    .
    .
    .
    .

    ReplyDelete
  49. Error interpreting blog template

    Invalid data reference post.id: com.google.layouts.framework.widgetview.GoogleMarkupException: No dictionary named: 'post' in: ['blog']

    I keep getting this no matter what I do. Any help would be great!

    ReplyDelete
  50. Sorry for the extra comment but I figured it might help to tell you I also don't have any code that begins with < p class=etc...

    The closest thing I have is

    < b:section class='footer' id='footer'/

    ReplyDelete
  51. could not find the post footer line help me out.

    ReplyDelete
  52. it worked i just put it under

    data:post.body/

    and it appeared

    excellent work keep it up

    ReplyDelete
  53. Great post Aneesh, i have used this in ma site, really cool and worth it, thanx mate..

    ReplyDelete
  54. This is exactly what I was looking for for my new layout - thanks very much!

    ReplyDelete
  55. what should we do if there's no
    p class='post-footer-line post-footer-line-3'
    ?

    ReplyDelete
  56. Hey there,

    Good stuff! Would you be able to add a facebook icon, though? Or maybe give us an update on how to do so?

    Cheers!

    ReplyDelete
  57. I couldnt get the file..

    http://lightedpen.blogspot.com/

    ReplyDelete
  58. Thank you very much
    i done it successfully on my blog http://trackblogging.blogspot.com

    ReplyDelete
  59. Can you add a facebook icon as well???

    ReplyDelete
  60. i love this way to put bookmark in posts so thanks u much..ill write this to my romanian friends who dont know more about that..ill give a link back to your site:)

    ReplyDelete
  61. Thank you for this post. I have been looking for this. It is whats lacking in my blog... Thanks again...

    ReplyDelete
  62. Hi,
    Where is the code after the step 3?

    ReplyDelete
  63. Hey buddy thanks for the guide . I have gone through it and finished the task .

    ReplyDelete
  64. HAPPY NEW YEAR & thanks, just added it and my blog keeps getting cooler :-)

    ReplyDelete
  65. Thanks for the informative post, worked fine on one of my blogs, but on another the icons displayed vertically..possibly user error on my part. Another option could be to insert the code in the Settings, Formatting, Post Template.
    Don
    http://www.adsenseblogger.net

    ReplyDelete
  66. thanks m8. i implement this widget on my blog.

    ReplyDelete
  67. Please include the new Google's Favicon here

    ReplyDelete
  68. Thanks so much for this easy to follow piece.

    I had two issues which came up though.

    1) Direction number 3 (did not start with the same as my template, but was able to just search the 2nd half for the line...

    2) My template spacing is off and the bookmarks were on top of my labels......I'll probable just add a blank line to remedy.

    ReplyDelete
  69. I still can't get it to work. [sigh] :o(

    ReplyDelete
  70. Its working for my Blog. Thanks for your help, I was struggling with this since so long.

    Thanks A lot.

    Regards,
    Atul

    ReplyDelete
  71. But I don't have that p class line.

    ReplyDelete
  72. For some reason, the

    p class='post-footer-line post-footer-line-3'

    does not exist on my blog HTML so this won't work. Is there any other code I could use?

    Thanks so much. :o)

    ReplyDelete
  73. The p class= line is no longer there in the new templates. So how do I make this work?

    ReplyDelete
  74. can you explain what you are replacing step 3 with please?

    ReplyDelete
  75. They displayed vertically on mine too. Am really gutted because I love this widget!

    ReplyDelete
  76. Thanks so much, may it be useful . . .

    ReplyDelete
  77. Please also add twitter!

    ReplyDelete
  78. which file do i add? i can't find post footer. *sigh

    ReplyDelete
  79. Not able to find p class='post-footer-line post-footer-line-3'

    insted i got the bllow line in my blog, is this same?

    div class='post-footer-line post-footer-line-3'

    ReplyDelete
  80. Aneesh have you got any way to include in twitter?

    ReplyDelete
  81. Thanks a lot.I just added the bookmark widget at the end of each of my posts!Worked perfectly :)

    ReplyDelete
  82. Hey there,

    I'm trying to do this to my blog, but I can't find:

    post-fotter-line... etc

    I've expanded widgets, and I'm using ctrl F to find it, but nada. Any help? Thanks.

    ReplyDelete
  83. hey thanks a lot man

    ReplyDelete
  84. u rock bro, this is THE blog where I can find the collest tips and implement them in the easiest way.

    Take care and keep it up...

    ReplyDelete
  85. For some reason the line came out vertical instead of horizontal help?

    ReplyDelete
  86. which is the code for twitter? can you make an icon for bligg from www.blogoree.ro ?

    ReplyDelete
  87. Thank you so much! You really have given us a great tool. I REALLY appreciate your work:))))

    ReplyDelete
  88. thanks...it tips, I can used it

    ReplyDelete
  89. This tool is brilliant but has stopped working now, looks like it has on your site aswell (images not showing). Would this be me or something at your end?

    cheers
    SN

    ReplyDelete
  90. @Strange Nature i had modified my .htaccess file at files.blogggerplugins.org and this thing got weird.. thanks for notifying me..now changed it back and everything working fine.. by the way i would suggest that you download these files and upload it yourselves to some googlepages or something. Though these image are so small in size it now consumes me more than 30 GB of bandwidth per month and that is the reason why i moved to host gator.. :(
    This thing won't go offline as long as i have money to pay my hosting.. but it is a little too high. about 120$ per year...:(

    ReplyDelete
  91. works after the
    div class='post-footer-line post-footer-line-3'
    code for me, thanks!

    ReplyDelete
  92. @ Aneesh. Will it be a case of saving the image files to a host and then altering the script (in my html) so the targets are pointing to the new destinations? Or would I have to modify anything else? I am happy to do this to save your colossal bandwidth. Thanks again.

    ReplyDelete
  93. p class='post-footer-line post-footer-line-3'>

    IS

    div class='post-footer-line post-footer-line-3'/>

    IN THE SAND DOLLAR BLOGGER TEMPLATE

    ReplyDelete
  94. Excellent blog. I just used this information about social bookmarking buttons on my blog. no problem found. Thank you so much :)

    ReplyDelete
  95. Will you be adding a twitter icon to social bookmarkings?

    ReplyDelete
  96. yea i have added a twitter icon now.. Read about it @ my new post

    ReplyDelete
  97. Aneesh

    The social bookmarkings show on my blog and I wanted to ad twitter ...

    but ... I can't even find the original script in order to add twitter.

    I am confused.

    Can you help?

    Thanks so much

    ReplyDelete
  98. @luna

    search for digg in your template.. you will see the social bookmarking code

    <span class='bookmark'>
    bookmark codes
    </span>

    delete all of it and add the new thing..

    ReplyDelete
  99. Hey Aneesh thanks for the super tip.
    For step 3 i used data:post.body/ and it worked like a charm on my blog. thanks again !!! :)
    www.marathikavitablog.blogspot.com

    ReplyDelete
  100. Thanx a lot. It works great.

    ReplyDelete
  101. thanks.. it works just what i wanted

    ReplyDelete
  102. Widgetnya keren banget. sudah saya pasang di blog baru saya yang baru saya buat. mudah dan cepat. Thank You

    ReplyDelete
  103. Hey I love Your Widgets. I have a suggestion. You should really add a Facebook button. I know lots of people who use Facebook. Another great thing, would be a subscribe by RSS feed button. I'm going to subscribe to your blog right now.

    ReplyDelete
  104. I havent yet included the above bar to any of my bloggers accounts, but i think it would have been ideal to find a plugin that does bookmark onto social networking site automatically.

    ReplyDelete
  105. It works fine.

    currentaffairsquiz.blogspot.com

    ReplyDelete
  106. @Ramarao,i have added the facebook button now!!

    ReplyDelete
  107. @Ramarao ,javascript is required to trigger those hover texts..If you dont want to display the hover texts,then don't include the javascript in the head section!!

    ReplyDelete
  108. Hi Aneesh just great ,,tanx for that one to, i got it in the first attempt ,,wow nice one ..

    ReplyDelete
  109. Thanks for the information
    it was really healful

    ReplyDelete
  110. Hi, I tried this and it worked but then my banner disappeared. I am scared to save it until I know my banner stays. Any suggestions? Thanks!

    www.missymaintains.com

    ReplyDelete
  111. Oh My God, I finally found an example that works. Thank you so much!!!!!!!!! You have no idea how many sites "try" to offer this process only for the buttons to not work, or some other problem. You are a GOD. I have look for 3 days straight for this information and wasted hours upon hours researching and attempting others guidelines, and yours is the only one that works. Thank you so much, I'm going to finally go to bed now!!!!

    ReplyDelete
  112. help!!! i just want to dislay social bookemarking elemts is indidivual post not in the home page

    www.beyondmydiary.tk

    ReplyDelete
  113. This worked perfectly!!!! Thank you very much!!
    http://mari-adventures.blogspot.com/

    ReplyDelete
  114. how to change color text i cant place where i suppose to add text color.I mean when you hover some pic on the left side is write some text which is shown on my white background as white color and i want it to chenge it to black.Thanks

    ReplyDelete
  115. Great posting, I did it to my blog..worthy web to visit..I'll back.
    Btw, in my template the code not footer line 3 but footer line 1. Is it different for each templates?

    ReplyDelete
  116. i cant find p class='post-footer-line post-footer-line-3'
    or div class='post-footer-line post-footer-line-3'

    so how that ??

    ReplyDelete
  117. Aneesh, this is my very first time trying to do anything with custom widgets....I have downloaded some nice icon graphics in .png format to my hard-drive...is there a way I could use those with the above directions you have given? Please, if you have time, could you give me a step-by-step. Currently I have just one of the icons on my blog, but I would like to use several all in one line, ideally either in the side wrapper, or at the top of the blog (rather than after every post) My blog is http://todayonfacebook.blogspot.com
    Thanks in advance for any help you can give me.

    ReplyDelete
  118. hey aneesh..
    Can u show me how to make beautiful social bookmark icon like u??
    please..:(

    ReplyDelete
  119. Aneesh, thank you so much, your site was/is very helpful!

    Can you please tell me how to add more elements (identi.ca,mixx,rss,e-mail etc) ?

    Toni, there are millions out there, just google it :)

    ReplyDelete
  120. Nice tips! Using social bookmarking, Readers can easily bookmark the updates post of the blogs. Thanks, keep posting and share useful tips for blogging.

    ReplyDelete
  121. Hi Aneesh-- I really like the way your Social Bookmarking widget looks. Can you tell me how to make mine look like yours? My blog is here: www.simplesavingsblog.com

    Thank you!

    ReplyDelete
  122. This really help visitor to bookmark post easily...Thanks

    ReplyDelete
  123. This comment has been removed by the author.

    ReplyDelete
  124. Hi! Can you add Twenti.com?
    How can I change "Bookmark this post" to my own language?

    ReplyDelete
  125. pls sorry if this questions looks annoying but i dont seem to understand what you said....

    You said .. place the code from the following file just below any of these lines. But i cant find any file in the post you said.

    ReplyDelete
  126. hmmmm- wondering if this can be used on blogs that we host on our own (not blogger) http://top-health-cafe.com/blog/blogger.html
    thanks much - Lori

    ReplyDelete
  127. really thanks for that help.........:-)

    ReplyDelete
  128. Can I have the code of your social bookmarking elements.I mean the one that you're using.I viewed your source code and noticed that you actually added tables to make it look like that.Is there any easy way of adding a two row social bookmarking element?,I mean,should i do it manually too?

    ReplyDelete
  129. Hi Aneesh - Have you seen the widget by SocioFluid (www.sociofluid.com)? It is pretty neat and doesn't take up as much room as yours. I would like to use that one and when I tried substituting the html I ended up with five lines of bookmarks at the end of the post! Could you please take a look at their widget and make some suggestions? I know this is a strange request but I think that you might like their widget.

    Thank you.

    ReplyDelete
  130. That is fantastic, i'm putting you in my favourites. thanks so much.

    ReplyDelete
  131. i really, really thank you for this. very helpful and it turns out cool at my page.. :)

    ReplyDelete
  132. It went vertical for me as well on my blog.

    I'll post if I can get it fixed...

    ReplyDelete
  133. @Inspired Robin - probably because your temlate has additional styling rules to do that

    img {
    border: 0;
    display: block;
    }

    is present in your template..

    ReplyDelete
  134. Hi Aneesh I am using the color paper template for my blog, somehow I am unable to find either the <p class='post-........ or even <div class='post-........lines of code in my edit-html tab...

    I am sure of this because I have already spent quite a bit of time even checking line by line........Please help

    ReplyDelete
  135. I'm with Junior. I'd prefer to have the add me links like the ones you use on your blogs here. Easier to read.. how do we get that?

    ReplyDelete
  136. This is great, thanks it's just what I've been looking for - really neat and not too obstrusive. In so many I've seen the icons are all over the place different format etc. This is super thanks!
    Jade

    ReplyDelete
  137. Help - I found the code div class, etc. but when I click on
    "and place the code from the following file just below any of these lines[whichever is present in your template]." on your blog, it opens a new site with no code. Only "Bookmark this:" with icons. Where is the code to put in?

    I was able to do the "retweet" button, though. Thanks!

    Thanks, Lorin -

    ReplyDelete
  138. Hi Aneesh, thanks for writing back so fast. I did click on "following file" that is underlined. When I use the link you are sending me, I am getting the same page. I wish I could print screen and show you!

    ReplyDelete
  139. @Lorin - oh yes IE renders even text files as HTML pages. :( Just updated the post.

    ReplyDelete
  140. @Aneesh - opened with Mozilla Firefox and it worked! Also saw the post above. Many many thanks. You are great! I'm going to spread your blog and let people know about you!
    Cheers, Lorin

    ReplyDelete
  141. Hi again, so sorry to be a pain!

    Is there a problem if I don't insert the first code?

    When I insert this I get this error message:
    (We were unable to preview your template
    Please correct the error below, and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "head" must be terminated by the matching end-tag "".)


    I also, have in my HTML a "/" before head inside the "<>"

    The buttons seem to be working with just putting in the large amount of code after the post footer line 3. see: www.lifechallengesgroupcoaching.blogspot.com

    Thanks for the time. Cheers,
    Lorin

    ReplyDelete
  142. that code will give a nice hover effect.
    just find </head>
    and just above it place
    <script src='http://blogger-plugins.googlecode.com/files/bkmrk_hover.js'>

    ReplyDelete
  143. yess very nice, but its seems you forced to put your link bank by hiding in your js files. anyway, nice... very nice...

    ReplyDelete
  144. I LOVE THEM !

    THANKS 4 THIS !

    ReplyDelete
  145. hi
    i tried the code and it works great except for one thing:
    all the icons are in one vertical column, how can I get them in a row?

    thanks

    ReplyDelete
  146. its due to some CSS already present in your template.In your templare change
    img {
    border: 0;
    display: block;
    }
    to
    img {border: 0;}

    ReplyDelete
  147. Thanks, Aneesh.
    That fixed it :)

    ReplyDelete
  148. I tried to post a thank you Aneesh, it's not working..hope this one works. Thanks Aneesh :)

    ReplyDelete
  149. I tried the code as you said but the lines mentioned in step3 aren't there.. I am using template from draft blogger.
    Could you tell me any alternate way?

    ReplyDelete
  150. It works great. Thanks

    ReplyDelete
  151. doesnt work for me. pls help

    ReplyDelete
  152. sorry for the dumb ass question, but what is it I need to do to expand the widget templates? I've been trying to find that for a couple days and i'm stuck!

    Not to mention that I don't find the step 3 lines...

    THANKS IN ADVANCE!!!

    http://dw38638.blogspot.com/

    ReplyDelete
  153. @frenchy - in your Layout > Edit HTML page, you will find a check box which says "Expand Widget Templates" . Check that Check box.

    ReplyDelete
  154. Aneesh, thanks a lot for the quick response.

    I still can not find it. When you say Layout, are you referring to TEMPLATES section ( http://www.blogger.com/template-edit.g )? If so, there is no check box to be found in the Edit HTML page.

    Been looking for days now...

    thanks for any further help you can give!

    dw

    ReplyDelete
  155. Thanks for the good article, has been very useful for me. Thanks for sharing.

    ReplyDelete
  156. My social bookmark buttons show up on all of my posts on the main page, but when you try to view just the one post they aren't there. Do you know why this would be happening?

    Check it out www.i-blogger.info

    ReplyDelete
  157. hi Aneesh,
    finally know what the problem was:

    I had updated my current blog from a several years old version, but somehow the process did not change Templates to Layouts.

    I have created a new blog to experiment, and now it started with Layouts from the beginning, thus allowing the "Expand Widget" check.

    Cheers!

    dw

    ReplyDelete
  158. Hi Aneesh!! Great work again.! My Template has a dark background, so is there any way i can change the text colour to white instead of the black??

    ReplyDelete
  159. dude awesome code

    thanks for all the great plugins on this site

    im a big fan

    ReplyDelete
  160. Hi,

    i have installed this new version. it is still same like your previous version. nothing change.

    please advise.

    ReplyDelete
  161. I would like to change the "Bookmark this post:" to "Share this post:". How would I accomplish this? I changed the text in the code already, but I'm not sure if I need to create another post for it to take effect. It hasn't changed the previous instances.

    ReplyDelete
  162. too bad blogger dosent have something as simple as "sociable". @Eric, that should change it, if you litterally go into the code and rewrite the sentence.

    ReplyDelete
  163. awesome work man, two thumbs up for u

    ReplyDelete
  164. Thank you!
    It's taken me all morning to finally find a tutorial that does what I want, and it's worked perfectly for me.

    Hooray!!!

    ReplyDelete
  165. Thank you, thank you, thank you! I've been searching for a bookmarking widget for Blogger... finally found U!

    ReplyDelete
  166. Your info was of great help! Do you have the code for Google Buzz?

    Thanks.

    ReplyDelete
  167. thanks for your post i was looking for something like this. Ill be subscribing to your RSS feed.

    ReplyDelete
  168. Lovely! I have been searching for a tutorial on this, and I am so glad I found you! I have put this up on my blog now, thanks!

    ReplyDelete
  169. Aneesh,

    Well, it's me and I am back again.

    Seems like the twitter button is not working.

    All the others do.

    Could it be twitter or should I be changing the code?

    Thanks again!

    ReplyDelete
  170. it's work, thanks a lot for the codes, great!

    ReplyDelete
  171. Hey, this is exactly what I have been looking for for my blog. Can you let me know if this still works?

    ReplyDelete
  172. Can you add a facebook icon as well???

    ReplyDelete
  173. amazing...
    thanks for share... :)
    nice info

    ReplyDelete
  174. Aneesh,

    I wrote you about a problem I had with my twitter but as mysteriously as it didn't work, the button mysteriously worked again.

    So ... don't bother with my post and many thanks.

    ReplyDelete
  175. Hey nice sharing :)
    Btw, the code is too much...
    ANy simpler...?

    ReplyDelete
  176. yeah now a days all webmasters realize the power of Social Bookmarking

    ReplyDelete
  177. hi..i copy all the code..bt cnt work?
    this is my blog axiebaby.blogspot.com

    ReplyDelete
  178. Thank you very much for widget

    ReplyDelete
  179. What a Great Post man, Thanks keep it up........................
    Good Luck

    ReplyDelete

Post a Comment