Membuat Social Bookmarking Widget

Sebenarnya ini bukan hal yang baru,bahkan punya teman-teman blogger lain ada yg lebih ciamik dari ini..tapi tak apalah kalie aja masih ada yang berminat membuat ‘Social Bookmarking Widget’ ala Khairul Blog yang simpel namun tidak kalah menarik..
Dengan Social Bookmarking Widget kita bisa membagikan artikel ke 12 social bookmarking situs, yaitu facebook,Google Social Bookmarks, Delicious, Digg, Stumbleupon, Twitter, Technorati, Linkedin, Mixx, Newsvine, Yahoo, dan Reddit. Satu lagi, widget ini mempunyai satu kelebihan yaitu jika kita mengarahkan ke gambar (hover effect), maka akan keluar title dari gambar situs yang kita tuju.

Berikut Cara Memasangnya

Login ke akun Blogger anda
Plih Layout > Edit HTML, lalu centang Expand Widget Template
Cari kode </head>, lalu paste kode berikut di atasnya:

<style>
.bookmark {
background:#FFF !important;
width:420px; /* lebar kotak */
text-align:center;
text-transform:none;
border:1px solid #DDD; /* warna border kotak */
-moz-border-radius:5px;
padding:5px;
}
.bookmark img {
margin-top:5px;
opacity:.4;
-moz-opacity:.4;
filter:alpha(opacity=40);
}
.bookmark img:hover {
opacity:1;
-moz-opacity:1;
filter:alpha(opacity=100);
}
.sharemessage {
color:#666; /* warna judul */
font:Arial, Helvetica, sans-serif;
font-size:13px; /* ukuran huruf judul */
font-weight:bold;
margin-bottom:5px;
padding-bottom:2px;
border-bottom: 1px solid #CCC; /* warna border bawah judul */
}
.credit {
font-size:9px;
text-align:right;
}
.credit a {
text-decoration:none;
}
.credit a:hover {
text-decoration:underline;
}
</style>
<script src='http://z-sbookmark.googlecode.com/files/Z-Bookmarking.js' type='text/javascript'/>

Selanjunya, cari kode <div class='post-footer'> atau <p class='post-footer-line post-footer-line-1'>. Kalau sudah, paste kodedibawah ini di atasnya:

<div class="bookmark">
<div class="sharemessage">
<div expr:id='"sbtxt"+data:post.id'>Share this post!</div>
<script type='text/javascript'>showsbtext("sbtxt" + "<data:post.id/>",0)</script>
</div>

<div id='row1'>
<a expr:href='"http://www.facebook.com/share.php?u="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",1);"' rel='nofollow' target='_blank' title='Facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD7BUl4dn0GrFHUs_fU81mzx1pkGeUdwzquZPiYUrz2TDzAPrbgz6ChbERbwethkLhgtOgFQshDC_U25JA5g5Ar7_ozK9sUMKBJZqDyPluGpSxbaaFcRjt374rsAr33A8JBivnKQKaydQ/s400/facebook.png'/></a>

<a expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",2);"' rel='nofollow' target='_blank' title='Delicious'><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYB5iOIarLv3u0xSNOpm9Jx8L1J4M2qgiNYn5DXrKolfnPszxpGeAEHw0QJg5JYnwatpJnnXDSsxgRSNY5A9ELd93a1IPqIcuMz-8qJ6JEmgt8PvgWPGugE4G24VTTgZ0iYTRFi5he5rQ/s400/Delicious.png'/></a>

<a expr:href='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",3);"' rel='nofollow' target='_blank' title='Digg!'><img alt='Digg!' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKChgBszw-fCiQRlzJZat44ASc1-T2QTkHetXESrdmpRN8d3a0Lm7BLHt-p-sPRuJd2AJ1YBu74a6hccIoqGk5BfC17nZpKJ_VnnzVDb5bMooIRJpZh2IkPDa24e-meIeGb8pIiUUyx5VF/s200/1271461768_digg.png '/></a>

<a expr:href='"http://twitter.com/home?status=Currently reading: " + data:blog.title + " - " + data:post.url + ". What about you?"' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",4);"' rel='nofollow' target='_blank' title='Twitter'><img alt='Twitter' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBATxst5mxbMGq1s8XD3V5G3jJseAMJbpLnE0pRgRYDyxbIusD9pAUv1Jqz7LxxyTPBpbMe_-jm_64a5ZqnT96L_AXicz6YxUhLNJwm2pYG26Db9p5eHrqKD49IWrR39Wkla-HyydwMj9Z/s200/1271468870_twitter.png '/></a>

