menu bergambar

Sebenarnya sudah usang tampilan menu seperti ini dan lagi sudah banyak juga yang tahu, namun karena sudah keras hati ingin juga diposting ya egepe meneketehe lah suka-suka gue hehehe...
Kurang lebih tampilannya akan seperti ini

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.masbugie.com/">Edit Disini</a></li>
• <li><a href="http://www.edit me.com//">Edit Disini</a></li>
• <li><a href="http://www.edit me.com/">Edit Disini</a></li>
• <li><a href="http://edit me.com">Edit Disini</a></li>
• <li><a href="http://edit me.com">Edit Disini</a></li>
• <li><a href="http://edit me.com">Edit Disini</a></li>
• <li><a href="http://edit me.com">Edit Disini</a></li>
• </ul></div>