Online blog tips

Earlier we discussed how to add a sliding bookmarking widget in blogger. That was an amazing widget however that uses JavaScript so that might put an additional load to webpage. The best and beautiful way is, add simple bookmarking links to your blog that does not use JavaScript so that your page load faster and users can easily share webpage link in various social networks. Here is a super simple but beautiful social bookmarking widget for blogger. This fits in all blogger templates and looks so beautiful.

How to Add a Vertical Social Bookmarking Widget in Blogger?

First of all, its important to know how this widget will look like, so have a look at this image shown below. Its a demo.

Go to Blogger account > Design > Edit HTML
Now enable "Expand Widget Templates"

Search this code

<data:post.body/>

Just AFTER this line, copy-paste below given code

<b:if cond='data:blog.pageType == "item"'>
<b>Share this post :</b><br/>
<div class='spacer' style='border-top:solid 0px #DEDEDE;'/>
<table bgcolor='#ffffff' border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td valign='top' width='50%'><table border='0' cellpadding='0' cellspacing='0' width='222'>
<tr>

<td height='24' width='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY2EsP15i8rMYGbtDias68aIL9AGAdM9edYx2eEz2nbaKeAEdfmh6YeLrM2NRLwhLWoI6UTGaw2gaJseUKpoPLpcVBhIqPqvXK-saRjbkkfaQKPvIticskyfwi-_9KZv0Dg08yiyJVMwc/' width='16'/></td>
<td height='24'><a expr:href='"http://www.facebook.com/sharer.php?&u=" + data:post.url' target='_blank'>Share on Facebook</a>
</td>
</tr>

<tr>
<td height='24'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-yZLk2Mh29eHGuzufosq3KhdpvGs0nb2CeSDFexu32OHN8aja7nYEKP4XpMS3xtbvdE81atrEIgD0SBI4swYV0ijtSd9i2Pe7LLnqiS2OxiSjmThyphenhyphen6kkdmaI7eMRpZviDVbz8n1GpyTs/'/></td>
<td height='24'><a expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' target='_blank'>Share on Twitter</a>
</td>

</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK6nGDqyJLgP5gvzC4dS8yvCWY1HoqKiwfQRlfrKG5hav4yZXr56kAsGu288zUr0k8J5Wsw_b6VQ3e-cRVK2bnPzsNkBXa98O3R-Q2b9auUduJxZQV2OWjMet7NK_F9FFOGQy_s2FKcHA/' width='16'/></td>
<td height='24'><a expr:href='"http://www.stumbleupon.com/submit?&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Share on StumbleUpon</a></td>

</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjarrkqXKoyU3JSBm8tnuzSmLKwzErTWYXnPRKo6a5Jh4ggJxUxR2XZpEQTJrWtwQaKXUjl6ShOhHYgJGY6ujXbEUiGR04BHIFgkjSl6gwsL4O-EfcqguZ7BQ9-YvE3AHj-eWihwSWGyJw/' width='16'/></td>
<td height='24'><a expr:href='"http://del.icio.us/post?v=4&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Share on Delicious</a></td>

</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7cEPmKbKGUY5NDkcf6GdtkCnLNK7lmuVIyW91r3ZMml80VT0q9g6DaJ_hMJoOSkC212u9hgtxZvyGI3EFwVrvpA3OwVeKmrQ-BqiNEAFxdkLSuNkV25tzjVwmdWWE7h4yczllf3HGSKE/' width='16'/></td>
<td height='24'><a expr:href='"http://reddit.com/submit?&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Share on Reddit</a>

</td>
</tr>
</table></td>
<td valign='top' width='50%'><table border='0' cellpadding='0' cellspacing='0' width='222'>
<tr>
<td height='24' width='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTfKX6DhiS9QGT0vY7WTq7OLS2mdSeUHrXmt6HM0GwKLS81XuQZ1B8me6BxMf7H3_JIPoTZUc6Sug6QEqaV_8V45YR67sSlhVMRBXIcHrw-HsbeJq9cOWFDDOkW00jEpuMI_bs9l8Rzs0/' width='16'/></td>

<td height='24'><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Share on Digg</a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWfzPwEERT9z2H3J9ch3mD0_qG5iA20q4QUJPI-unbIIJim4DqH_Uanui5UGcSKnOxO7PPW0WOWvzfR-Th-1azi3KXapIIgF9ae7JbdXc4gh4iAld6vB-EJPig9CsD1tOHEO-rPLMB10w/' width='16'/></td>

<td height='24'><a expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url' rel='nofollow' target='_blank'>Share on simpy</a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNrJyEdzVkryVnC9BWBDnkBcYHa7P5BV5xTfUVGPD8mtUNEk1N7_fmUi0nrJZO4udQBFZG41OGhDC9aoh5vYnCM5eciXGmN6-5NnFLfC2kGyJi9kUKfTSmY1o0iYceF38o4rGxaYgLrjA/' width='16'/></td>

<td height='24'><a expr:href='"http://technorati.com/signup/?f=favorites&Url=" + data:post.url' rel='nofollow' target='_blank'>Share on Technorati</a></td>
</tr>
<tr>
<td height='24'><img alt='furl' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZGOpCsDsuZ_W2OpYHyw2s0BnGnscC10j_pVYJbMeKNO_1GP-1z8gh10SAqQxAejd3ndbQ4sNDguDRBbLYAqGVWhjI5OnjyX_WhSgSBC-8nHmuP4UIti2kMV_Hxitxxh00S9ua4Z_JvZM/' width='16'/></td>

