Cara Buat Menu Dropdown Melayang di Blog

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.
Previous
Next Post »

62 Komentar

Write Komentar
Asis Sugianto
AUTHOR
August 11, 2012 at 10:15 AM delete

wah wah keren nih menu drop downnya sobat...

Reply
avatar
Widodo
AUTHOR
August 11, 2012 at 12:49 PM delete

wahhh demonya di atas ini ya sob yang position:fixed

Reply
avatar
August 11, 2012 at 1:06 PM delete

Tips yang bagus bang pattah

boleh juga dicoba nih

Reply
avatar
August 11, 2012 at 7:33 PM delete

wis keren sob....? bs tambah keren nih blog nya hehehe nice post

Reply
avatar
August 11, 2012 at 7:57 PM delete

@Masnady_Bloegreen
silahkan sobat, semoga bisa menambah kekerenan blog sobat, hahahahhayyy

Reply
avatar
August 12, 2012 at 1:11 AM delete

waw tutorial yang bagus
entar saya coba deh di blog saya yang satunya :)

Reply
avatar
August 12, 2012 at 3:32 AM delete

Kunjungan perdana gan, blog nya baguuus. visitornya rame :D

Salam kenal ya

Reply
avatar
Widodo
AUTHOR
August 12, 2012 at 5:43 AM delete

@goyang patah patah Sini lagi sob meramaikan suasana

Reply
avatar
August 12, 2012 at 5:59 AM delete

@Widodo
mhon untuk berkomtar sesui dengan isi artikel ya sobat :)

Reply
avatar
Kang Asep
AUTHOR
August 12, 2012 at 12:11 PM delete

bagus sob menunya,,,
mungkin kalo warnanya bisa disesuaikan dg warna blog tinggal atur saja di stylenya ,,,

wilujeng ngeblog

Reply
avatar
August 12, 2012 at 3:34 PM delete

@Kang Asep
iya kang, tinggal sesuaiin deangan warna tampalate kita, makin oke lah blog kita kang :)

Reply
avatar
August 12, 2012 at 4:07 PM delete

Keren nih, langsung coba deh

Reply
avatar
August 12, 2012 at 4:21 PM delete

@Ilham Bachtiar
mkasih sob, silahkan dicoba moga bisa berhasil sobat :)

Reply
avatar
August 12, 2012 at 5:41 PM delete

makasih atas ilmunya sob :D

Reply
avatar
August 12, 2012 at 5:44 PM delete

@Septialdo Nursukma
sama2 sobat, moga bisa bermanfaat sobat :)

Reply
avatar
August 12, 2012 at 6:45 PM delete

Asyikk ntar aku coba diblog dummy aku ya bang Fattah,trims banget nih bang..hahhahyyyy

Reply
avatar
August 13, 2012 at 12:10 AM delete

@Icahbanjarmasin
sama2 bang icah, moga bisa berhasil bang :)

Reply
avatar
August 13, 2012 at 4:13 AM delete

keren..keren bang pattah...

seperti punya bang pattah tuh kan...

kalau di scoll ttp muncul?

Reply
avatar
Asis Sugianto
AUTHOR
August 13, 2012 at 5:00 AM delete

mohon maaf baru bisa mampir lagi sobat, kemarin lagi ada kesibukan ofline sobat...

Reply
avatar
August 13, 2012 at 5:02 AM delete

@Untaian Kalimat
yo'i sobat, n mkasih banyak sobat :)

Reply
avatar
August 13, 2012 at 5:03 AM delete

@Asis Sugianto
ngomong2 ada kesibukan apakah gerangan nich sobat nya :)

Reply
avatar
Windows Blog
AUTHOR
August 13, 2012 at 5:37 AM delete

sip gan, ane mau coba terapin di blog ane...

Reply
avatar
August 13, 2012 at 5:56 AM delete

@Windows Blog
uke silahkan sobat, smoga berhasil :)

Reply
avatar
August 13, 2012 at 7:30 AM delete

Seperinya blog saya juga perlu menggunakan hal yang menu dropdown melayangnya sahabat

Reply
avatar
August 13, 2012 at 8:15 AM delete

mantab. kayaknya bisa dipraktekkan nih.

salam.

Reply
avatar
August 13, 2012 at 8:20 AM delete

wah, klo pake gini, keren donk...

salam kenal bosss... ^_^

Reply
avatar
August 13, 2012 at 8:39 AM delete

