Cara Buat Widget Gambar Dengan Hover Keren

---

---

Yo. Masih disini. Di blog Absurd ini. Sekarang kita akan belajar membuat widget gambar hover. Jarang-jarang belajar nih. haha. Lanjut.. yah, widget ini di tampilkan dengan format Hover, jadi ketika pointer mouse kamu menuju ke arah gambar/widget itu, maka gambar itu bisa berubah jadi yang kamu mau. Misal kayak gini nih...

Gimana? Keren ya?

Contoh Lainnya.

Gimana? Kerenan yang di atasnya ya? muehaha..

Oke lets make this easy. Pertama kamu harus menyiapkan gambar. yap. kamu harus menyiapkan 2 gambar yang "hampir sama" seperti...

dan

Udah bikin gambar? lalu kamu upload. Saran gue sih uploadnya di Facebook aja. Biar apa? kok difacebook? ya biar ganteng keliatannya. maksudnya biar mudah.

Udah di upload? yaudah. Sekarang tinggal, Buka Layout, Add Gadget/widget, HTML, dan tambahkan code berikut.
----------------------------------------------------------------------------

<div class="widget-content">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<span style="font-family: 'segoe print', sans-serif; font-size: large;">TULISAN KAMU DISINI <a href="URL_TULISAN_KAMU" target="_blank">NAMA_LINK</a></span></div><br />
<div style="text-align: center;">

<a href="URL_TUJUAN KAMU" target="_blank"><img onmouseout="this.src=&#39;ISI_INI_DENGAN_URL_GAMBAR_PERTAMA&#39;" onmouseover="this.src=&#39;ISI_INI_DENGAN_URL_GAMBAR_KEDUA&#39;" src="ISI_INI_DEGAN_URL_GAMBAR_PERTAMA" /></a></div>
</div>
</div>
<a href="http://munafsiblog.blogspot.com/2012/12/cara-buat-widget-gambar-dengan-hover.html"><small>Cool Widget</small></a>

----------------------------------------------------------------------------

Lalu klik Save. udah deh. Gampang ya? iya emang.

Tapi, ada lagi yang lebih simple. Nih kodenya:

--------------------------------------------------------------------------------

<div class="widget-content">
<a href="URL_TUJUAN KAMU" target="_blank"><img onmouseout="this.src=&#39;ISI_INI_DENGAN_URL_GAMBAR_PERTAMA&#39;" onmouseover="this.src=&#39;ISI_INI_DENGAN_URL_GAMBAR_KEDUA&#39;" src="ISI_INI_DEGAN_URL_GAMBAR_PERTAMA" /></a></div>
</div>
</div>
<a href="http://munafsiblog.blogspot.com/2012/12/cara-buat-widget-gambar-dengan-hover.html"><small>Cool Widget</small></a>

-------------------------------------------------------------------------------------

Keterangan:
*Teks Merah: Ganti dengan URL gambar pertama. Caranya klik kanan pada gambar pertama yang kamu upload di facebook tadi, kemudian pilih Copy Image Url. Pastekan ke teks merah itu.
*Teks Biru: Ganti dengan URL gambar ke dua. Caranya klik kanan pada gambar kedua yang kamu upload di facebook tadi, kemudian pilih Copy Image Url. Pastekan ke teks biru itu.
*Teks Kuning: Ganti dengan teks kamu sendiri, misal "Twitter Widget".
*Teks Orange: Ganti dengan URL yang kamu mau.
*Teks Ungu: Isi dengan nama URL yang kamu mau.
*Teks Hijau: Isi dengan Link atau URL tujuan kamu.

Udah semoga artikel ini berguna untuk nusa, bangsa, dan agama. dan tentunya untuk blogger kece kayak kamu.

Wassalam...