Home » Blogger Tutorials, Tricks and Hacks » Blogger Seo Tutorials / Tricks » Adding Social Bookmarking Buttons Widget To blogger And Customize It.

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Adding Social Bookmarking Buttons Widget To blogger And Customize It.

Adding Social Bookmarking Buttons Widget To blogger And Customize It.

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

21,885 views

If you are a regular user here on allblogtools.com you’ll notice that i posted many sharing and bookmarking widgets for blogger,
But a lot of users are contacting me asking to add a new one with customizable buttons and have tweet this button that working correctly with blogger.
Now lets see how to add it, then we’ll learn how to customize it to your own blog.

How To Add It.

This is a very easy widget, It’ll be done in only one step, now lets go.
Go to your blogger account, Navigate to layout >> Edit Html, And make sure to check Expand Widget Templates,
And find the following code.

<data:post.body/>

And exactly after it, paste the next code,

<div align='left'>
<span class='post-icons'>

<!-- Widget Title , Share This Start, Remove Or Leave-->
<p align='left'> <img alt='' border='0' id='BLOGGER_PHOTO_ID_5441163760466269298' src='http://3.bp.blogspot.com/_JwD5r652h00/S4LlnJNSFHI/AAAAAAAAAU8/b0CwEmD94jg/s400/share-this.png'/></p>
<!-- Widget Title , Share This Start, Remove Or Leave-->

 

<!-- Stumbleupon Button Start, Remove Or leave -->
<a expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumble This'><img alt='Stumble This' border='0' class='icon-action' src='http://2.bp.blogspot.com/_vLeiVavkV_M/SnleiulEMVI/AAAAAAAABeU/kO09nNTlQeo/s200/stumbleupon.png'/></a>
<!-- Stumbleupon Button End, Remove Or leave -->

<!-- Technorati Button Start, Remove Or leave -->
<a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Fav This With Technorati'><img alt='Fav This With Technorati' border='0' class='icon-action' src='http://1.bp.blogspot.com/_vLeiVavkV_M/SnlenauwzjI/AAAAAAAABec/btszO5xBOgg/s200/technorati.png'/></a>
<!-- Technorati Button End, Remove Or leave -->

<!-- Delicious Button Start, Remove Or leave -->
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Del.icio.us'><img alt='Add To Del.icio.us' border='0' class='icon-action' src='http://2.bp.blogspot.com/_vLeiVavkV_M/Snld35mPSDI/AAAAAAAABds/ccrOpOmP9Zk/s200/delicious.png'/></a>
<!-- Delicious Button End, Remove Or leave -->

<!-- Digg Button Start, Remove Or leave -->
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg This'><img alt='Digg This' border='0' class='icon-action' src='http://3.bp.blogspot.com/_vLeiVavkV_M/Snld_x-wXoI/AAAAAAAABd0/cTsGU_Y-zQ8/s200/digg.png'/></a>
<!-- Digg Button End, Remove Or leave -->

<!-- Reddit Button Start, Remove Or leave -->
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Reddit'><img alt='Add To Reddit' border='0' class='icon-action' src='http://3.bp.blogspot.com/_vLeiVavkV_M/SnleX1tMMtI/AAAAAAAABeM/gQSYdrmSc3k/s200/reddit.png'/></a>
<!-- Reddit Button End, Remove Or leave -->

 

<!-- FaceBook Button Start, Remove Or leave -->
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Facebook'><img alt='Add To Facebook' border='0' class='icon-action' src='http://3.bp.blogspot.com/_vLeiVavkV_M/SnleIlLdGwI/AAAAAAAABd8/RfHnWIGGMEY/s200/facebook.png'/></a>
<!-- FaceBook Button End, Remove Or leave -->

<!-- Yahoo Button Start, Remove Or leave -->
<a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Yahoo'><img alt='Add To Yahoo' border='0' class='icon-action' src='http://1.bp.blogspot.com/_vLeiVavkV_M/SnlexsGX2QI/AAAAAAAABes/ai6zvzZKCgw/s200/yahoo.png'/></a>
<!-- Yahoo Button End, Remove Or leave -->

