21 | Dynamically Social Bookmarking

Update 22 ก.ค. 50: Social Bookmarking ทั้งหมดมี Blinklist, Delicious, Digg, Furl, Google, Ma.gnolia, Reddit, Simpy, Spurl, Technorati, Yahoo Web, Zickr,New! Duocore,New! Kudd,New! Oncake,New! LefthitNew!

Social Bookmarks ดังแบบที่เห็นอยู่ด้านล่างของบทความในบล็อกผมด้านล่างนี้Deprecated เผอิญผมไปได้ code มาจากที่เว็บนี้ ลองแล้วแจ่มดี ก็เอามาเผยแพร่ต่อ ผมแก้ไข code เขานิดหน่อย

สำหรับวิธีติดตั้งลงบน Blogger ก็มีดังนี้

1.ให้ทำการสำรองข้อมูลเอาไว้ก่อน หลังจากนั้น ที่ Templates » Edit HTML » ติ๊กถูกที่ Expand Widget Template » แล้วทำการ Copy CSS-Code ข้างล่างนี้ไปวางไว้ก่อนหน้า ]]></b:skin> ดูตัวอย่าง

.bookmark img {
   padding: 0px;
   border: 0px;
}
.bookmark a:hover {
   position: relative;
   top: 1px;
   left: 1px;
}

2.Copy JavaScript ข้างล่างนี้ไปวางไปก่อนหน้า </head> ดูตัวอย่าง

<script type='text/javascript'> 
function showsbtext(id,index) {
var bookmarktext=document.getElementById(id);
var sbValues= new Array();
   sbValues[0] = 'Bookmark this post:';
   sbValues[1] = 'Add to <strong>Blinklist</strong>';
   sbValues[2] = 'Add to <strong>Delicious</strong>';
   sbValues[3] = 'Add to <strong>Digg</strong>';
   sbValues[4] = 'Add to <strong>Furl</strong>';
   sbValues[5] = 'Add to <strong>Google</strong>';
   sbValues[6] = 'Add to <strong>Ma.gnolia</strong>';
   sbValues[7] = 'Add to <strong>Reddit</strong>';
   sbValues[8] = 'Add to <strong>Simpy</strong>';
   sbValues[9] = 'Add to <strong>Spurl</strong>';
   sbValues[10] = 'Add to <strong>Technorati</strong>';
   sbValues[11] = 'Add to <strong>Yahoo Web</strong>';
   sbValues[12] = 'Add to <strong>Zickr</strong>';
   sbValues[13] = 'Add to <strong>Duocore</strong>';
   sbValues[14] = 'Add to <strong>Kudd</strong>';
   sbValues[15] = 'Add to <strong>Oncake</strong>';
   sbValues[16] = 'Add to <strong>Lefthit</strong>';
 document.getElementById(bookmarktext.id).innerHTML = sbValues[index];
}
</script>

3.ต่อมากด Ctrl+F ที่คีย์บอร์ด แล้วใส่ <p class='post-footer-line post-footer-line-3'/> แล้วเคาะ Enter จะมาอยู่ตรงส่วน <p class='post-footer-line post-footer-line-3'/>

ให้ทำการ Copy HTML-Code ข้างล่างไปแทนที่ <p class='post-footer-line post-footer-line-3'/>

<p class='post-footer-line post-footer-line-3'>
  <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; + "<data:post.id/>",0)</script>
          </td>
          <td>
              <a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;amp;Description=&amp;amp;Url=" + data:post.url + "&amp;amp;Title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",1);"'><img alt='Blinklist' src='http://home.planet.nl/~hansoosting/images/icon_sb_bli.gif' title='Blinklist'/></a> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",2);"'><img alt='Del.icio.us' src='http://home.planet.nl/~hansoosting/images/icon_sb_del.gif' title='Del.icio.us'/></a> <a expr:href='"http://digg.com/submit?phase=3&amp;amp;url=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",3);"'><img alt='DiggIt!' src='http://home.planet.nl/~hansoosting/images/icon_sb_dig.gif' title='Diggit!'/></a> <a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&amp;amp;t=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",4);"'><img alt='Furl' src='http://home.planet.nl/~hansoosting/images/icon_sb_fur.gif' title='Furl'/></a> <a expr:href='"http://www.google.com/bookmarks/mark?op=add&amp;amp;bkmk=" + data:post.url +  "&amp;amp;title="+data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",5);"'><img alt='Google' src='http://home.planet.nl/~hansoosting/images/icon_sb_goo.gif' title='Google'/></a> <a expr:href='"http://ma.gnolia.com/bookmarklet/add?url=" + data:post.url + "&amp;amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",6);"'><img alt='Ma.gnolia' border='0' src='http://home.planet.nl/~hansoosting/images/icon_sb_mag.gif' title='Ma.gnolia'/></a> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",7);"'><img alt='Reddit' src='http://home.planet.nl/~hansoosting/images/icon_sb_red.gif' title='Reddit'/></a> <a expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url + "&amp;amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",8);"'><img alt='Simpy' src='http://home.planet.nl/~hansoosting/images/icon_sb_sim.gif' title='Simpy'/></a> <a expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "&amp;amp;title=" +  data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",9);"'><img alt='Spurl' src='http://home.planet.nl/~hansoosting/images/icon_sb_spu.gif' title='Spurl'/></a> <a expr:href='"http://www.technorati.com/faves?add=" + data:post.url +  "&amp;amp;thetitle=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",10);"'><img alt='Technorati' src='http://home.planet.nl/~hansoosting/images/icon_sb_tec.gif' title='Technorati'/></a> <a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;amp;=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",11);"'><img alt='Yahoo' src='http://home.planet.nl/~hansoosting/images/icon_sb_yah.gif' title='Yahoo'/></a> <a expr:href='"http://zickr.com/submit/2/?url=" + data:post.url +  "&amp;amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",12);"'><img alt='Zickr' src='http://akeanne.googlepages.com/icon_sb_zkr.gif' title='Zickr'/></a> <a expr:href='"http://www.duocore.tv/submit.php?url=" + data:post.url + "&amp;amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",13);"'><img alt='Duocore' src='http://akeanne.googlepages.com/icon_sb_duo.png' title='Duocore'/></a> <a expr:href='"http://www.kudd.net/submit.php?url=" + data:post.url + "&amp;amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",14);"'><img alt='Kudd' src='http://akeanne.googlepages.com/icon_sb_kud.png' title='Kudd'/></a> <a expr:href='"http://www.oncake.net/submit.php?url=" + data:post.url + "&amp;amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",15);"'><img alt='Oncake' src='http://akeanne.googlepages.com/icon_sb_onc.png' title='Oncake'/></a> <a expr:href='"http://www.lefthit.com/post.php?url=" + data:post.url + "&amp;amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",16);"'><img alt='Lefthit' src='http://akeanne.googlepages.com/icon_sb_lef.png' title='Lefthit'/></a>
           </td>
       </tr>
     </table>
  </span>
</p>

เสร็จแล้วบันทึกเทมเพลต ก็เป็นอันเสร็จสิ้น (ก่อนจะบันทึก จะกดดูตัวอย่างก่อนก็ได้).