Cara Menambahkan Efek Image Di Depan Link

Seperti yang telah dijelaskan sebelumnya, bahwa
ada bermacam efek yang bisa kita terapkan pada
link yang ada di blog yang kita miliki.

Agar Anda tidak penasaran dengan apa itu efeknya,
sebaiknya langsung saja terapkan pada blog Anda
dan ikuti langkahnya seperti berikut ini :

CARA PERTAMA :

1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript

2.   Copy kode yang ada di bawah ini
      kemudian paste ke dalam kontennya :

<script language="JavaScript"><br /> /*<br /> Arrow onMouseover<br /> By Clarence Eldefors (http://www.freebox.com/cereweb)<br /> Visit http://javascriptkit.com for this and over 400+ other scripts<br /> */<br /> <br /> IMAGE01 = "http://www.javascriptkit.com/script/script2/on.gif" <br /> IMAGE02 = "http://www.javascriptkit.com/script/script2/off.gif"<br /> <br /> function imgover(imgname){<br /> imgname.src = IMAGE01<br /> }<br /> <br /> function imgout(imgname){<br /> imgname.src = IMAGE02<br /> }<br /> //<br /> </script><br /> <br /> <p><img name="IMAGE01" src="http://www.javascriptkit.com/script/script2/off.gif" width="10" height="10" border="0" /> <br /> <a href="URL Link 1" onmouseover="imgover(IMAGE01)" onmouseout="imgout(IMAGE01)">Keterangan Link 1</a><br /> <br /><img name="IMAGE02" src="http://www.javascriptkit.com/script/script2/off.gif" width="10" height="10" border="0" /> <br /> <a href="URL Link 2" onmouseover="imgover(IMAGE02)" onmouseout="imgout(IMAGE02)">Keterangan Link 2</a><br /> <br /><img name="IMAGE03" src="http://www.javascriptkit.com/script/script2/off.gif" width="10" height="10" border="0" /> <br /> <a href="URL Link 3" onmouseover="imgover(IMAGE03)" onmouseout="imgout(IMAGE03)">Keterangan Link 3</a></p>

KETERANGAN :

URL Link 1 s/d 3, gantilah dengan URL Link Anda.

Ganti juga keterangan URL Link nya.

Tambahkan link yang anda miliki dengan
mengikuti kode-kode seperti sebelumnya.

CARA KEDUA :

Cara kedua ini ditempuh bilamana cara pertama

yang anda lakukan belum menampakkan hasil.

Tapi apabila cara pertama tersebut di atas telah

berhasil, maka abaikan saja cara yang kedua ini.

Adapun untuk cara yang kedua ini adalah :

1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript

2.   Copy kode yang ada di bawah ini
      dan paste ke dalam kontennya,
      kemudian simpan.

<p><img name="IMAGE01" src="http://www.javascriptkit.com/script/script2/off.gif" width="10" height="10" border="0" /> <br /> <a href="URL Link 1" onmouseover="imgover(IMAGE01)" onmouseout="imgout(IMAGE01)">Keterangan Link 1</a><br /> <br /><img name="IMAGE02" src="http://www.javascriptkit.com/script/script2/off.gif" width="10" height="10" border="0" /> <br /> <a href="URL Link 2" onmouseover="imgover(IMAGE02)" onmouseout="imgout(IMAGE02)">Keterangan Link 2</a><br /> <br /><img name="IMAGE03" src="http://www.javascriptkit.com/script/script2/off.gif" width="10" height="10" border="0" /> <br /> <a href="URL Link 3" onmouseover="imgover(IMAGE03)" onmouseout="imgout(IMAGE03)">Keterangan Link 3</a></p>

3.   Masuk ke Edit HTML

5.   Letakkanlah di atas kode </head>,
      kode yang berikut ini, kemudian
      simpanlah template anda.

<script language="JavaScript"><br /> /*<br /> Arrow onMouseover<br /> By Clarence Eldefors (http://www.freebox.com/cereweb)<br /> Visit http://javascriptkit.com for this and over 400+ other scripts<br /> */<br /> <br /> IMAGE01 = "http://www.javascriptkit.com/script/script2/on.gif" <br /> IMAGE02 = "http://www.javascriptkit.com/script/script2/off.gif"<br /> <br /> function imgover(imgname){<br /> imgname.src = IMAGE01<br /> }<br /> <br /> function imgout(imgname){<br /> imgname.src = IMAGE02<br /> }<br /> //<br /> </script>

Selamat mencoba, good luck!