Pelajari

Browse Manual » Wiring » cara » header » melayang » membuat » menu » Cara Membuat Menu Header Melayang

---

Cara Membuat Menu Header Melayang

Cara Membuat Menu Header Melayang – Kali ini akan kami ajarkan tips blogging mengenai cara pembuatan menu header yang melayang.

Berikut cara membuat menu header melayang di blog.

1. Login ke blogger => Rancangan => edit HTML

2. Kemudian copy kode CSS di bawah ini dan tempatkan kode tersebut di atas ]]></b:skin>

#NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #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 { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active { background: #7f7f7f; color: #222222; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #7f7f7f; width: 150px; color: #fffff; font-size: 11px; font-family: trebuchet ms,; font-weight:strong; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #7f7f7f; 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; }

3. Kemudian simpan tamplate

4. Lalu masuk ke tata letak => tambah gatget => pilih HTML/Javascript lalu copy paste kode di bawah ini.

<style type="text/css">#gb{position:fixed;top:0px;z-index:+1500;}* html #gb{position:relative;} .gbcontent{float:right;background:#fff;padding:1px;}</style><script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);gb.opened = !gb.opened;}function moveGB(x0, xf){var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir-100;gb.style.top = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}}</script><div id="gb"><div class="gbtab" onclick="showHideGB()"></div><div class="gbcontent"> <div class="menuhorisontal"><ul id="nav"><li>Home</li><li>Profil</li><li>Kontak</li><li>Photoshop</li><li>CorelDraw</li><li>Trik Internet<ul><li>Download</li></ul></li><li>Softwere</li><li> Blogger <ul><li>Artikel</li><li>Daftar Isi</li><li>Cek Berat Blog</li><li>Parse HTML Blogger</li><li>Tukar Link</li></ul></li><li><li>GuestBook </li><li>TV Online <ul><li>Global TV </li><li>MNC TV </li><li>Game Online </li><li>Photoshop Online</li></ul></li></li></ul></div><script type="text/javascript">var gb = document.getElementById("gb");gb.style.center = (20-gb.offsetWidth).toString() + "px";</script> </div></div>

Note : Ganti tulisan URL BLOG ANDA dengan alamat blog kamu.

5. Langkah terakhir yaitu silahkan klik simpan. lalu lihat perubahannya.

Itulah Cara Membuat Menu Header Melayang, silahkan diterapkan pada blog kamu yah.