<!-- Twitter Button Start, Remove Or leave -->
<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
<script charset='utf-8' src='http://s.bit.ly/TweetAndTrack.js?v=1.01' type='text/javascript'/>
<a expr:onclick='&quot;return TweetAndTrack.open(this, \&quot;&quot; + data:post.url + &quot;\&quot;);&quot;' href='#'>
<span style='display:none;'>I&#39;m reading: <data:post.title/></span><img alt='Add To Yahoo' border='0' class='icon-action' src='http://www.cbc.ca/news/yourvoice/assets/images/yourvoice-twitter.png'/></a>
<!-- Twitter Button End, Remove Or leave -->

</span>
</div>

Now Just Click Save Template and you are done.

Customize the widget.

You can delete or rearrange the buttons in this widget, and you can remove the Share this Big sign or leave it.
Lets see how.
In the above code you’ll notice that there are lines in red and blue colors.
For example Here is a part of it.

&<!-- Technorati Button Start, Remove Or leave -->
<a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Fav This With Technorati'><img alt='Fav This With Technorati' border='0' class='icon-action' src='http://1.bp.blogspot.com/_vLeiVavkV_M/SnlenauwzjI/AAAAAAAABec/btszO5xBOgg/s200/technorati.png'/></a>
<!-- Technorati Button End, Remove Or leave -->

This part of code is responsible for Technorati Button Can remove it, Move it to up or down to rearrange the widget buttons, And of curse you can do this with all the widget buttons in the same way.

Demo.

Too see a live demo for this widget please click here. Please don’t hesitate to leave your comments, feedback, or your questions.

Liked It ? Please Share

Comments

32 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Hey Max! Can I request you a bookmarking widget with Google Buzz?

    Regards,
    Anup kayastha

    • Max says:

      @ Anup@Hack Tutors, sure, this is very important now,
      i’ll add it very soon.

      @ beben, thanks for your info.

  2. BEBEN says:

    @Anup@Hack : you just write you google profile…like this…
    http://www.google.com/profiles/YOUR-ACCOUNT-NAME
    for pic you can creativity alone…good luck ^_^

  3. Hey Beben what do you mean I can’t understand?

  4. Oh! Now I can get you man…I can add my pic on buzz and visible on comments as avatar…Okay…Thanks for the info….

  5. Thanks for this very useful. I added it to my site but now I can’t the code in the html to remove the old share links. Can you help?

  6. Thank you very much for this.

  7. Beben says:

    hihihi…no problemo no problemo…
    your welcome MAX ^_^

  8. Gosh this is a great article. I was researching this literally yesterday. This will really benefit many for the frustration that sometimes comes out of adding these.

  9. Max says:

    Thanks all,I wish you’ll get more links with this widget.

  10. Yo, dude! this is one sick social bookmark, um lovin it big time & my blog is now pimpin!

  11. australiavotes says:

    For some reason the buttons are showing up before the “continue read/read more/whatever” link. If I move the jump code to before the buttons they only show up if I a “after the jump” in that particular post :/

  12. satrya says:

    Wow,thank you so muchh

  13. ipul says:

    Thanks Max. for this trick. i have use this trick to my themes. please look my blog

    http://www.tempatngeblog.co.cc

    Thanks

    Ipul

  14. sofia says:

    Actually I have two
    and I know this is not normal. Can you please help me?

  15. sofia says:

    two of the code data.post.body

  16. pak cik says:

    hello,
    why my template don’t have this code?

  17. pak cik says:

    this code never appear in my template..

    <data:post.body/>

    please help me..

  18. podoomda says:

    good tool i try it
    it’s very gooood

  19. that’s is the coolest bookmark button thank u so much

  20. JoeMama says:

    Thanks for this! But um… how can we make the buttons smaller?

    • Max says:

      this is possible easily by adding width and height tags for each image code with your needed value.

  21. Sourav says:

    Excellent, but the twitter button is not working for me. Do I have to make any changes??

  22. nichole says:

    Your Comment Here …. * i like this one but I want to add google and/or google buzz and thisone dint have it on it and is there a way to make it a little smaller?

  23. kratom says:

    Create stuff, thnks for the tips:)

  24. razec says:

    for some reasong my twitter button isnt working …can some1 tell me why ? thx guys !

  25. KFunC says:

    How about google buzz?

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here