blogger templates
Adding Social Bookmarking Button in your blog

Adding Social Bookmarking Button in your blog

Have you visited Kang Rohman’s blog about electronic rubric? Well, if you pay attention well, at the end of the post or article is seen some social bookmarking buttons, examples are as follows;

bookmarkingbutton

Actually, what are the advantages of those buttons? They function to ease you as the blog owner and visitors who want to submit into certain social bookmarking based on the available logo. What is social bookmarking site? Just read here if you still don’t know about it.

If you are interested in adding social bookmarking button but still don’t know how, please read the steps below.

  1. Login into blogger with your ID
  2. Click Layout
  3. Click Edit HTML tab
  4. Click Download full Template. Please back up your template first.
  5. Please mark the little box beside Expand Widget Templates. Wait for a moment.

    expand-template

  6. Find this code ]]></b:skin>

  7. Copy and paste the following code right above ]]></b:skin>

    .bookmark{
    padding:0px;
    margin-top:15px;
    background:#ddd;
    }
    .bookmark a:hover {
    position: relative;
    top: 1px;
    left: 1px;
    }
    .bookmark img { border: 0;
    padding:0px;
    margin-top:15px;
    }
  8. Find this code </head>
  9. Copy and paste the following code right above </head>

    <script type='text/javascript'>

    //<![CDATA[ // Beautiful Beta Javascript Library // ------------------------------------------- // Version: 1.04 // Date: 2006-12-21 // Website: http://beautifulbeta.blogspot.com // -------------------------------------------

    function showsbtext(id,index) { var bookmarktext=document.getElementById(id); var sbValues= new Array(); sbValues[0] = 'Bookmark this post:'; sbValues[1] = 'Add to <strong>Digg</strong>'; sbValues[2] = 'Add to <strong>Delicious</strong>'; sbValues[3] = 'Add to <strong>Blinklist</strong>'; sbValues[4] = 'Add to <strong>Yahoo Web</strong>'; sbValues[5] = 'Add to <strong>Netvouz</strong>'; sbValues[6] = 'Add to <strong>Ma.gnolia</strong>'; sbValues[7] = 'Add to <strong>Fark</strong>'; sbValues[8] = 'Add to <strong>Furl</strong>'; sbValues[9] = 'Add to <strong>Technorati</strong>'; sbValues[10] = 'Add to <strong>Simpy</strong>'; sbValues[11] = 'Add to <strong>Spurl</strong>'; sbValues[12] = 'Add to <strong>Newsvine</strong>'; sbValues[13] = 'Add to <strong>Blinkbits</strong>'; sbValues[14] = 'Add to <strong>Smarkings</strong>'; sbValues[15] = 'Add to <strong>Segnalo</strong>'; sbValues[16] = 'Add to <strong>De.lirio.us</strong>'; sbValues[17] = 'Add to <strong>Reddit</strong>'; sbValues[18] = 'Add to <strong>Wists</strong>'; sbValues[19] = 'Add to <strong>Google</strong>'; sbValues[20] = 'Add to <strong>Stumbleupon</strong>'; document.getElementById(bookmarktext.id).innerHTML = sbValues[index]; }

    function getPostTitle(fullpath) { var splitinput = fullpath.split("/"); var lastpart = splitinput[5]; var linktext = lastpart.split(".html"); var postlink = fullpath.split("#"); var outputstring = linktext[0].replace(/-/g," "); outputstring = "\"" + outputstring + "\""; outputstring = outputstring.link(postlink[0]); document.write(outputstring); return; }

    function getCommentLink(clink) { var splitinput = clink.split("#"); var commentlink = splitinput[0]; commentlink = commentlink.concat("#comment-",splitinput[1]); var outputstring = "(more)"; outputstring= outputstring.link(commentlink); document.write(outputstring); }

    function showrecentcomments(json) { for (var i = 0; i < numcomments; i++) { var entry = json.feed.entry[i]; var alturl;

    if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } alturl = alturl.replace("#", "#comment-"); var postlink = alturl.split("#"); postlink = postlink[0]; var linktext = postlink.split("/"); linktext = linktext[5]; linktext = linktext.split(".html"); linktext = linktext[0]; var posttitle = linktext.replace(/-/g," "); posttitle = posttitle.link(postlink); var commentdate = entry.published.$t; var cdyear = commentdate.substring(0,4); var cdmonth = commentdate.substring(5,7); var cdday = commentdate.substring(8,10); var monthnames = new Array(); monthnames[1] = "Jan"; monthnames[2] = "Feb"; monthnames[3] = "Mar"; monthnames[4] = "Apr"; monthnames[5] = "May"; monthnames[6] = "Jun"; monthnames[7] = "Jul"; monthnames[8] = "Aug"; monthnames[9] = "Sep"; monthnames[10] = "Oct"; monthnames[11] = "Nov"; monthnames[12] = "Dec"; var comment = entry.content.$t; var re = /<\S[^>]*>/g; comment = comment.replace(re, ""); if (showcommentdate == true) document.write('On ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' '); document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented'); if (showposttitle == true) document.write(' on ' + posttitle); document.write(':<br/>'); if (comment.length < numchars) document.write('<i>' + comment + '</i><br/><br/>'); else document.write('<i>'+ comment.substring(0, numchars) + '...</i><br/><br/>'); } document.write('<span >Widget by <a href="http://hackosphere.blogspot.com">Hackosphere</a><br/>Powered by <a href="http://beautifulbeta.blogspot.com">Beautiful Beta</a></span><br/><br/>'); }

    //]]> </script>

  10. Drop your mouse down to the bottom of the template and find this code:

    <div class='post-footer-line post-footer-line-1'>

    and some time like this

    <p class='post-footer-line post-footer-line-1'>

  11. Copy the following code and paste under this code <div class='post-footer-line post-footer-line-1'>

    <span class='bookmark'> <table align='left' border='0' cellpadding='0' width='100%'> <tr> <td style='vertical-align:middle' valign='middle' width='25%'> <div expr:id='&quot;sbtxt&quot;+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='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,20);&quot;' rel='nofollow' target='_blank'><img alt='StumpleUpon' src='http://lh4.ggpht.com/_pt7i0nbIOCY/Sn9afBTIi1I/AAAAAAAACNA/Vl16dEBKasI/icon_sb_stumb_thumb%5B1%5D.gif?imgmax=800'/></a> <a expr:href='&quot;http://ma.gnolia.com/bookmarklet/add?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,6);&quot;' rel='nofollow' target='_blank'><img alt='Ma.gnolia' border='0' src='http://home.kpn.nl/oosti468/images/icon_sb_mag.gif'/></a> <a expr:href='&quot;http://digg.com/submit?phase=3&amp;url=&quot; + data:post.url' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,1);&quot;' rel='nofollow' target='_blank'><img alt='DiggIt!' src='http://home.kpn.nl/oosti468/images/icon_sb_dig.gif'/></a> <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,2);&quot;' rel='nofollow' target='_blank'><img alt='Del.icio.us' src='http://home.kpn.nl/oosti468/images/icon_sb_del.gif'/></a> <a expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=&quot; + data:post.url + &quot;&amp;Title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,3);&quot;' rel='nofollow' target='_blank'><img alt='Blinklist' src='http://home.kpn.nl/oosti468/images/icon_sb_bli.gif'/></a> <a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,4);&quot;' rel='nofollow' target='_blank'><img alt='Yahoo' src='http://home.kpn.nl/oosti468/images/icon_sb_yah.gif'/></a> <a expr:href='&quot;http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,8);&quot;' rel='nofollow' target='_blank'><img alt='Furl' src='http://home.kpn.nl/oosti468/images/icon_sb_fur.gif'/></a> <a expr:href='&quot;http://www.technorati.com/cosmos/search.html?url=&quot; + data:post.url' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,9);&quot;' rel='nofollow' target='_blank'><img alt='Technorati' src='http://home.kpn.nl/oosti468/images/icon_sb_tec.gif'/></a> <a expr:href='&quot;http://www.simpy.com/simpy/LinkAdd.do?href=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,10);&quot;' rel='nofollow' target='_blank'><img alt='Simpy' src='http://home.kpn.nl/oosti468/images/icon_sb_sim.gif'/></a> <a expr:href='&quot;http://www.spurl.net/spurl.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,11);&quot;' rel='nofollow' target='_blank'><img alt='Spurl' src='http://home.kpn.nl/oosti468/images/icon_sb_spu.gif'/></a> <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,17);&quot;' rel='nofollow' target='_blank'><img alt='Reddit' src='http://home.kpn.nl/oosti468/images/icon_sb_red.gif'/></a> <a expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot;+data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,19);&quot;' rel='nofollow' target='_blank'><img alt='Google' src='http://home.kpn.nl/oosti468/images/icon_sb_goo.gif'/></a> </td> </tr> </table> </span>

  12. Click Save Template button.
  13. Finish

Now, your blog has social bookmarking button that ease you to submit into social bookmarking site.

Thanks to beautiful beta for this beautiful hack

Reviewer: Rohman - ItemReviewed: Adding Social Bookmarking Button in your blog Rating: 5 Description: Adding Social Bookmarking Button in your blog

0 Comments:


Post a Comment