Cara Menambahkan Icon Social Bookmark di Sidebar Blog

Seringkali kita jumpai pada website atau blog pernak-pernik icon yang unik dan eye candy di sidebar atau ditempat lain yang menarik perhatian kita. Dengan menggunakan plugin atau tema untuk CMS wordpress dari wordpress.org, akan lebih mudah untuk menampilkan icon tersebut atau dengan menggunakan template yang sudah menyediakan icon social bookmark yang siap pakai. Lalu bagaimana jika kita menggunakan masih menggunakan blog di wordpress.com?
Coba anda lihat di sebelah kanan sidebar blog ini, terdapat icon social bookmark yang cukup menarik. Nah, sebenarnya untuk memasang icon tersebut sangat mudah. Tinggal di-copy-kan code di bawah ini ke sidebar widget blog anda. Masih bingung? Lihat gambar di bawah ini:

Keterangan gambar:
Klik menu Apperance – Widget untuk menuju ke panel manajemen widget anda
Geser atau drag [widget text] ke sidebar yang akan diberikan icon (bisa di bagian footer, sidebar kanan, kiri, tergantung selera dan ketersediaan letak sidebar di tema/template anda)
Paste-kan kode di bawah (sesuai icon yang dipilih) ke kolom [widget text/html] yang telah anda drag ke sidebar.
Setelah di paste code-nya, jangan lupa klik [save] atau [simpan].

01	<div style="margin-top:10px;"><a href="alamat_facebook_anda" title="Profil Facebook Penulis" target="_blank"><img style="margin:0 -15px 0 0;" src="http://rheedo.files.wordpress.com/2011/01/icontexto-drink-web20-facebook.png" /></a>
02

03	<a href="alamat_twitter_anda[http://twitter.com/user]" title="Twitter Penulis" target="_blank"><img style="margin:0 -15px 0 0;" src="http://rheedo.files.wordpress.com/2011/01/icontexto-drink-web20-twitter.png" /></a>
04

05	<a href="alamat_yahoo_profile_anda" title="Yahoo Profile" target="_blank"><img style="margin:0 -15px 0 0;" src="http://rheedo.files.wordpress.com/2011/01/icontexto-drink-web20-yahoo.png" /></a>
06

07	<a href="alamat_myspace_anda" title="Myspace saya" target="_blank"><img style="margin:0 -15px 0 0;" src="http://rheedo.files.wordpress.com/2011/01/icontexto-drink-web20-myspace.png" /></a>
08

09	<a href="alamat_web_album_picasa" title="web album picasa" target="_blank"><img style="margin:0 -15px 0 0;" src="http://rheedo.files.wordpress.com/2011/01/icontexto-drink-web20-picasa.png" /></a>
10

11	<a href="alamat_feedBurner_anda" title="Feed Burner" target="_blank"><img style="margin:0 -15px 0 0;" src="http://rheedo.files.wordpress.com/2011/01/icontexto-drink-web20-feedburner.png" /></a>
12	</div>

Keterangan kode:
Sebenarnya prinsip ini menggunakan style biasa. Menggunakan tag div untuk membuat area dari icon ini beserta style. Karena kita tidak bisa menggunakan style berdasarkan CSS yang di-embed kan, maka kita memasukkan style dari tag div tersebut langsung pada tag div-nya.
Contohnya :
style="margin-top:10px;
Pada code style div ini, diatur untuk batas atas atau margin-top bernilai 10 px. Hal ini tidak mutlak adanya, sehingga anda bisa merubah dengan nilai sesuka anda. Sesuaikan dengan tema yang anda pakai dalam blog anda. Kalau dalam blog ini menggunakan nilai 10 px untuk batas atasnya. Jadi cobalah memakai cara trial-error, coba dan coba lagi, dengan mengubah nilai batas atasnya sampai ditemukan posisi atau nilai yang paling pas dengan tema di blog anda.
Nah, code selanjutnya yaitu,
<a href="alamat_facebook_anda" title="Profil Facebook Penulis" target="_blank">
Gantilah alamat_facebook_anda dengan url atau alamat profil facebook anda. Tidak tahu tempatnya, coba buka facebook, kemudian login dan klik kanan pada menu [profile] anda, dan pilih [copy link address], kemudian paste-kan di code
<a href="alamat_facebook_anda" title="Profil Facebook Penulis" target="_blank">,
Contoh:
<a href="http://facebook.com/rheedo" title="Profil Facebook Penulis" target="_blank">
Title bisa diganti sesuai dengan keinginan anda, dan target _blank ini digunakan agar pada saat pengunjung meng-klik icon ini, maka secara otomatis profil facebook anda akan terbuka melalui tab baru atau pada jendela baru.
Code <img style="margin:0 -15px 0 0;" mengatur agar batas dari tiap icon lebih dekat ke arah kanan (bernilai negatif), coba rubah kode diatas dengan menghilangkan nilai negatif, dan terapkan atau simpan dan kemudian lihat hasilnya. Nilai ini sifatnya tidak mutlak, sehingga bisa dirunah sesuai dengan tema blog anda. Tetap memakai cara trial-eror penjelasan lebih lanjut mengenai style pada tiap tag bisa dilihat di sini [www.w3school.com].
Nah, hal yang sama juga bisa diterapkan pada url/alamat anda yang lain, seperti twitter, yahoo, picasa, myspace, dan feedburner. Tinggal mengganti url (yang dicetak tebal) dengan url anda.