Monday, August 12, 2013

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSpurTYOMNbyGc3UDQkUYq2vYmm-K_b50XlG2gTIX2GvuLp1U1xTIbEjRR_JN3WLsffOAsXl6rSyA8xqsSE164Ct7Bndbi2uTtTW3sT_Uq7g9K3Cf-kAaddIAWCZBkaaNxM2pparx6Y7M/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcoQbaggiJVCuqxCNuRQklUu622l46P_zbvkFw0RpSlXvINWTBqpfG2YI6lgcICWgGLOpfRXVmQ5VFAXpVQahe8ia25Gg3NM6Eu1dUN5uBq_-uUqhUpuGGsZiG_nPCG__wzh3P5Nz4dvhT/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9MSG7X2PnpJLHtNHs04uOh7MZOAmVPgY0iu2penI38e6GXzKql1o2Gazu6XftIixSKoE8U0xCNsOyna0C45nX2gUvw8nsmoadBsA9tp0RQPhwJ11-4RMGeQ2InOhikVt-yP3e6k-JXCM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSpurTYOMNbyGc3UDQkUYq2vYmm-K_b50XlG2gTIX2GvuLp1U1xTIbEjRR_JN3WLsffOAsXl6rSyA8xqsSE164Ct7Bndbi2uTtTW3sT_Uq7g9K3Cf-kAaddIAWCZBkaaNxM2pparx6Y7M/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXCHXTOTb405pl0j0Ecq4cJQBmI9dd_Plgb9bD87nMSmSeOIhJzJBqVzoDzcq2XK-RZYI_XVceJMKztpCFI0xJ1yKo0OI4D1bHB8qhoV7laR4BOIWqa7_K9b7fQjrOsDvsmLb7Pgx90eSL/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

Related Posts

Cara Buat Dropdown Menu di Blog
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

115 komentar

Tulis komentar
avatar
August 12, 2013 at 1:19 PM

mantap sob script dropdown menunya(y)

done www.jam-vista.blogspot.com

Reply
avatar
August 12, 2013 at 1:48 PM

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

Reply
avatar
August 12, 2013 at 4:25 PM

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

Reply
avatar
August 12, 2013 at 5:23 PM

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

Reply
avatar
August 13, 2013 at 5:00 PM

kelihatanya agak ribet padahal mudah kok sob

Reply
avatar
August 14, 2013 at 12:36 PM

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

Reply
avatar
August 14, 2013 at 6:11 PM

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

Reply
avatar
August 15, 2013 at 11:44 AM

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
August 15, 2013 at 1:36 PM

keteranganya ada kok gan di atas!

Reply
avatar
Anonymous
August 19, 2013 at 3:45 AM

wusss.. mantap tuh mas

Reply
avatar
September 29, 2013 at 4:36 PM

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
October 1, 2013 at 10:05 PM

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

Reply
avatar
October 16, 2013 at 12:52 PM

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

Reply
avatar
October 18, 2013 at 6:46 PM

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

Reply
avatar
October 20, 2013 at 9:20 AM

gan cara buat tombol facebook di samping gimana gan

Reply
avatar
October 21, 2013 at 8:09 PM

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

Reply
avatar
October 26, 2013 at 12:29 PM

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

Reply
avatar
October 27, 2013 at 7:51 PM

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

Reply
avatar
October 28, 2013 at 11:03 AM

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

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

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

bila berkenan kunjungi blog saya gan terimakasih

Reply
avatar
November 12, 2013 at 10:51 PM

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

Reply
avatar
November 14, 2013 at 10:10 PM

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

Reply
avatar
November 26, 2013 at 6:44 PM

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

Reply
avatar
November 28, 2013 at 11:11 AM

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

Reply
avatar
December 5, 2013 at 2:47 AM

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

Reply
avatar
December 7, 2013 at 5:40 PM

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

bos koq menunya malah menyamping,,bukan menurun

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

Reply
avatar
December 17, 2013 at 7:06 PM

tks lagi om..untuk pencerahannya

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

gan kalo warna nya diubah caranya bagaimana?

Reply
avatar
December 23, 2013 at 11:13 PM

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

Reply
avatar
December 26, 2013 at 11:22 PM

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

Reply
avatar
December 28, 2013 at 5:31 PM

ane kok kepanjangan menunya gan?

Reply
avatar
December 29, 2013 at 2:29 PM

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

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
December 31, 2013 at 8:17 AM

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

Reply
avatar
January 4, 2014 at 12:27 AM

tanks pak broo
sangat bermanfaat

Reply
avatar
January 4, 2014 at 12:29 AM

Trima kasih pak broo akan sya coba dulu

Reply
avatar
January 4, 2014 at 3:14 PM

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

Reply
avatar
January 14, 2014 at 12:44 AM

gan, klo dropdown menu kek ente gmn ntu ?

Reply
avatar
January 21, 2014 at 4:16 PM

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

Reply
avatar
January 23, 2014 at 12:02 PM

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

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

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

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

Reply
avatar
March 18, 2014 at 9:00 PM

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

Reply
avatar
April 6, 2014 at 7:24 AM

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

Reply
avatar
April 17, 2014 at 2:20 PM

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

Reply
avatar
May 27, 2014 at 2:09 AM

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
June 1, 2014 at 6:54 AM

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

Reply
avatar
June 2, 2014 at 10:16 AM

broo kok ]]> di template ane kagak ade

Reply
avatar
June 3, 2014 at 6:20 PM

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

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

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

Reply
avatar
June 13, 2014 at 2:04 PM

sama-sama sob silakan di copas

Reply
avatar
June 13, 2014 at 2:05 PM

jangan lupa sumbernya juga ya..hehe

Reply
avatar
June 13, 2014 at 2:10 PM

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

Reply
avatar
June 13, 2014 at 2:11 PM

tulis lagi yang bener gan jgn di copas

Reply
avatar
June 13, 2014 at 2:13 PM

salam sukses brro.. no live link!!!

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

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
June 26, 2014 at 9:51 PM

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

Reply
avatar
June 26, 2014 at 10:02 PM

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

Reply
avatar
July 9, 2014 at 12:10 PM

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

Reply
avatar
July 12, 2014 at 1:03 PM

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

Reply
avatar
July 13, 2014 at 10:44 AM

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

Reply
avatar
July 16, 2014 at 1:45 PM

makasih info dropdown menunya, saya masih belajar bikin blog :

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

Reply
avatar
July 17, 2014 at 7:32 PM

sama-sama saya juga masih belajar hehe

Reply
avatar
July 26, 2014 at 1:52 PM

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

Reply
avatar
August 17, 2014 at 9:47 AM

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

Reply
avatar
February 10, 2019 at 1:46 PM

Agen Togel Online Terbaik & Terlengkap!
Tersedia Pasaran Hongkong - Sydney - Singapore
Potongan Diskon 2D = 30% | 3D = 59% | 4D = 66%
Dapatkan Keuntungan Dalam Menebak Angka Hingga Ratusan Juta Setiap Hari..
Yuk Gabung Bersama Bolavita Di Website www. bolavita .fun
Untuk Info, Bisa Hubungi Customer Service Kami ( SIAP MELAYANI 24 JAM ) :
BBM: BOLAVITA
WA: +628122222995

Reply

=======================================================
• 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]
=======================================================