<td height='24'><a expr:href='"http://www.furl.net/storeIt.jsp?&u=" + data:post.url' rel='nofollow' target='_blank'>Share on furl</a>
</td>
</tr>
<tr>
<td height='24'><img alt='Feeds RSS' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKubFNBfEMkCwxY1srHHhsX5v_vU1hyphenhyphenn8s0aHGUclacCbC50Dbu0lAMl6lQ2cVvyGGeXC6dqWAFZp3C1AgrwajGxAjBewbiLRVLRfcfdbFPJPrKtuSwVVXmcK1bx5JPFAgm5zud2IgEXk/' width='16'/></td>

<td height='24'><a href='http://feeds.feedburner.com/folsolfeed' target='_blank'>Subscribe to Feeds RSS</a>
</td>
</tr>
</table></td>
</tr>
</table>
</b:if>

Note: Change Feed address with your blog's feed

Save Your Template and You're done

First of All, check Demo to see how it looks like and what is its functionality

Now, if you wish to add this in your BlogSpot / Blogger, Login in Your Blogger Account
Go to Dashboard > Design > Edit HTML
Now, enable "Expand Widget Templates" box

Now, search for this code <tip: press CTRL and F keys at once and copy-paste this code>

</head>

Just before this code, add this new code by simply copy-paste it there

Now, search for this code

<data:post.body/>

Just After this, add this new code.

<b:if cond='data:blog.pageType == "item"'>

<div id='jsb'>
<div class='jsbc'>
<a class='jsi' expr:href='"http://del.icio.us/post?url=" + data:blog.url + "&title=" + data:blog.title' target='_blank'><span>Delicious</span><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzZ7-EQpyHqJpibUbpIhZzlrbvzhRHGLskVlnXhl0IX3n36QX-1RjTwpHg6ZxtyLU_BAKkKe-32aleWNfUnZhzri-VytOoL67B-NIL9YQ_zNLc6B_rH9j8HO28Af9ukT733w_Nwuo_ZHOK/'/></a>
<a class='jsi' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><span>Twitter</span><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6O4xdvpxhjMfVZ0CZ7LARUpHSvIkvJhkCrkTbelleI_PfLuZvfq4N-d7o78haMwaziYZY-5M8bG9OhjkzHs2QtM4etEdWgFscgtQFbjlVIGCiKb7HE4_v4GwZmft9yvwMFkLL5V-CgTdo/'/></a>
<a class='jsi' expr:href='"http://www.facebook.com/share.php?u=" + data:blog.url' target='_blank'><span>Facebook</span><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhascUujZMch1HUrhjp3Ax7TS86wtBBOn1keOPl_wCPemsoQEmq-ctJLlKw7xsrDRo6_3YmnvpTv6INzryJx7ZzQ1EYDzanuncgKOrje_TeNyMHodtCnhizSJ8WkfGn3oKsZIu3z4-PSR_i/'/></a>
<a class='jsi' expr:href='"http://digg.com/submit?phase=2&url=" + data:blog.url + "&title=" + data:blog.title' target='_blank'><span>Digg</span><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBOptd-NjFX2wqnmgiVC8VjtT3jpVQ3g2gFOnh546DNzHbztLrdOewKp8jd5FxKm2R0e0EZae_NtrX_4cE1bdfq-YU_o5RewCZr_x6qx2kZs3chWf4t9S2Mto7o4Xg1ZFcxfBahDnMFfcy/'/></a>
<a class='jsi' expr:href='"http://www.stumbleupon.com/submit?url=" + data:blog.url + "&title=" + data:blog.title' target='_blank'><span>Stumbleupon</span><img alt='StumbleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnHad_LXAxlo51GCX8GKO6HlxrDG7N3v40O_a9r9MjUP3dd1K9rSJLyHQNUCn58MyDh6xcjGVKmsrc2zS-MOSxy3rGFeYJm15xd5p7vV_kJJPDMGOI8wASWmrfkTHSs7GOQiFQIPbodO7P/'/></a>
<a class='jsi' expr:href='"http://technorati.com/faves?add=" + data:blog.url' target='_blank'><span>Technorati</span><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9UwHhABRY04Pu1M7RaosGVeQRKnu96EAfA4W-uB-axZpYy6c8U5dYQ1Cz_R0VjLiJ3ThA3T9a0nnXbs0kCX-dG2fLuDeaqevtCma03fa_HYag7lUURKyL0gLPGumJj3IUgdj6NNKlMeip/'/></a>
<a class='jsi' expr:href='data:blog.homepageUrl + "feeds/posts/default"' target='_blank'><span>RSS</span><img alt='RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMKgQgIeoomfPweK6iiFcTPve8CAuPebcdopnyAfh1t2LzDc5fJUakDtOLL4LT5TmvErilH8vwl40FO5muGAy8843_o-cTTkEQIoHLmIIkUy0YsnQ-SH5_Yf-39GNv4i1Vj8aajeU01rI_/'/></a>
</div>
</div>
<script type='text/javascript'>
jQuery(document).ready(
function()
{
jQuery('#jsb').Fisheye(
{
maxWidth: 48,
items: 'a',
itemsText: 'span',
container: '.jsbc',
itemWidth: 64,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>

</b:if>