Cara Buat Dropdown Menu di Blog

Cara Membuat Dropdown Menu di blog - Hmm, Lagi-lagi saya posting tentang dropdown menu hehe gak apa-apa deh, sobat sudah pada tau dropdown menu itu apa kan? Dropdown menu adalah sebuah kotak tab/bar yang isinya berupa navigasi link. Fungsi Dropdown menu yaitu untuk menyimpan link-link penting di suatu blog, agar pengunjung dapat lebih mudah mengunjungi halman-halaman utama yang ada pada suatu blog itu.Dropdown menu kali ini saya buat sendiri kode CSSnya, oke dibawah ini adalah screenshotnya:


1. Login ke Blogger
2. Pilih Template >> Edit HTML
3. Cari kode ]]></b:skin>, copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>.

#menuwrapperpic{background:url(http://2.bp.blogspot.com/-JPJ3cttk3UY/UgeTkhCCRsI/AAAAAAAABXw/vqWVpbMg5-g/s1600/menu1.PNG) repeat-x top;width:980px;margin:0 auto;padding:0 auto;}
#menuwrapper{width:980px;height:35px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font:bold 12px Arial;text-transform:none;color:#fff;padding:6px 10px 6px;background:url(http://4.bp.blogspot.com/-Poe1DlFFJDI/T35TYW15bFI/AAAAAAAAF6M/XklwYDShSVM/s1600/nav.png) repeat-x;margin:8px 0 8px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #555;text-shadow: 0 1px 1px #0e3d68;}
#menubar a:hover{background:url(http://4.bp.blogspot.com/-EkPPCTlSFrE/TeCqa9ww_AI/AAAAAAAAAwU/H3xUv6nyoPw/s1600/nav.png) repeat-x}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{color:#80C8FE}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#fff;background:url(http://2.bp.blogspot.com/-JPJ3cttk3UY/UgeTkhCCRsI/AAAAAAAABXw/vqWVpbMg5-g/s1600/menu1.PNG);text-decoration:none;margin:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border:0px solid #04498a}
#menubar li ul li.hr{border-bottom:1px solid #fff;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0}
#menubar ul a:hover{background-color:#555!important;color:#80C8FE!important;text-decoration:none}

Sekarang Cari Kode <!-- /content-wrapper--> lalu letakan kode di bawah tepat di bawahnya


<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='http://1.bp.blogspot.com/-hOrRvLeBQYM/T_WSzbGC7vI/AAAAAAAAHPw/S_2CUG0zZhk/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
Perhatian!
Jika Kode <!-- /content-wrapper--> tidak ketemu carilah kode yang mirip atau memiliki kesamaan, <!-- /content-wrapper--> biasanya terletak di bawah tag <body>
Jika Sebelumnya Template anda telah memiliki kode menu, hapus saja lalu ganti dengan kode diatas
4. Anda bisa ganti kata-kata Menu1, Menu 2 dan yang lain dengan nama menu yang anda inginkan dan untuk kode "#" itu adalah alamat link dari menu yang anda buat. Sengaja saya beri tanda # agar tidak menuju halaman apapaun, silahkan anda ganti dengan alamat link yang anda inginkan.

Semoga Tutorial Saya Ini Bermanfaat Bagi Anda Yang Membutuhkan Navigasi Dropdown Menu , Jangan Lupa Berkomentar Dahulu Sebelum Mempraktekan Walaupun Hanya Berterima Kasih
Previous
Next Post »

118 komentar

Write komentar
August 12, 2013 at 1:19 PM delete

mantap sob script dropdown menunya(y)

done www.jam-vista.blogspot.com

Reply
avatar
Henry Dwi.s
AUTHOR
August 12, 2013 at 1:24 PM delete

Thank's sob Kunjungannya

Reply
avatar
Agung N P
AUTHOR
August 12, 2013 at 1:42 PM delete

Thks bro scriptnya...

Reply
avatar
August 12, 2013 at 1:48 PM delete

gw bookmark, ntar gw coba dlu dech...
uda cari kmana-mana tp koq bnyak yg gk cocok za

Reply
avatar
Henry Dwi.s
AUTHOR
August 12, 2013 at 4:25 PM delete

Silakan di bookmark, semoga ketemu yang cocok deh sob..

Reply
avatar
SAIFUL ANWAR
AUTHOR
August 12, 2013 at 5:23 PM delete

mau ane pasang... udah ada,, bro.. nice post boss.. http://inbox-me.blogspot.com

Reply
avatar
Henry Dwi.s
AUTHOR
August 13, 2013 at 5:00 PM delete

kelihatanya agak ribet padahal mudah kok sob

Reply
avatar
Prian Jhaze
AUTHOR
August 14, 2013 at 12:36 PM delete

