Cara Membuat Menu Mendatar

08 Juli 2011
Salam Hormat kami Kepeda Semua teman teman
Sebelum kita meneruskan tentang cara membuat menu mendatar saya ingin berceloteh sedikit sebab saya juga sebelumnya mencari dan mencoba mengedit kutak katik yang namanya LINK search engine Alhamdulillah Akhirnya ketemu juga,perlu saya ingatkan pada teman teman untuk menu asal saja kita sudah tahu yang namanya LINK seperti <a href>, <ul>, <li>, </ul>, </li> dan <br> ini adalah code spasi.Tidak perlu kita bicara panjang Mari kita masuk pada pelajaran berikut :
Contohi saja Link Berikut ini :

Cara Membuat Menu Mendatar di Blogspot

Dengan Sub Menu Sekaligus  Oleh  Mahmud H.Huseng

Copy    LINK   Dibawah ini  Simpan Persis diatas   ]]></b:skin>

#WadahMenu{background: transparent;height:40px;margin:0 auto; padding:0; font:bold 8px Arial,Tahoma,Verdana; text-decoration:none}
#Menu{margin:0; padding-top:3px; padding-left:3px}
#Menu ul{float:left; list-style:none; margin:0;padding:0; text-decoration:none}
#Menu li{list-style:none; margin:0; padding:0; text-decoration:none}
#Menu li a, #Menu li a:link, #Menu li a:visited{color:white;background:red; display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;font-family:Arial, Helvetica, Sans-serif;text-shadow:0 1px 0 black;margin:0 0px 0 0;padding:9px 3px 9px;border-radius:12px 12px 12px 12px;width:79px;text-align:center;border:1px solid black;}
#Menu li a:hover, #Menu li a:active{background:black; color: white; border:1px solid black; text-decoration:none}
#Menu li li a, #Menu li li a:link, #Menu li li a:visited{background:red; width:150px; color:white;
text-transform:lowercase; float:none; margin:0; padding:7px 10px; border-bottom:1px solid #585858; border-left:1px solid #585858;
border-right:1px solid #585858; font:normal

14px Georgia,Times New Roman; text-decoration:none}
#Menu li li a:hover, #Menu li li a:active{background:black; color:white; padding:7px 10px; text-decoration:none}
#Menu li{float:left; padding:0; text-decoration:none}
#Menu li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0; text-decoration:none}
#Menu li ul a{width:140px; text-decoration:none}
#Menu li ul ul{margin:-32px 0 0 171px}
#Menu li:hover ul ul, #Menu li:hover ul ul ul, #Menu li.sfhover ul ul, #Menu li.sfhover ul ul ul{left:-999em}
#Menu li:hover ul, #Menu li li:hover ul, #Menu li li li:hover ul, #Menu li.sfhover ul, #Menu li li.sfhover ul, #Menu li li li.sfhover ul{left:auto}
#Menu li:hover, #Menu li.sfhover{position:static}
#Cari{background:red;float:left;margin:0; padding-top:3px; padding-bottom:3px; ppadding-left:3px;padding-right:3px;border-radius:12px 12px 12px 12px;width:250px;text-align:center;border:1px solid black;}

Kemudian Carilah Kode     </header>  Jika  susah untuk mencarinya  Tekan Saja  Ctrl – F  Copykan

</header>   ini  ke kotak itu, kalau  sudah  muncul ....

Copy      LINK    Dibawah  ini  Simpan  Dibawah    </header>

<div id="WadahMenu">
<script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener("load",
function(){ object[attribute] = val; }, false);
} else {window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<ul id="Menu">
<li><a href="http://bintangduniatvi.blogspot.com/">Beranda</a></li><li><a href="http:// bintangduniatvi.blogspot.com /">Computer</a></li>
<li><a href="#">ARTIKEL</a>
<ul>
<li><a href="#">Pendidikan--></a>
<ul>
<li><a href="http:// bintangduniatvi.blogspot.com /">Artikel Pendidikan</a></li><li><a href="http:// bintangduniatvi.blogspot.com ">Pendidikan Internet</a></li>
<li><a href="http:// bintangduniatvi.blogspot.com ">Silabus dan RPP</a></li>
</ul></li>
<li><a href="#">Religi--></a>
<ul><li><a href="http:// bintangduniatvi.blogspot.com ">Artikel Islam</a></li>
<li><a href="http:// bintangduniatvi.blogspot.com ">Kisah Islam</a></li>
<li><a href="http:// bintangduniatvi.blogspot.com ">Keluarga Sakinah</a></li><li><a href="http:// bintangduniatvi.blogspot.com ">Cantiknya Ilmu</a></li>
<li><a href="http:// bintangduniatvi.blogspot.com ">Puasa</a></li>
<li><a href="http:// bintangduniatvi.blogspot.com ">Islam-Iman-Ikhsan</a></li></ul>
</li>
<li><a href="http:// bintangduniatvi.blogspot.com ">Makalah</a></li>
<li><a href="http:// bintangduniatvi.blogspot.com ">Ekonomi</a></li>
<li><a href="http:// bintangduniatvi.blogspot.com ">Desaku oh Desaku</a></li>
<li><a href="http:// bintangduniatvi.blogspot.com ">Kisah Para Wali</a></li>
<li><a href="http:// bintangduniatvi.blogspot.com ">Cerita Rakyat</a></li>
</ul>
</li>
<li><a href="#">Ebook</a>
<ul>
<li><a href="http:// bintangduniatvi.blogspot.com ">Umum</a></li>
<li><a href="http:// bintangduniatvi.blogspot.com ">Religi</a></li>
<li><a href="http:// bintangduniatvi.blogspot.com ">Aku dan Diriku</a></li>
</ul>
</li></ul>
<div id='Cari'>
<form action='/search' id='searchthis' method='get'>
<input class='textfield' name='q' size='24' type='text' value=''/>
<input class='button' type='submit' value='Search'/>
</form></div>
</div>

Keterangan :  Ganti semua  Tulisan  http://bintangduniatvi.blogspot.com  Tukar  dengan  Link   Http  Blog anda.

Nah Untuk  Menambah  Menu Utama  tinggal  Anda  KETIKKAN 

</li>
<li><a href="">Nama Menu Utama</a>
<ul>
Dan Untuk Menambah Sub Menu atau Anak dari Menu Utama  KETIKKAN

<li><a href="http:// Nama Blog Anda.blogspot.com ">Nama Sub Menu</a></li>
</ul>

Selamat  Mencoba  Semoga berhasil sesuai keinginan anda

Read more »