Membuat menu sendiri sesuai keinginan di blog

Nah, sekarang saatnya kita belajar mempercantik blogspot dengan kode HTML atau lebih tepatnya kode css
apa sih yang mau kita pelajari saat ini ?
kita akan mempelajari bagaimana membuat gambar yang apabila disorot oleh mouse (cursor) maka gambar tersebut akan berubah, catatan : tapi bukan berubah jadi spiderman ya :D
oke, kita mulai saja ya
ini dia caranya :

Anda buat atau cari gambar yang mirip, untuk kali ini saya menggunakan gambar yang saya buat sendiri dari Photoshop, ada 2 gambar tetapi cuma dibedakan warnanya saja

gambar 1

gambar 2

Lalu kita siapkan kode berikut

<style type="text/css">
a.pic .image2{display:none}
a.pic:hover .image1 {display:none}
a.pic:hover .image2 {display:inline}
</style>
<center><a class="pic" href="http://tekomuter.blogspot.com/search/label/html" >
<img class="image1" src="URL gambar 1" alt="Belajar HTML" title='Disini kita akan belajar mengenai HTML beserta kode-kodenya'/>
<img class="image2" src="URL gambar 2" alt="Belajar HTML" title='Disini kita akan belajar mengenai HTML beserta kode-kodenya'/>
</a></center>

Selanjutnya

kalian ganti kode yang berwarna BIRU dengan link yang akan dituju saat gambar di klik,
ganti kode yang berwarna MERAH dengan URL gambar yang telah anda buat atau URL gambar yang ingin anda gunakan.
ganti kode yang berwarna HIJAU dengan Keterangan yang ingin anda berikan pada gambar tersebut

Tinggal anda taruh / letakan kode tersebut sesuai dengan keinginan anda, boleh di html, boleh juga di Gadget HTML pada Tata Letak, boleh juga pada side bar
kemudian klik simpan

Jika langkah tersebut sudah dilaksanakan dengan benar, maka jadinya seperti dibawah ini

Mudah kan ?
nah "sekali mendayung, dua tiga pulau terlampaui" nih, hehe
apa sih maksudnya ?
maksudnya jika kalian sudah bisa membuat seperti diatas, anda bisa membuat menu dengan memanfaatkan gambar-gambar tersebut
caranya tinggal kalian copy / duplikat kode tersebut sesuai dengan jumlah menu yang ingin anda buat
contohnya seperti di BLOG ini, itu tuh menu yang dibawa HEADER
sperti ini nih penampakannya, hihihi