nah ini dia yang ane butuhkan :) thx sob, nice post

Reply
avatar
Jiad Aulia
AUTHOR
August 14, 2013 at 12:41 PM delete

thank's, mau nyoba dulu :D

Reply
avatar
Admin Jack-VB
AUTHOR
August 14, 2013 at 6:11 PM delete

Oh... jadi gitu ya bro... berguna banget...
http://jack-vb.blogspot.com

Reply
avatar
August 15, 2013 at 11:44 AM delete

info yang bagus gan. kalau cara buat menu yang horizontal itu gimana ya? kalau di gambar ilustrasi diatas itu yang ada about us | contact us | menu 1

Saya mau buat juga, tapi di blog saya cuma ada home :)
Makasih
http://rickyaburame.blogspot.com

Reply
avatar
Henry Dwi.s
AUTHOR
August 15, 2013 at 1:36 PM delete

keteranganya ada kok gan di atas!

Reply
avatar
Afrizal Manda
AUTHOR
September 29, 2013 at 4:36 PM delete

masukin ini bingung saya gan
Sekarang Cari Kode lalu letakan kode di bawah tepat di bawahnya

gak ktmu trs cri yg mna untk pastekan scriep yg k2 gan?
makasi

Reply
avatar
Henry Dwi.s
AUTHOR
October 1, 2013 at 10:05 PM delete

kalo gak ketemu kodenya pake cara ini aja ke tata letak--> tambahkan gadget--> HTML/javascript lalu copy pastekan kode menunya

Reply
avatar
Joni i. Akbar
AUTHOR
October 16, 2013 at 12:52 PM delete

mas,....ikutan tanya donk....emailnya apa biar saya bisa tanya jawab....??

Reply
avatar
Angga Prawira
AUTHOR
October 18, 2013 at 6:46 PM delete

Thank Gan Kunjungi Juga Blog Saya: http://fantastic-modern.blogspot.com/

Reply
avatar
October 20, 2013 at 9:20 AM delete

gan cara buat tombol facebook di samping gimana gan

Reply
avatar
Henry Dwi.s
AUTHOR
October 21, 2013 at 8:09 PM delete

silakan di coba..http://www.henryds.com/2013/04/cara-membuat-like-facebook-tersembunyi.html

Reply
avatar
Joni i. Akbar
AUTHOR
October 26, 2013 at 12:29 PM delete

Mas,...saya udah cari tapi gak ketemu juga tuh yaa....mhon pencerahannya donk mas....email saya di jonzeey@gmail.com

Reply
avatar
Henry Dwi.s
AUTHOR
October 27, 2013 at 7:51 PM delete

email:henrycuber@gmail.com
fb :https://www.facebook.com/henry.dwiseptian1

Reply
avatar
October 28, 2013 at 11:03 AM delete

menu drop down ini bisa diterapkan di menu yang floating tidak, mas? thanks!

Reply
avatar
November 12, 2013 at 4:33 AM delete

menarik ni gan,,,, terimakasih ilmunya,, ijin praktek

bila berkenan kunjungi blog saya gan terimakasih

Reply
avatar
November 12, 2013 at 10:51 PM delete

Admin Jack-VB
itu gimana ya caranya mbuat mbuat post kotak2 kecil

Reply
avatar
ISZ SWAGGERZ
AUTHOR
November 14, 2013 at 10:10 PM delete

TERIMA KASIH...
http://sukasukiswaggerz.blogspot.com/

Reply
avatar
Andre Saputra
AUTHOR
November 26, 2013 at 6:44 PM delete

mantap gan , thx ilmu nya ..
andreutd.blogspot ikuti balek gan

Reply
avatar
November 28, 2013 at 11:11 AM delete

kok di edit html, aku cari ]]> g ada ya?? mohon bantuannya.

Reply
avatar
Henry Dwi.s
AUTHOR
November 28, 2013 at 10:44 PM delete

coba cari yg teliti gan...

Reply
avatar
December 5, 2013 at 2:47 AM delete

salam kenal BOSS... akan aku coba ya!!!

Reply
avatar
December 7, 2013 at 5:40 PM delete

keren banget artikelnya.... bisa buat refrensi...
kunjungan balik ya kak www.bacawebster.com untuk dapatkan info menarik hehehe...

Reply
avatar
December 16, 2013 at 8:29 AM delete

bos koq menunya malah menyamping,,bukan menurun

mohon pencerahan
http://bpkmekarsari.blogspot.com/

Reply
avatar
cooverbox
AUTHOR
December 17, 2013 at 7:06 PM delete

tks lagi om..untuk pencerahannya

Reply
avatar
December 18, 2013 at 8:57 PM delete