wahhh oke juga nih bang.... ane mang kurng faham dengan menu2 gini....

Reply
avatar
sc
AUTHOR
August 13, 2012 at 9:45 AM delete

saya save dulu yah mas
lumayan buat pembelajaran, thanks buat ilmunya :)

Reply
avatar
Admin Andreas
AUTHOR
August 13, 2012 at 10:42 AM delete

keren menunya, kapan2 saya coba menunya
makasih sob, salam kenal

Reply
avatar
August 13, 2012 at 12:13 PM delete

Wuih keren banget Menu dropdownnya sob :D

Reply
avatar
August 13, 2012 at 2:58 PM delete

@Blog Keperawatan
kw katagorynya banyak mending pakek aja sobat :)

Reply
avatar
August 13, 2012 at 3:01 PM delete

@Quantum Artikel
silahkan sobat, moga bisa mempercakep blog sobat :)

Reply
avatar
August 13, 2012 at 3:06 PM delete

@Cendekiawan IT
salam kenal juga bos, n mkasih sudah berkunjung :)

Reply
avatar
August 13, 2012 at 3:10 PM delete

@Ehwansah Jailani
mksih bang, moga bisa bermanfaat aja dech bang :)

Reply
avatar
August 13, 2012 at 3:11 PM delete

@sc
sama2 sobat, moga bisa bermanfaat :)

Reply
avatar
August 13, 2012 at 3:15 PM delete

@Admin Andreas
salam kenal juga sobat, mkasih buat kunjunganya :)

Reply
avatar
August 13, 2012 at 3:25 PM delete

tutorialnya sangat menarik kawan..dan sepertinya bisa mempercantik tampilan blog dengan menu dropdown begini :)

Reply
avatar
August 13, 2012 at 3:31 PM delete

@BlogS of Hariyanto
mkasih bang hariyanto, moga aja ya bang,hehhe :)

Reply
avatar
Gopar
AUTHOR
August 13, 2012 at 3:33 PM delete

mantab ne sob,,,izin nyimak aja dulu

Reply
avatar
August 13, 2012 at 3:42 PM delete

@Gopar
silahkan sobat, moga bisa bermanfaat sobat :)

Reply
avatar
August 13, 2012 at 6:39 PM delete

ijin copas sob kodenya,, mau saya terapin di blog saya ,,,, salam kenal,,

Reply
avatar
August 13, 2012 at 6:48 PM delete

@intim harmonis
silahkan sobat, moga berhasil dan salam kenal juga sobat :)

Reply
avatar
Abed Saragih
AUTHOR
August 14, 2012 at 2:23 PM delete

Saya takut tambah berat sob loading blog saya :)

Reply
avatar
August 14, 2012 at 5:07 PM delete

@Abed Saragih
tapi kw mank berat blognya udah melebihi batas mending jangan pasang sob :)

Reply
avatar
andrea suyoko
AUTHOR
August 16, 2012 at 3:21 AM delete

mantap sob, perlu di coba nih

Reply
avatar
August 16, 2012 at 3:37 AM delete

@andrea suyoko
mkasih sobat,silahkan dicoba, moga berhasil :)

Reply
avatar
irfan295_
AUTHOR
September 14, 2012 at 2:28 PM delete

wah, udah aya coba sob, tapi hanya mucul di beranda aja, cara munculin juga di postingan gimana kang ??

Reply
avatar
September 14, 2012 at 8:15 PM delete

@irfan295_
lho kox bisa kyak bisa gitu ya sobat, kode ini dah saya pasang bisa muncul di beranda n posting, coba sobat cek di css atau javascript mungkin ada yang salah sobat :)

Reply
avatar
Zaky Argha
AUTHOR
November 17, 2012 at 8:41 PM delete

membantu sekali nih asek,,,thnx bro

Reply
avatar
SEO Killer
AUTHOR
June 25, 2013 at 11:31 AM delete

Artikel yang sangat bermanfaat, ..mantap, Eitss jngn lupa daftar di sini ya AutoTraffic Exchange dan SEO Killer

Reply
avatar

Jadilah pembaca yang bermartabat dengan memberikan komentar yang santun,indah di pandang dan sesuai dengan norma yang baik serta sesuai dengan apa yang ada di postingan.
Kriteria Komentar yang di tampilkan:
1. Bukan Komentar Spam
2. Komentar tidak sesuai dengan isi artikel
3. Menyisipkan Link/url baik itu blog/web pada komentar EmoticonEmoticon