<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",5);"' rel='nofollow' target='_blank' title='Linkedin'><img alt='Linkedin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixPqvC_4rXMFs583f2CGc6N9HhTAVYGC4dBguik8fIwFAyVlmFpfxxR9OOtvMqCtgJwahMf4zYZmw0zFO4Rr2_RqpK44HKzIY1I_J3nfMTemGXmqga-w0OH1Y5wjMv1VCzWfoDyj51WZg/s400/Linkedin.png'/></a>

<a expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",6);"' rel='nofollow' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwrwnooW7muIsjy5mVX-GKyrIEoB150mtriGZ6n3zLUGFTdZ6296DXrbJ3oulO-Kq0RgXLJiLz6qPf-OetP_xn4svy1Ck9AVxBxzk8-tMIJKcaCRjrM9boohcgXaF7a4kYF3VctRxqmebA/s200/1271461880_stumbleupon.png '/></a>
</div>

<div id='row2'>
<a expr:href='"http://technorati.com/faves?add="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",7);"' rel='nofollow' target='_blank' title='Technorati'><img alt='Technorati' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqa1C3bhS4C0nZnn5zdo3QGw5AP7IvyCRubuyqZ3j6014J_Y5HRovFCmrw_InlqQmqo3ODW_abTtsT2Tl4xvDAT7XgZh32aJsn8A-c3ATFhL_WG1JIUVnoP2bvc59yhsYwisJZY9jy3tkg/s200/1271469164_technorati.png '/></a>

<a expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",8);"' rel='nofollow' target='_blank' title='Google Bookmarks'><img alt='Google Bookmarks' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN5mh-UNsj3aLdQ7Eyho-Ip7eU2TszUPvZLajo3s6hAhG28MyI9Eux0Vib48jCdQB75qiipOv9Ix66PP5-sOP3ONUXVmIJcxEyHgeSuAWZULtGGBX7h444idhJ_ZjQxVekcoK2meAgZOWd/s200/1271463197_google.png '/></a>

<a expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",9);"' rel='nofollow' target='_blank' title='Mixx'><img alt='Mixx' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT0sbp6FRtkyNWuwSZNaKhfnL1HsTTsLAKbwbKQAcfLAQxBUjUdiCcU-oGTELqI2HQ8zNfbWelG88tjBfDDpN4cuguB_CpO-S7vsOvjaK_mzNQl0TaGfJeHUo_SlU7crwqP_-qHLinEHC3/s200/1271469584_mixx.png '/></a>

<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",10);"' target='_blank' title='Yahoo!'><img alt='Yahoo!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEccGwRw-5fdVQ2gc_FBImN_qiCs4s4G5687aH8psnsfUdIHnawcjHwonuroDIBM3ECl4JwLk0QAw65eNEfzvN6nx7EhT79gh3vu7KjgR2z0W204RAdpGM1MOa9wKAvc0GemdZEF6_cfg/s400/Yahoo.png'/></a>

<a expr:href='"http://www.newsvine.com/_tools/seed&save?u="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",11);"' rel='nofollow' target='_blank' title='Newsvine'><img alt='Newsvine' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGr8-yv543jtXa5esLgGK1GNFs9_TZMqd0WBRK80l9bq952sdG3Hv-dlpC3DD6GfipZfYqM1GCwhftOyes8gYU7W-KLWuyCEncZ6oeECNPci_KGnzXFNolH-a3dNFX5dt-umt1az6s8fU4/s200/1271463610_Newsvine_48x48.png '/></a>

<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",12);"' target='_blank' title='Reddit'><img alt='Reddit' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZkzELixjtU_wYP1RlPUyxGyoSEsu07zR9tCgaUvfGDK8L5rGO34pShgmg3mLQ2_BGPcnxEFDB3qibs3bkY53heYFYs9i5XjDJFS9kjP4i1x8IMGIdxA4-g5eQfGTRpeBwXGGekoI6maqE/s200/1271469391_reddit.png '/></a>
</div>
</div>

Jika blog kamu sudah terpasang READ MORE, kamu tinggal masukkan kode di atas, ke dalam kode di bawah ini :
<b:if cond='data:blog.pageType == "item"'>

</b:if>