kali ini saya ingin membahas
menu statis melayang di atas. untuk kawan kawan bloger, contohnya hasil dari pembuatan menu seperti menu diatas blog ini.jika ada ingin membuat seperti ini ikuti langkah langkah ini.
- pertama login dusboard blog
- pilih menu rancangan lalu pilih tab edit HTML
- download dulu script anda
- centang
- cari ]]></b:skin>
- lalu paste kode di bawah ini setelah kode diatas ]]></b:skin>
- #trik_top{background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXZYD8t7E0g-GV0xYUCg2b9bUZRJ1GC6XKCUP58HUETZrjAv_OWMLSTWx5G7h2XljZy1rQ4pzfv5dGSo2s9q63aAYedANH2KxigtXqDQl3CxqpALN86MjkpVrkAXIzAvdNzncwfY8loAk/s400/button1.gif) repeat-x top; position:fixed; _position:absolute; Top:0px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+document.documentElement.clientWidth - offsetWidth)}
- dan kopi kode di bawah ini dan paste setelah langkah ke 6
- /* ----- NAVBAR MENU ----- */
#NavbarMenu{width:1102px; height:30px; float:left; background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXZYD8t7E0g-GV0xYUCg2b9bUZRJ1GC6XKCUP58HUETZrjAv_OWMLSTWx5G7h2XljZy1rQ4pzfv5dGSo2s9q63aAYedANH2KxigtXqDQl3CxqpALN86MjkpVrkAXIzAvdNzncwfY8loAk/s400/button1.gif) repeat-x top; color:#3D81EEmargin:0 auto 0; padding:0; font:bold 11px Arial,Tahoma,Verdana; border-top:1px solid #AFAFAF; border-bottom:1px solid #FFF}
#NavbarMenuleft{background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXZYD8t7E0g-GV0xYUCg2b9bUZRJ1GC6XKCUP58HUETZrjAv_OWMLSTWx5G7h2XljZy1rQ4pzfv5dGSo2s9q63aAYedANH2KxigtXqDQl3CxqpALN86MjkpVrkAXIzAvdNzncwfY8loAk/s400/button1.gif) repeat-x top; width:1102px; float:left; margin:0; padding:0}
#navright{width:210px; font-size:11px; float:right; margin:0px; padding:3px 5px 0px 0px}
#nav{margin:0; padding:0}
#nav ul{float:left; list-style:none; margin:0; padding:0}
#nav li{list-style:none; margin:0; padding:0}
#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:capitalize; margin:0; padding:9px 15px; font:normal 14px ARIAL}
#nav li a:hover, #nav li a:active{background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXZYD8t7E0g-GV0xYUCg2b9bUZRJ1GC6XKCUP58HUETZrjAv_OWMLSTWx5G7h2XljZy1rQ4pzfv5dGSo2s9q63aAYedANH2KxigtXqDQl3CxqpALN86MjkpVrkAXIzAvdNzncwfY8loAk/s400/button1.gif) repeat-x top; color:#fff; margin:0; padding:9px 15px; text-decoration:none}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#3D81EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXZYD8t7E0g-GV0xYUCg2b9bUZRJ1GC6XKCUP58HUETZrjAv_OWMLSTWx5G7h2XljZy1rQ4pzfv5dGSo2s9q63aAYedANH2KxigtXqDQl3CxqpALN86MjkpVrkAXIzAvdNzncwfY8loAk/s400/button1.gif) repeat-x top; width:150px; color:#fff; text-transform:capitalize; float:none; margin:0; padding:7px 10px; border-bottom:1px solid #99C9FF; border-left:1px solid #99C9FF; border-right:1px solid #99C9FF; font:normal 15px,}
#nav li li a:hover, #nav li li a:active{background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXZYD8t7E0g-GV0xYUCg2b9bUZRJ1GC6XKCUP58HUETZrjAv_OWMLSTWx5G7h2XljZy1rQ4pzfv5dGSo2s9q63aAYedANH2KxigtXqDQl3CxqpALN86MjkpVrkAXIzAvdNzncwfY8loAk/s400/button1.gif) repeat-x top; color:#3D81EE; padding:7px 10px}
#nav li{float:left; padding:0}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0}
#nav li ul a{width:140px}
#nav li ul ul{margin:-32px 0 0 171px}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em}
#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{left:auto}
#nav li:hover, #nav li.sfhover{position:static} - setelah itu cari kode </body> dan paste kode di bawah ini di atas kode</body>
- <div id='trik_pojok'>
<div id='navbarmenu'>
<div id='navbarmenuleft'>
<ul id='nav'>
<li><a href="http://the-plick.blogspot.com">Home</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Hardware">Hardware</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Software">Software</a>
<ul>
<li><a href="http://the-plick.blogspot.com/search/label/Antivirus">Antivirus</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Billing">Billing</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Driver">Driver</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Utility">Utility</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Browser">Browser</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Theme">Theme</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/OtherSoftware">Other Software</a></li>
</ul>
</li>
<li><a href="http://the-plick.blogspot.com/search/label/Tutorial">Tutorial</a>
<ul>
<li><a href="http://the-plick.blogspot.com/search/label/Troubleshooting">Troubleshooting</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Maintenance">Maintenance</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Design">Design</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Trick">Trick</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Programing">Programing</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Networking">Networking</a></li>
</ul>
</li>
<li><a href="http://the-plick.blogspot.com/search/label/Entertainment">Entertainment</a>
<ul>
<li><a href="http://the-plick.blogspot.com/search/label/Music">Music</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Film">Film</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Galery">Galery</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Game">Game</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Sport">Sport</a></li>
</ul>
</li>
<li><a href="http://the-plick.blogspot.com/search/label/Archives">Archives</a>
<ul>
<li><a href="http://the-plick.blogspot.com/search/label/Education">Education</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Ebook">E-book</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Literature">Literature</a></li>
<li><a href="http://the-plick.blogspot.com/search/label/Motivation">Motivation</a></li>
</ul>
</li>
<li><a href='http://the-plick.blogspot.com/#'>About Me</a>
<ul>
<li><a href='http://www.facebook.com/fendy.uye'>Facebook</a></li>
<li><a href='http://twitter.com/fendy_uye'>Twitter</a></li>
</ul>
</li>
<li><a href='http://www.blogger.com'>Log In</a></li>
<div id='navright'>
<form action='http://the-plick.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id="s" name="q" type="text" value="" /> <input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
</ul>
</div>
</div>
</div> - keterangan: ganti http://the-plick.blogspot.com dengan alamat blog anda
- untuk mengedit panjang menu anda cari script ini #NavbarMenu{width:1102px; ubah ukuran wide sesuai kebutuhan
- untuk mengedit letak dari menu anda cari kode ini _position:absolute; Top:0px; left:0px ubah posisi sebelah kiri atau atas.
- untuk menu silahkan anda edit sendiri sesuai dengan kebutuhan menu blog anda.
- simpan template dan lihat hasilnya
- akhir kata selamat mencoba dan terima kasih udah membaca tutorial yang kuno ini
0 komentar :
Posting Komentar