gan kalo warna nya diubah caranya bagaimana?

Reply
avatar
Henry Dwi.s
AUTHOR
December 19, 2013 at 10:41 AM delete

warna yang mana dulu bro??

Reply
avatar
December 23, 2013 at 11:13 PM delete

Cara Buat Yang "Contact Us" "About Us" Menu 1" Itu Gimana ? Ane Bingung Ini -_-

Reply
avatar
job copas
AUTHOR
December 26, 2013 at 11:22 PM delete

mantap mas panduannya. kunjungi balik ya andri-seoblog.blogspot.com

Reply
avatar
Leo ibnu
AUTHOR
December 28, 2013 at 5:31 PM delete

ane kok kepanjangan menunya gan?

Reply
avatar
December 29, 2013 at 2:29 PM delete

mksh nih gan ilmunya,nanti ane praktekin,slm knl.mampir ya di www.chocojavacokelat.blogspot.com.
maklum baru mengenal blog,butuh masukan dan sarannya.mksh

Reply
avatar
December 29, 2013 at 2:32 PM delete

slm knl,mksh nie atas ilmunya,nanti ane praktekin..mampir ya di blog ku yg pemula www.chocojavacokelat.blogspot.com
butuh saran dan masukan nih

Reply
avatar
Amaludin
AUTHOR
December 31, 2013 at 6:46 AM delete

thanks sob..
keren nih..

Reply
avatar
December 31, 2013 at 8:17 AM delete

cari kode udah 1 jam gw cari gak ktemu2 bro,,
mohon bantuanyya??

Reply
avatar
Dedek Ahmad
AUTHOR
January 4, 2014 at 12:27 AM delete

tanks pak broo
sangat bermanfaat

Reply
avatar
Dedek Ahmad
AUTHOR
January 4, 2014 at 12:29 AM delete

Trima kasih pak broo akan sya coba dulu

Reply
avatar
January 4, 2014 at 3:14 PM delete

mas... klo kita ingin link kan dari menu tadi gmna.. spt klik home tu langsung ling ke isinya,, mksh jwbnya,,

Reply
avatar
peinzilla
AUTHOR
January 14, 2014 at 12:44 AM delete

gan, klo dropdown menu kek ente gmn ntu ?

Reply
avatar
said or
AUTHOR
January 21, 2014 at 4:16 PM delete

Thank sob izin Copas nya ya ... jangan lupa mampir ke http://planetbrewmaster.blogspot.com/

Reply
avatar
January 23, 2014 at 12:02 PM delete

Maaf gan, kalo mau membuat jeda (delay) di dropdown menu gmana carany ya? Drop down menu sya cepet ngilang, susah buat ngeklik sub-dropdownnya..
Trims.

Reply
avatar
January 24, 2014 at 3:45 PM delete

Permisi mass.. kalau mau buat sub tapi menunya sudah ada gimana yach...
ney contoh blognya...?
gatvan.blogspot.com

Reply
avatar
January 24, 2014 at 3:46 PM delete

Permisi mass.. kalau mau buat sub tapi menunya sudah ada gimana yach...
ney contoh blognya...?
gatvan.blogspot.com

minta tolong pencerahannya mass...
agil.prasetio@yahoo.co.id

Reply
avatar
January 30, 2014 at 11:55 PM delete

ini ni gan yang lagi saya cari2, tmaksih gan
http://greenpreneurindonesia.blogspot.com/
http://masjamalmirdud.blogspot.com/
http://agusfuadjamal.com/

Reply
avatar
Henry Dwi.s
AUTHOR
February 10, 2014 at 5:33 PM delete

silakan di praktekan mas..

Reply
avatar
Arkan Faras
AUTHOR
March 18, 2014 at 9:00 PM delete

Gan Cara ngubah judul lamannya gimana
arkan.farras.ap@gmail.com

Reply
avatar
April 6, 2014 at 7:24 AM delete

gan, kok punya ane jadinya di paling bawah menunya
gimana caranya mindah ke atas?

Reply
avatar
faris fadhil
AUTHOR
April 9, 2014 at 2:48 PM delete

atur nuhun mas brow :)

Reply
avatar
April 17, 2014 at 2:20 PM delete

bro cara edit warna,a gimana ? ttolong dong sgera dibalas

Reply
avatar
sudarto games
AUTHOR
April 24, 2014 at 3:08 PM delete

makasih nih...salam mwb

Reply
avatar
suda patih
AUTHOR
May 27, 2014 at 2:09 AM delete

makasih juragan tutornya berhasil,sudah beberapa situs ane kunjungi ga ada yg berhasil. pas mampir di situs juragan ternyata muaantaaap. Maju terus dan sukses slalu.....

