Home | welcome all to heros of net |

Sunday, June 24, 2012

How To Add Big Social Bookmark Button On Each Blogger Posts

/ On : 8:12 AM/herosofnet.

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.

Post Comment

Like us On Facebook

our channel on youtube

Followers