Thursday, December 3, 2009
Cara Membuat Link Dengan Icon
Berhubung saya baru dapet ilmu baru dari teman saya mengenai cara membuat suatu Link dengan menggunakan Icon sesuai dengan Icon alamat yang akan kita tuju, sebagai contoh kita akan membuat suatu link untuk membuka facebook dengan menggunakan logo facebook. Kali ini saya akan mencoba untuk menjelaskan sejelas-jelasnya supaya mudah di pahami oleh orang lain juga. Jadi mohon maaf aja kalau masih ada kekurangan dari penjelasan yang saya jelaskan ini. Maklum aja kan masih "NEWBIE" dalam membuat suatu tulisan di dalam blog. Jadi sama-sama belajar aja ya. =)
Langkah awalnya adalah dengan menambahkan gadget pada blog kita. Pilih gadget HTML/JavaScript. Setelah itu muncul kotak dialog, kita isi Judul sesuai dengan yang kita inginkan untuk penjelasan di blog kita. Lalu isikan bagian Konten dengan Script seperti di bawah ini :
<div id="minitwix_social">
<a href="http://www.facebook.com"><img border="0" width="30" alt="" style="float:left;margin:10px 5px 0;border:0px solid" src="http://www.texidor.com/media/stalker/icons/facebook.png" height="30"/></a>
</div>
Script diatas adalah salah satu contoh untuk membuat link ke Facebook dengan menggunakan icon Facebook. Jika kita mau menambahkan icon-icon yang lain, cukup menambahkan saja script yang sama dengan yang diatas ini. Hanya saja kita rubah tujuan link ini dengan mengganti di bagian a href="http://www.facebook.com" menjadi alamat web ke yang kita tuju selanjutnya. Lalu ganti juga di bagian src="http://www.texidor.com/media/stalker/icons/facebook.png" dengan URL icon dimana icon itu berada. Sedikit info dari saya, coba buka www.texidor.com/media/stalker/icons/ dulu deh. Di web itu terdapat beberapa icon yang dapat kita ambil untuk dijadikan Link Icon pada blog kita. Selain itu, jika kita mau menambahkan link icon yang lain (misal Google), letakan kode :
<a href="http://www.google.com"><img border="0" width="30" alt="" style="float:left;margin:10px 5px 0;border:0px solid" src="http://www.texidor.com/media/stalker/icons/google.png" height="30"/></a>
diantara kode :
<div id="minitwix_social">
dan
</div>
Selamat Mencoba...
=)
- Labels: Tutorial Blogger