Blogger Social Bookmarking Widget – Must Have

I’d posted how to add social bookmarker widget onto Blogger based blog previously. And here it is another widget to add cool social bookmarking buttons with its cool icons of course. This widget originally from BeautifulBeta then reposted here. You can see and try how this widget works fine on my personal blog here (TheFachia.com). Now you can place it on your own blog. Just read the simple implementing steps below.

Step 0: Backup your template. Always make a backup each time you make changes of your template.

Step 1: Add the following code to the head of your template: Or simply look for </head> tag then place the code exactly before </head> tag.

<script src='http://home.planet.nl/~hansoosting/downloads/beautifulbeta.js' type='text/javascript'/>

Step 2: Find the following line of code in your template:

<p class='post-footer-line post-footer-line-3'/>

Step 3: Right after code above, place this code below:

<span class='bookmark'>
  <table align='left' border='0' cellpadding='0' width='100%'>
  <tr>
  <td style='vertical-align:middle' valign='middle' width='30%'>
  <div expr:id='"sbtxt"+data:post.id'>Bookmark this post:</div><script type='text/javascript'>showsbtext(&quot;sbtxt&quot; + &quot;<data:post.id/>&quot;,0)</script>
  </td>
  <td>
  <a expr:href='"http://ma.gnolia.com/bookmarklet/add?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",6);"' target='_blank'><img alt='Ma.gnolia' border='0' src='http://home.planet.nl/~hansoosting/images/icon_sb_mag.gif'/></a>
  <a expr:href='"http://digg.com/submit?phase=3&amp;url=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",1);"' target='_blank'><img alt='DiggIt!' src='http://home.planet.nl/~hansoosting/images/icon_sb_dig.gif'/></a> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",2);"' target='_blank'><img alt='Del.icio.us' src='http://home.planet.nl/~hansoosting/images/icon_sb_del.gif'/></a> <a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=" + data:post.url + "&amp;Title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",3);"' target='_blank'><img alt='Blinklist' src='http://home.planet.nl/~hansoosting/images/icon_sb_bli.gif'/></a> <a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",4);"' target='_blank'><img alt='Yahoo' src='http://home.planet.nl/~hansoosting/images/icon_sb_yah.gif'/></a> <a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&amp;t=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",8);"' target='_blank'><img alt='Furl' src='http://home.planet.nl/~hansoosting/images/icon_sb_fur.gif'/></a> <a expr:href='"http://www.technorati.com/cosmos/search.html?url=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",9);"' target='_blank'><img alt='Technorati' src='http://home.planet.nl/~hansoosting/images/icon_sb_tec.gif'/></a> <a expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",10);"' target='_blank'><img alt='Simpy' src='http://home.planet.nl/~hansoosting/images/icon_sb_sim.gif'/></a> <a expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "&amp;title=" +  data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",11);"' target='_blank'><img alt='Spurl' src='http://home.planet.nl/~hansoosting/images/icon_sb_spu.gif'/></a> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",17);"' target='_blank'><img alt='Reddit' src='http://home.planet.nl/~hansoosting/images/icon_sb_red.gif'/></a> <a expr:href='"http://www.google.com/bookmarks/mark?op=add&amp;bkmk=" + data:post.url +  "&amp;title="+data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",19);"' target='_blank'><img alt='Google' src='http://home.planet.nl/~hansoosting/images/icon_sb_goo.gif'/></a>
  </td>
  </tr>
  </table><br/>
</span>

Note you can also use this code for step one. It is just a mirrored JS file into another server to reduce bandwith of original server. Below is an alternate code to be placed exactly before </head> tag.

<script src='http://www.hotlinkfiles.com/files/1186264_qxjbl/beautifulbeta.js' type='text/javascript'/>

According on me, it is a cool widget. But as far as I know until I post this article there is still no StumbleUpon button used by this widget.