How To Add Big Social Bookmark Button On Each Blogger Posts


Valid until 31 January 2015 (unless noted)
How to add big social bookmark button? For some bloggers, Big Social Bookmark Button is very cool, it could make their blog more beautiful. Plus, because its size, that would be "eye catching" for visitors. If they (visitors) like your article, sure they will bookmark your article into their favorite social bookmark sites. In the past blog trick article I already write about how to add social bookmark button, but its codes are provided by third party sites, and it is just a small button. Now as an alternative you can also create your own button and it is big. The drawbacks are it only shows few buttons (so it only refer to few social bookmarking sites) and because it is big (means contain big images too), it might be will slowing your blog when loading.. but don't worry it is not that bad :)

There are many big social bookmark button (for example "sharing is sexy" button), so what is it looks like? It will look like this :

how to add social bookmark button

Interested? so, if you are interested to add big social bookmark button in each posts, just follow to this steps :

1. Go to your blogger account
2. Go to layout - Edit HTML and click (tick) Expand Widget Templates
3. Find (Press Ctrl + F) this tag : <p><data:post.body/></p>
4. Ok, now copy below code and paste it just after <p><data:post.body/></p>
<div style='clear:both; '>
<div style='width:60px; float:left;'>
<script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<div style='width:60px; float:left;'>
<script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/stumble.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/delicious.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/technorati.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/twitter.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/facebook.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
</div>

5. Now save your template and you are done :)

Now you can see the result and test whether your big social bookmark button is work.

2 comments:

Brochure Printing said...

What if I just want 2 or 3 social bookmark buttons on my post? Is there a way for the users to include just selected social bookmark sites? Thanks for sharing the codes! ;;)

satyendra said...

this post was awesome and very easy to implement..

thanks i used it on my blog...

Post a Comment

Rules:
Comment must be in English, otherwise will be not listed.
Spam comment will be deleted, so don't waste your time for it.
Respect yourself, respect others.