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
#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;}
#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>
<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="">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>
</ul>
Selamat Mencoba Semoga berhasil sesuai keinginan anda
0 komentar:
Posting Komentar