Apaan tuh Social Bookmarking? Mungkin itu yang pertama kali muncul dalam benak kita yang awam. Menurut kamus elektronik 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.
Lantas mengapa memasang Social Bookmark ini perlu? Karena menurut informasi yang saya baca, memasang Social Bookmark merupakan salah satu cara mudah untuk melakukan promosi terhadap situs yang kita miliki. Oleh sebab itu kita perlu memasang Social Bookmark pada setiap halaman artikel dalam situs kita.
Nah, Icons Social Bookmarking yang akan kita pasang pada halaman artikel blog kita adalah Digg, Sphinn, Delicious, Facebook, Mixx, Google, Furl, Reddit, Spurl, StumbleUpon, dan Technorati, seperti nampak pada gambar berikut (lihat contoh di bagian bawah blog ini):
Unuk menambahkan icon-icon ini kedalam halaman artikel, kamu bisa mengikuti langkah-langkah berikut:
Gimana, bagus kan?. Jika gambar icons-nya terlalu rapat atau terlalu renggang, lakukan editing pada kode CSS-nya yang diberi keterangan "jarak antargambar".
Ok coy, selamat mencoba.....
Lantas mengapa memasang Social Bookmark ini perlu? Karena menurut informasi yang saya baca, memasang Social Bookmark merupakan salah satu cara mudah untuk melakukan promosi terhadap situs yang kita miliki. Oleh sebab itu kita perlu memasang Social Bookmark pada setiap halaman artikel dalam situs kita.
Nah, Icons Social Bookmarking yang akan kita pasang pada halaman artikel blog kita adalah Digg, Sphinn, Delicious, Facebook, Mixx, Google, Furl, Reddit, Spurl, StumbleUpon, dan Technorati, seperti nampak pada gambar berikut (lihat contoh di bagian bawah blog ini):
- Login ke akun Blogger, pilih Tata Letak, lalu pilih Edit HTML.
- Lakukan duplikasi template untuk berjaga-jaga jika terjadi kekeliruan.
- Beri tanda centrang pada Expand Template Widget.
- Kopikan kode CSS berikut dan letakkan 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; opacity: .4; -moz-opacity: .4; filter: alpha(opacity=40); } .sociable img:hover { opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); } - Kemudian cari kode <data:post.body/> (gunakan Control F atau F3). Jika ada dua buah, pilihlah yang pertama.
- Kopikan script berikut dan letakkan setelah <data:post.body/> yang pertama:
<!-- Awal Social Bookmark --> <div class='sociable'> <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='http://sites.google.com/site/ruangsc/imgsb/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='http://sites.google.com/site/ruangsc/imgsb/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='http://sites.google.com/site/ruangsc/imgsb/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='http://sites.google.com/site/ruangsc/imgsb/facebook.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='http://sites.google.com/site/ruangsc/imgsb/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='http://sites.google.com/site/ruangsc/imgsb/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='http://sites.google.com/site/ruangsc/imgsb/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='http://sites.google.com/site/ruangsc/imgsb/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='http://sites.google.com/site/ruangsc/imgsb/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='http://sites.google.com/site/ruangsc/imgsb/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='http://sites.google.com/site/ruangsc/imgsb/technorati.png'/></a></li> </div> <!-- Akhir Social Bookmark -->
- Simpan hasil kerjaan kamu, lalu buka salah satu artikel kamu untuk melihat hasilnya.
Gimana, bagus kan?. Jika gambar icons-nya terlalu rapat atau terlalu renggang, lakukan editing pada kode CSS-nya yang diberi keterangan "jarak antargambar".
Ok coy, selamat mencoba.....
15 komentarPosting Komentar
Ok Guru...
Nuhun pisan. ASa simpel nya ieu mah teu jelimet, hehe
Nuhun ah...
Hai... Kang Enes, sudah kembali dari jalan-jalan rupanya. Teu rusuh ayeuna mah?
Nuhun ya atas link picassa-nya. Tapi belom dicoba da teu acan tiasa ngabagi waktos kanggo utak-atik blog. Tapi udah janjian sareng Ritma bade "beberes". Mudah2an sukses.
Makasih infonya...
salam sobat
trims ilmunya,,
saya akan mencoba juga menambah icons social brookmarking ini,,yang penting coba2 dulu.
trims doanya ,bang ENES.
Makasih, infonya kang.
+ lg neh wawasan TuTornya, nuhun mang !
Terima kasih infonya Kang...
iyah bagus kang...(bari lirik² ka Lina Gustina)
mamacih kang tutornyah...
Makasih kang,tutorialnya langsung di praktekin.
Info yang menarik!
Terima kasih sekali coba langsung berhasil, kenali bog aku kawan
Mass? kok g muncul neh??? knp y? mohon pencerahanya y...trimz!!
Makasih ....!!!
Sukses script - nya terinstall
Thanks info... sdh terpasang di ifasmart.com
Terimakasih sudah jadi silahkan berkunjung blog saya :)
Tambahkan Komentar
Terimakasih atas semua apresiasi yang sobat berikan.