Cara Membuat Icons Social Bookmarking Didalam Halaman Artikel ~ Improve Computer

Apa sih Social Bookmarking itu?

Awalnya saya juga tidak tahu, tapi setelah saya bertanya kepada om google saya menemukan jawabannya di wikipedia. Social Bookmarking adalah metode bagi para pengguna internet untuk berbagi, mengatur, mencari, dan mengelola bookmark (penanda) sumber daya web. Tidak seperti file sharing, sumber dayanya sendiri tidak dibagi tapi hanya sebagai penanda referensi.

Lalu gunanya untuk apa?

Memasang Social Bookmark merupakan salah satu cara mudah untuk melakukan promosi blog/web kita. Oleh karena itu kita perlu memasang Social Bookmark pada setiap halaman artikel dalam blog.web kita.

Icon social bookmarking apa saja yang bisa kita pasang?

Icon Social bookmarking yang bisa kita pasang sangatlah banyak, nah icon yang akan saya pasang yaitu Digg, Sphinn, Delicious, Facebook, Twitter, Mixx, Google, Furl, Reddit, Spurl, StumbleUpon, dan Technorati. Untuk contoh iconnya bisa anda lihat gambar di bawah ini.

Bagaimana cara membuatnya?

Cara membuatnya sangat mudah anda tinggal mengikuti langkah-langkah berikut :

Masuk kedalam account Blogger anda, lalu klik Tata Leta / Rancangan lalu pilih Edit HTML.
Sebelum memulai ada baiknya anda menyimpan atau mengunduh template anda untuk berjaga-jaga jika terjadi sesuatu yang tidak diinginkan.
Jika anda sudah yakin, mari kita mulai. Beri tanda cek pada Expand Template Widget.
Letakan Code CSS berikut di atas ]]></b:skin> :

