Adding Social Bookmarking Buttons Widget To blogger And Customize It.

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1l9iL6pnwc4IeJuvoUX3Y_UyhjzXvOxd1QfwKk_BbMegjVktrUdTL3LIMxzI_v2nm3aXlY0XbW-DtDDTytzMbN3pez-N0SwI8RY-Flu3Zw9QWZY1RBNLINXKLm2URIbkZ4LAQA3bu0s4z/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm_ROEBLqkYZIdi9F2spkILNFTANH-exHsI_LXdOCsOzAr34mKtNfdhK1oYH2CV9ApmEdHXw3_KMQ1qtg6s-Cm_3Ruw2_x6jEChXSFn9ZwcgSd-1P-QXNkvMgjnJNga5NFf5_NVj2Mwb0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyhyXr_GC3cKT2HO9iP8WVz7PQeHLa9TVZdmq6exc9alB_BGI75oE7_H8FqVVYG4xFE_haymwmz53AQO995RYrFBCV3GJTv-PA8yEM9I4PMSPaqx0MUvfTa27zpHEYIctq1AlVJBjVQrs/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE80bVEPwUZmacLo1UmkOxZtWArcRi6bRGdfbddwD30ipU4fTe8E2Kmy0jlzreXDqOc0mvmz3HVBmqeyDqYdSvFxNzVCeuyNYP0me1wDzyGwcsqXgyMPQGEXqZ4pqmWKZgMJ7aSw85KMQ/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitqrET40OV9vpZnlYxyAH8d3pOZoUX15j3wUUbq8UqBNiWZ4Oq1l6GX5WrwAYBphR8rKf4Kmc_t5uePxNeUBwdnsf2S1BYpn9hhv6DWhGF3csuDL6PlbgAhGhrjkQENmAL1HKfvATL6UQ/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheY_-uf0LFtWxUKoIwuW2Ms6dC-1n460w1WIAaFCZBmpESjFZdwz8KEg5IZK_xjBckYSRC8rIt4-PGHVV_JZZ-1LOg3DZ7DeeJeoaYgUZN39hJyzuNNzPIPv4xvoPQZbQvjDdAZAfU4uo/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisIrDYgLEx4uxJZhWAThVWt5eptQPmBsRmIk2Ta-dJfs3mztegdxkSVWHwtBhlYy1NxjjdE8UChfikya5VE2mLZ8hLpSd1d1xFMsjPLFf6gC1OTdbiQHx3QMGOUc-P-AZt68d41XnSb1M/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2bZRO7JsZBun5rhEtkeGxH6JTw5TxVXZ57RRLjydw2dqIdDAcmaSWPJDXcF4szmaRXOBwaPOW7rXH_VoDcpeyX_cKAklmbOwG6Y7sfTXF1xmjeO1LsmfJgXVmmzkSSbnzQaxhyphenhyphen_X-Eo8/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyhyXr_GC3cKT2HO9iP8WVz7PQeHLa9TVZdmq6exc9alB_BGI75oE7_H8FqVVYG4xFE_haymwmz53AQO995RYrFBCV3GJTv-PA8yEM9I4PMSPaqx0MUvfTa27zpHEYIctq1AlVJBjVQrs/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.