Membuat Menu dengan Mousehover Foto Sendiri

Tampilan menu yang unik yang saya ambil dari Mas Bugie walau sudah banyak juga yang tahu, tetapi saya tertarik untuk postingkan disini. 
Kan siapa tau ada teman gw yang tertarik dan membuat menu dibaliknya foto si doi atau miyabi! Ciyus Miapa? 
Langsung aje ye liat penampakannye di bawah ini:

• Edit Disini
• Edit Disini
• Edit Disini
• Edit Disini
• Edit Disini
• Edit Disini
• Edit Disini

Cara pasangnya gampang koq, tinggal masuk menu Rancangan-Elemen Laman-pilih Tambah Gadget yang berada di atas kolom postingan -HTML/JavaScript- paste kode dibawah ini :

<br/><style type="text/css">.wireframeauramenu{ font-weight: bold; font-size: 90%;/*sesuaikan */ width: 100%; /*sesuaikan */ } .wireframeauramenu ul{ border: 1px solid #000; /*sesuaikan ketebalan garis luar menu*/ padding: 5px 0;/*sesuaikan lebar vertikal*/ margin: 0; text-align: left; /*sesuaikan pada "left", "center", atau "right"*/ overflow: hidden; } .wireframeauramenu ul li{ display: inline; } .wireframeauramenu ul li a{ color: #330099; padding: 6px 12px 6px 6px; margin: 0; text-decoration: none; border-right: 1px dashed #000; /*border diantara menu item*/ } .wireframeauramenu ul li a:hover{ color: black; background: transparent url(http://gambar anda jpg atau gif) center center no-repeat; /*background menu pada Mouseover*/ } </style><br/><div class="wireframeauramenu"><ul><li><a href="http://www.edit miapa.com/">Edit Disini</a></li><li><a href="http://www.edit miapa.com//">Edit Disini</a></li><li><a href="http://www.edit miapa.com/">Edit Disini</a></li><li><a href="http://edit miapa.com">Edit Disini</a></li><li><a href="http://edit miapa.com">Edit Disini</a></li><li><a href="http://edit miapa.com">Edit Disini</a></li><li><a href="http://edit miapa.com">Edit Disini</a></li></ul></div>
Coba aja Jangan Ragu, saya dah coba sukses kok!

sumber : www.masbugie.com