/* Social Bookmark
----------------------------------------------- */
div.sociable { margin: 16px 0 0 0; text-align: center; }

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable li {
background: none;
display: inline;
list-style-type: none;
margin: 0;
padding: 1px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;
width: 16px;
height: 16px;
border: 0;
margin: 5px 5px; /*jarak antargambar*/
padding: 0;
}
.sociable-hovers {
opacity: .4;
-moz-opacity: .4;
filter: alpha(opacity=40);
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
Kemudian cari kode <data:post.body/> . Jika ada dua buah, pilihlah yang pertama.
Setelah itu letakan Script Code berikut dibawah(setelah) <data:post.body/> yang pertama.


<div class='sociable'>
<span class='sociable_tagline'>
<span>Ikon ini merupakan link ke situs social bookmark, pembaca dapat men-share halaman artikel yang sedang dibaca.</span>
</span>
<li><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Digg'><img alt='Digg' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcPidoDJ2k-x2jQG7cZYCWkeyT1-dvgf76IlIvwxVkBxcKJrdtpovbLnFHpk-pSth2cm_apoQe9GgeW7JakD6zE2mD8w_cez3EgicqkxgdPII2Fyjjxd03NxoEz5WX8K4wbyoCt-m6E4c/s800/digg.png'/></a></li>
<li><a expr:href='"http://sphinn.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Sphinn'><img alt='Sphinn' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhel-_UOJjfoQQAInCmtf41QkiVzV3MIch6ccz9gemh3Xg67v1t367tvZl-Q1Nhyphenhyphenj1EyHD84XxZdCkGMJ2hq6wXD249E-cggByIoY_wvRhVdcnq6sFukacBxe6bmQLe3FvJcf9T900ekNo/s800/sphinn.png'/></a></li>
<li><a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Delicious'><img alt='Delicious' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpc1Th30xT5DUNESNtlOxIcWK-nJ9lX0mcSmnRDPXDpAYXdlmnCWCanJwytzMOeGrfZ47E8KW17nsRAnM4vmcyaLXMhZdviEV5yztEEAIE-cj5RjBp46f2YcuS-0Szwu0pTZAPwzwwd5M/s800/delicious.png'/></a></li>
<li><a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url + "&t=" + data:post.title' target='_blank' title='Facebook'><img alt='Facebook' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipS_iwPqJoxC2Dzq6DownvdrMsw9jmnkXDJBZnE3c7Luit5DtgadWjQLpwu_yXjeimzhgeRk9X7PPjkekkDNkzkNxyLWC67qSuQA6Y73VyFWx7BNA5c6bFlM_vIyYsUqDaPhZvoZbEByI/s800/facebook.png'/></a></li>
<li><a expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&t=" + data:post.title' target='_blank' title='Twit This!'><img alt='Twit This!' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZWI3VXQUKN_GdDvWSEcnZPXem9ZeEotv_uQA1bbtbfzzz3jK991VoNGT_1xN1lvB5ioJbG8xxP1oC9LskOQ2yUMqA62VeM4HLmWguLJNSxoUIx4kn3j0qTy2POJ5CQrUeKlSJNEGhKSw/s800/twitter.png'/></a></li>
<li><a expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Mixx'><img alt='Mixx' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP-79oYxM_KvKhM5jrF4vSxwsvI4oihCaqSzF64OqRXIPbLxYULhMNFCyoydsRDIiPlPdSYM0_uSBrBl-Zl9_dYcHuwI8Dtvd6hyphenhyphenFb4GgR0mq3j7vLoJWb146STHVv3LsXpDjfKQBDyFc/s800/mixx.png'/></a></li>
<li><a expr:href='"http://google.com/bookmarks/mark?op=edit&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Google'><img alt='Google' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjteED2fRxkspdo7-c4obgrPIYz-BrPNxPEI4IjywheSofPkpEniMuXzEwAhT3eLGrO4P68lsiTPULenr6J3JHNYB-h1QonNRipI7dX29n2JKXP8kNN_emairsNUkrJgsll9kA4JH51aCE/s800/google.png'/></a></li>
<li><a expr:href='"http://www.furl.net/storeIt.jsp?t=" + data:post.title + "&u=" + data:post.url' target='_blank' title='Furl'><img alt='Furl' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMIGyCjb6NXV3on80LsvGU0txwDogAwoSfxAwFhE3fbqqj96X6OfJd9BVGywseFitQUqcsMwLkF5Hqw-NQH18hK9-_AA5T8n1ZP-SP30x45zuC9zGFSHGtOPlrFtm4ZL8NOrmhwyhTngY/s800/furl.png'/></a></li>
<li><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Reddit'><img alt='Reddit' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMVoWy-8TLKLbj68Itw7kypjP15eQoO7rSN1XMBOQlf6HidM_ajrf2IyfdEgwIXBqrLzgUEznZzFEyEfR-v0P_V2a_jt3xjQ9T3jUyPVB4s0JoKR_kkeNdQap1wTtlULT0JMX_2mBIZiI/s800/reddit.png'/></a></li>
<li><a expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Spurl'><img alt='Spurl' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTSHiBUENe4w3VuU5JdvTHSILPR_9uHpqO5GdScUrFGf3oInCYF0GY7vCfz3wq-BrCYtfG-mU635qjJd2WuIDP6hOVAtOnbwlFidycHOpBOJBZD96hFmEouXEtqf1BwRqU8nWhQ3RbmoI/s800/spurl.png'/></a></li>
<li><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4HmIiqxdTYowfUcJFBs1NE4DEZ4fpiEoBrujMfL7nw-NbSxyVF1BYngmc8fUNM0y8Nrj8z74S4n5EjqamMcyE-k1s_NB6W9U87IRAZtZZXyZdALxIkTKNmAXKXSHvlvn2WVKvmYRWRM/s800/stumbleupon.png'/></a></li>
<li><a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank' title='Technorati'><img alt='Technorati' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6t0f5pwsDZMzfUM9Qlq8TnFZ39JwMjh8pRVupWLB0JMrxxumTSfaYUzWW1JJGbUzOKYaJFG6o7wnsbYkugWnZkac9cQEHuu07XaemZnZTPhHdWcb44X1153bodvcl3efBEwRYjV8J0U4/s800/technorati.png'/></a></li>
</div>
Setelah selesai klik Simpan Template, lalu buka salah satu artikel anda untuk melihat hasilnya.