Cara Buat Menu Dropdown Melayang di Blog

Tweet

Patah Online - Sebelumnya saya ingin mengucapkan selamat menunaikan ibadah puasa, tak terasa kita sudah memasuki hari ke 21 bulan ramadhan, gimana nich sudah ada yang bolong belom yaa.. hhehhe. Uke langsung saja kita menuju ke laptop. Postingan kali ini merupakan kelanjutan dari postingan sebelumnya seputar blogger, yakni Cara pasang menu dropdown di blog.

Dimana di tutorial blogger kali ini saya coba sedikit memodifikasi menu dropdown dengan sedikit tambahan javascript sehingga menu dropdown kita menjadi melayang, contohnya bisa di lihat di blog ini. Bagi anda yang suka memodifikasi menu blog anda seperti saya. dimana berbagai macam menu blog seperti menu horizontal, menu dengan effect mouseover dan Menu melayang di samping kiri saya coba terapkan di blog berharap menemukan menu yang cocok sesui keinginan hati.

Berikut cara membuat menu dropdown melayang di blog.
1. Login ke blogger => Rancangan => edit HTML

2. Bagi sobat yang belum menggunakan menu dropdown, atau di blognya belum menggunakan menu horizontal, silahkan copy kode CSS di bawah ini jangan lupa 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. Klik elemen halaman => 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><a href="http://www.patahonline.com/">Home</a></li>
<li><a href="http://www.patahonline.com/p/about-me.html">Profil</a></li>
<li><a href="http://www.patahonline.com/p/kontak.html">Kontak</a></li>
<li><a href="http://www.patahonline.com/search/label/Photoshop">Photoshop</a></li>
<li><a href="http://www.patahonline.com/search/label/Coreldraw">CorelDraw</a></li>
<li><a href="http://www.patahonline.com/search/label/Trik%20Internet">Trik Internet</a>
<ul>
<li><a href="http://www.patahonline.com/search/label/Aplikasi%2F%20Software">Download</a></li>
</ul>
</li>
<li><a href="http://www.patahonline.com/search/label/tutorial">Softwere</a></li>
<li><a href="http://www.patahonline.com/search/label/Blogger"> Blogger</a>
  <ul>
<li><a href="http://pattah12.blogspot.com/search/label/Artikel">Artikel</a></li>
<li><a href="http://www.patahonline.com/p/daftar-isi.html">Daftar Isi</a></li>
<li><a href="http://www.patahonline.com/p/cek-berat-blog.html">Cek Berat Blog</a></li>
<li><a href="http://www.patahonline.com/p/prase-html-to-xml-blogger.html">Parse HTML Blogger</a></li>
<li><a href="http://www.patahonline.com/p/link-exchange.html">Tukar Link</a></li>
</ul>
</li>
<li><li><a href="http://www.patahonline.com/p/buku-tamu.html">GuestBook</a>
 </li>
<li><a href="http://pattah.16mb.com/mivo.html" target="_blank">TV Online</a>
 <ul>
 <li><a href="http://pattah.16mb.com/global.html" target="_blank">Global TV</a>
 </li>
<li><a href="http://pattah.16mb.com/mnc.html" target="_blank">MNC TV</a>
 </li>
<li><a href="http://pattah.16mb.com/game_online.html" target="_blank">Game Online</a>
 </li>
<li><a href="http://pattah.16mb.com/photoshop_online.html">Photoshop Online</a></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 Url blog dengan Url blog anda sendiri ya :)
5. Langkah terakhir silahkan klik simpan. lalu lihat perubahanya.

Cukup sekian postingan saya tentang Cara Buat Menu Dropdown Melayang di Blog, semoga bisa bermanfaat.

Anda sedang membaca artikel tentang Cara Buat Menu Dropdown Melayang di Blog dan anda bisa menemukan artikel Cara Buat Menu Dropdown Melayang di Blog ini dengan url http://www.patahonline.com/2012/08/cara-buat-menu-dropdown-melayang.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Buat Menu Dropdown Melayang di Blog ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Buat Menu Dropdown Melayang di Blog sumbernya.

Description: Cara Buat Menu Dropdown Melayang di Blog Rating: 3.5 Reviewer: goyang patah patah ItemReviewed: Cara Buat Menu Dropdown Melayang di Blog