Pasang Menu dengan Gambar

Blogger Mania yang mengingnkan penggunaan menu dengan bentuk gambar ..dan ketika disorot maouse atau pointer pas dengan gambar akan bergerak gambarnya naik, jadi menu sejajar tetapi bukan teks melainkan gambar dan teksnya akan berada disebelahnya ketika disorot mouse anda

Langkah :
1. Login ke Blogger
2. masuk ke menu Tataletak
3. masuk ke menu Edit HTML
4. copy kode di bawah ini

/*NAVBAR MENU by kyipe<br />--------------------------------------------*/<br />#NavbarMenu {<br /> background:transparent;<br /> width: 940px;<br /> height: 50px;<br /> font-size: 12px;<br /> font-family: verdana;<br /> color: #FFF;<br /> font-weight: bold;<br /> margin: 0;<br /> padding: 0;<br />}<br />#NavbarMenuleft {<br /> width: 641px;<br /> height: 65px;<br /> float: left;<br /> margin: 0;<br /> padding: 0;<br /> background:url(http://www.geocities.com/sma_muh3_kaliwungu/navbarsma.png) no-repeat;<br />}<br />#NavbarMenuright {<br /> width: 279px;<br /> font-size: 11px;<br /> float: right;<br /> margin: 0;<br /> padding: 6px 0 0;<br />}<br />#nav {<br /> margin: 0;<br /> padding: 0;<br />}<br />#nav ul {<br /> float: left;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br />}<br />#nav li {<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br />}<br />#nav li a, #nav li a:link, #nav li a:visited {<br /> color: #FFF;<br /> display: block;<br /> font-size: 16px;<br /> font-family: verdana;<br /> font-weight: bold;<br /> text-transform: lowercase;<br /> margin: 0;<br /> padding: 15px 15px 8px;<br />}<br />#nav li a:hover, #nav li a:active {<br /> color: #666;<br /> margin: 0;<br /> padding: 9px 15px 8px;<br /> text-decoration: none;<br /> font-weight:bold;<br />}<br />#nav li li a, #nav li li a:link, #nav li li a:visited {<br /> width: 150px;<br /> color: #FFF;<br /> font-size: 16px;<br /> font-family:verdana;<br /> font-weight: normal;<br /> text-transform: lowercase;<br /> float: none;<br /> margin: 0;<br /> padding: 7px 10px;<br /><br />}<br />#nav li li a:hover, #nav li li a:active {<br /> color: #FFF;<br /> padding: 7px 10px;<br />}<br />#nav li {<br /> float: left;<br /> padding: 0;<br />}<br />#nav li ul {<br /> z-index: 9999;<br /> position: absolute;<br /> left: -999em;<br /> height: auto;<br /> width: 170px;<br /> margin: 0;<br /> padding: 0;<br />}<br />#nav li ul a {<br /> width: 140px;<br />}<br />#nav li ul ul {<br /> margin: -32px 0 0 171px;<br />}<br />#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {<br /> left: -999em;<br />}<br />#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {<br /> left: auto;<br />}<br />#nav li:hover, #nav li.sfhover {<br /> position: static;<br />}

5. Paste kode di atas "]]>bskin"


6. kemudian SIMPAN TEMPLATE
7. masuk ke menu Elemen Halaman
8. pilih/klik Tambah Gadget
9. pilih HTML/Java Script
10. copy kode dibawah ini

<div id="NavbarMenu"><br /> <div id="NavbarMenuleft"><br /> <ul id="nav"><br /><li><a href="http://kyipe.blogspot.com/" title="Back To Front"><br /><img border="0" src="http://www.postsmile.net/img/8/858.gif" /></a></li><br /><li><a href="http://seller-k.blogspot.com/" title="Freeware"><br /><img border="0" src="http://www.iconspedia.com/uploads/912938731.png" /></a></li><br /><li><a href="http://template-k.blogspot.com/" title="Template Blogger"><br /><img border="0" src="http://www.iconspedia.com/uploads/1212496167.png" /></a></li><br /><li><a href="http://modifblog.blogspot.com/" title="Modifikasi Blogger"><br /><img border="0" src="http://www.iconspedia.com/uploads/1675476788.png" /></a></li><br /> </ul><br /> </div></div>

11. Paste pada kotak yang disediakan
12. simpan


klik untuk Pratinjau (click for Live Demo) :