Saturday 14 January 2012

add vertical social bookmarks below the posts



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 == &quot;item&quot;'>
<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/AVvXsEjPH8dK7raxkZKVncCB-gRl5OVhGLoaU3E6jdF94HsblcilT3pdXZiaiw2Ey3No5B3YaYeCuURMNbnk-U8eyl4UZxsWbjjg3o656jEwA1i-Rc4BjVCY7KBJRNPbwMkN3o633FRTMZNZkJI/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://www.facebook.com/sharer.php?&amp;u=&quot; + 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/AVvXsEgXcFlEnOA4nrEbpa9DnHI4y7uJkC-sY0YDCqhDE32z7PvC4mAju_ESh_SrfMSNfu-PvEcdl7COR947bhLVviba2TOBTRyDDOuhw5rV6W-ReDbZc-bz5_B-bhOG7g7LCed-0i02u15sdhc/'/></td>
<td height='24'><a expr:href='&quot;http://twitthis.com/twit?url=&quot; + 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/AVvXsEhwTlo-SKe6b-GhmhFByb7jTABwfHfA3RvmDWpwrpogWLNFDN-ubhAeUNGL6oeoWOn4OyPktD18ErN7iaQwFEvj9pPSUJDZ_sOfWy9pcoNyJWLOxfsLDSraOt-xWQdaCdHmh1PPT2T2cfA/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://www.stumbleupon.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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/AVvXsEjQWiAb-D6sWyivSwNRabzNwkPHmNkaYF3BARWObt9N5lgEw1XWziQ-yMI2_zOyZKSAfgqTX1PAAVqgpWg9YKU4kwfSQMJvFTzxkRn3j-s9fVU6DPU6V78fzYg7PsLYWVR-57udbmge5X0/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://del.icio.us/post?v=4&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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/AVvXsEjjlw9z1vYaxQ2jS-3rn_gescD9H3lV2oXuvyjgEEZg3wcfA6GEYrF_QAn_0DLLIUeVhZtE-USmxsprcg-wMWd07TuMbJw5SCGP7w1uAzIgnzaJ-3UkgbzSRnFFwuExNDEYkPX4wsLlldo/' width='16'/></td>
<td height='24'><a expr:href='&quot;http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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/AVvXsEjKns_9QSHLFRA6-r_uHxALJ2KEwpnNgMJ66j1yzsjxt4jk3vvdUdhrU_-HQIIB7u4jnAbCW4YLcwKvSShxmaKrkmlHF049iOxlPn2CndfrjklMHDqVXC7AiqjfoUz2qzdkaNllJuO6aDI/' width='16'/></td>

<td height='24'><a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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/AVvXsEgsZR6CNCCMg0Ec8joTncen7sqkQt8Yh_pnXIoSC5pbC39KNiCs-pTbHUcwlFZgH_iXCWYKGb5JNB5yRrFc6xniyXcmnHk1F3iX_lxglsnOZ5yccygTSHoscAsbHpW1gzunzpsuVSF3Bhc/' width='16'/></td>

<td height='24'><a expr:href='&quot;http://www.simpy.com/simpy/LinkAdd.do?href=&quot; + 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/AVvXsEihADwFz9UW-4Vx4B0-yCFMA0y6MMOp5IUQccqVag2MVtMRNSJIdXXPX6GG7ejbpZ8Rl8ecxVNLh6C5sAdam7rQiN6TOQkdPcwAyXDKKBj3aMdonW07pybrkSW0QUkbmgQbiW9zyWYk2C4/' width='16'/></td>

<td height='24'><a expr:href='&quot;http://technorati.com/signup/?f=favorites&amp;Url=&quot; + 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/AVvXsEgemUtgjNKAGaxQIU9Z8F4muv3Eem9oFnGLby8_yyUWt3JLwiTuR3oU9x_s6eFQZ1Qk5Bi0O_aFPON9yLZALwcZyo3aMcIKEpDSsSb2L7a_QAdGEvrozDKBBCOItZjLc2geeAVxPtzEz-k/' width='16'/></td>

<td height='24'><a expr:href='&quot;http://www.furl.net/storeIt.jsp?&amp;u=&quot; + 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/AVvXsEjtuU1LF8dmKRAERCOqE_gizXB1HhsWOfPt5w9r5EAaCkTDq6QWLMtlknQhRIhb1n9yxToNSzfPa2JCGqUfHuRL4FgtLhvZ678_KtmJiUOBxXAtXsqHRK_3dJScUaGSlnLPZX_5hPPud3o/' 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

0 comments:

Post a Comment