Reply
avatar
Dwi Hend Set
AUTHOR
June 1, 2014 at 6:54 AM delete

bro yang harus cari code content-wrapper masih belum ketemu bro,,, biasanya dimana bro..?

Reply
avatar
Aditia ezhra
AUTHOR
June 2, 2014 at 10:16 AM delete

broo kok ]]> di template ane kagak ade

Reply
avatar
June 3, 2014 at 6:20 PM delete

Makasih gan informasinya sangat membantu sekali buat saya yang baru memulai ngeblog... ditunggu info info selanjutnya gan

bagi anda yang memulai bisnis baru saya koira wajib untuk mengetahui ilmu pemasaran Lihat Cara Membuat Link Di Komentar Blog bukak aja boss kita memang berhak kog mengetahui semua yang ada di dunia ini…. salam sukses

Reply
avatar
June 3, 2014 at 6:23 PM delete

Langkah-langkah Promosi Yang Mendongkrak Naik Penjualanbukak aja boss kita memang berhak kog mengetahui semua yang ada di dunia ini…. salam sukses

Reply
avatar
June 7, 2014 at 10:17 AM delete

kang., koq punyaku searchnya nggak bisa? mohon bantuanya.,

Reply
avatar
Henry Dwi.s
AUTHOR
June 13, 2014 at 2:03 PM delete

salam kenal juga brow ..

Reply
avatar
Henry Dwi.s
AUTHOR
June 13, 2014 at 2:04 PM delete

sama-sama sob silakan di copas

Reply
avatar
Henry Dwi.s
AUTHOR
June 13, 2014 at 2:05 PM delete

jangan lupa sumbernya juga ya..hehe

Reply
avatar
Henry Dwi.s
AUTHOR
June 13, 2014 at 2:10 PM delete

cari dan ganti kode warna tersebut #555 atau #80C8FE itu hanya efek warna hovernya saja, klw selain itu bukan warna melainkan gambar

Reply
avatar
Henry Dwi.s
AUTHOR
June 13, 2014 at 2:11 PM delete

tulis lagi yang bener gan jgn di copas

Reply
avatar
Henry Dwi.s
AUTHOR
June 13, 2014 at 2:13 PM delete

salam sukses brro.. no live link!!!

Reply
avatar
June 26, 2014 at 4:20 PM delete

sore pak maaf itu menu dropdownnya kalao halaman dii geser keatas hilang atau masih tetep ada menu dropdownya boss. saya lagi nyari menu dropdown nya tetap kelihatan walau halaman di geser kebawah , makasih

Reply
avatar
Henry Dwi.s
AUTHOR
June 26, 2014 at 9:51 PM delete

itu floating menu gan, tapi yang versi dropdown saya gak ada

Reply
avatar
Henry Dwi.s
AUTHOR
June 26, 2014 at 10:02 PM delete

cara ke2 yaitu coba agan buka blog agan klik kanan trus inspeksi elemen

Reply
avatar
Harum MF
AUTHOR
July 9, 2014 at 12:10 PM delete

tak cobain dulu ya gan tipsnya.. thanks udh share :)
kunjungi balik ya..

Reply
avatar
wayan yudiari
AUTHOR
July 12, 2014 at 1:03 PM delete

gan saya punya ko tulisan yang muncul nich.....

Reply
avatar
July 13, 2014 at 10:44 AM delete

kode ini gak ada mas gimana mencarinya? --->

Reply
avatar
Noor Zain
AUTHOR
July 16, 2014 at 1:45 PM delete

makasih info dropdown menunya, saya masih belajar bikin blog :

http://biogreen-surabaya.blogspot.com/

Reply
avatar
Henry Dwi.s
AUTHOR
July 17, 2014 at 7:32 PM delete

sama-sama saya juga masih belajar hehe

Reply
avatar
fendi limz
AUTHOR
July 26, 2014 at 1:52 PM delete

mantap gan dropdown nya , berhasil di blog saya 100% bagus (Y)

Reply
avatar
August 17, 2014 at 9:47 AM delete

mantap gan, kayakx perlu sy coba di blog sy http://bisnisonlinetren.blogspot.com/, thanks infox.....

Reply
avatar

=======================================================
• Untuk menyisipkan kode, gunakan tag [code]... KODE ...[/code]

• Untuk menyisipkan kode panjang, gunakan tag [pre]... KODE ...[/pre]

• Untuk menyisipkan catatan, gunakan [quote]...CATATAN ...[/quote]

• Untuk menyisipkan gambar, gunakan [img]..URL GAMBAR..[/img]

• Untuk menyisipkan video, gunakan [youtube]..URL VIDEO..[youtube]
======================================================= EmoticonEmoticon