Cara Membuat Menu Drop Down dibawah atau diatas Header

Cara Membuat Menu Drop Down dibawah atau diatas Header - Selamat Sejahtera Untuk Sahabat, Pada saat ini anda telah memebaca sebuah artikel yang berjudul Cara Membuat Menu Drop Down dibawah atau diatas Header, Kami telah mendapatkan informasi yang sangat penting dan asli untuk memberikan sebuah informasi ini kepada anda, Semoga isi postingan Artikel Blogger, yang telah kami tulis dibawah sini dapat anda pahami. baiklah, Silahkan Dibaca.

Judul : Cara Membuat Menu Drop Down dibawah atau diatas Header
link : Cara Membuat Menu Drop Down dibawah atau diatas Header

Baca juga


Cara Membuat Menu Drop Down dibawah atau diatas Header

Banyak sekali blogger pemula yang menanyakan mengenai Bagaimana Cara Membuat Menu Drop Down dibawah atau diatas Header? Perlu kalian ketahui bahwasannya dengan kita menampilkan menu drop down atau menu Naik Turun dibawah Header atau diatas header, tepatnya yaitu pada judul Blog kita tentunya blog kita akan lebih keren dan lebih elegan dengan memasang widget satu ini. Mazinu kemarin juga memasang menu drop down,, dan mazinu yakin insyaalloh pasti berhasil, karena sebelumnya sudah saya praktekkan! Jika kalian tertarik membuat Menu + Sub menu yang dibuat Drop Down silahkan ikuti petunjuk atau cara mazinu ini ya? yang hasilnya nanti seperti ini :

Menu Drop Down dibawah atau diatas Header

MAAF CARA INI BELUM BISA DIGUNAKAN. MASIH DALAM PERBAIKAN :)
Woauuuww,, setelah kalian meliha gambar diatas tentunya kalian tertarik untuk membuatnya bukan?
naahh berikut caranya :

  • Kalian harus login terlebih dahulu ke blogger
  • Klick Design, dan Edit HTML
  • Cari kode ]]></b:skin> {untuk memudahkan mecari kodenya klick Ctrl + F} dan letakkan kode berikut tepat Diatas kode ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4qIY4M8Z41YeHlLtu_XKijKO8d16hj3zZ7H19E2C3aaL-MFJPIyjww30f7UTGtAfSRoxYWYvloLnOWFYiyB0zhFGYwaKNrUyCet-xInlB78fpwVrURerkDF3l44lww_xUmG-OBgSZfdc/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding: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-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4KauaABr7mJEjrq_CpGSjtoJn_jGNfFzUDsT8zUzbTzlVBER1MRIo4qF-WUFKxVCvPNhQ9_9tnFyYq2wXl3Pl2xzk0pYX9Z5JIr0TjXlPncpk8wPmISof35tFg-zOIV3Si9cGzpbge9E/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #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;padding-bottom:5px;-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{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none} 


  • Kode warna merah diatas silahkan rubah sesuai selera anda!
  • Selanjutnya kalian cari kode berikut:
    <header>  : untuk menempatkan menu di atas nama blog
    </header> : untuk menempatkan menu di bawah nama blog
  • Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://mazinubersahabat.blogspot.com/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTs7fxb4o0VGPmYHNvkG35OjmKZV6djmeRSDd7FuoP46VruLIXZXSZkUMlRxl4bsMjh8XwmolmGTPKzb80b_KXoTewbET3Iy_7LrcAYwrsRpoODAciu1E4rsIthOILiD9rThohlF0jkK0/s1600/home_white.png' style='padding:0px;'/>Home</a></li>
<li><a href='http://mazinubersahabat.blogspot.com/' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='http://mazinubersahabat.blogspot.com/' target='new'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Sub Menu 2</a></li>
<li><a href='http://mazinubersahabat.blogspot.com/' target='new'>Sub Menu 3</a></li>
<li><a href='http://mazinubersahabat.blogspot.com/' target='new'>Sub Menu 4</a></li>
</ul>
</li>
<li><a href='http://mazinubersahabat.blogspot.com/' target='new'>Menu</a></li>
<li><a class='trigger'>Menu Drop Down</a>
<ul>
<li><a href='http://mazinubersahabat.blogspot.com/'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Sub Menu 3</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Menu Blog</a>
<ul>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 1</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 2</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 3</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 4</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://mazinubersahabat.blogspot.com/' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://mazinubersahabat.blogspot.com/'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNIQmrUEXFr04nUs19W9wZVSaNQbYSqa4gbxjEFBZlbdcrB9DADTSQ8cTt1NJ40XY9fxPn2ox42ugjMfmqtVTRHBQPAoofu-tmxreThctUcbPXyPAPj6usR9TCflfyRqVwMqVRXl6Nwqs/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzwVnD8jeuAkC8gCD-pnZIwVbp3Mlu8mqIrTJE7xqhz6ZwR6bJ-RtEeC0zXmgRGgiog6EhFUq3qXoFr8Rsy0F3iiLuPSok5B8pw1aBHOFYUZhlqy82w0u4QhZw3bjjHiybnSocaAaGLPU/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

  • Kode yang mazinu beri warna orange adalah URL tujuan,, silahkan ganti sesuai yang kalian kehendaki!
  • Simpan dan Lihat Hasilnya!

Semoga Artkel yang saya tulis ini mengenai Cara Membuat Menu Drop Down dibawah atau diatas Header ini bermanfaat untuk kalian!

Baca juga



27 Responses to "Cara Membuat Menu Drop Down dibawah atau diatas Header"

Anonymous said...

lg cari cari referensi buat ganti menu drop down nih,trims infonya sob

Unknown said...

Wahh simple nieh menu drop downnya,simple and keren,izin coba ya :)

Chandra Septian said...

mantep gan artikelnya, semoga tambah sukses ya blognya

Unknown said...

manteb postingannya gan salam kenal http://idegemilang.blogspot.com/

Unknown said...

Sama-sama maz Aulia :)

Unknown said...

iya, silahkan maz Agung Laksono!
Semoga blognya tambah keren :D

Unknown said...

Emm,, Terimakasih ya?
Sukses juga untuk blognya Mas Chandra Septian!!

Anonymous said...

kode search engine nya kok ndak bisa ya gan
tolong bantuannya

Unknown said...

emh,,, ikuti petunjuk diatas dengan benar insyaalloh bisa, soalnya saya sudah buktikan,, coba sobat ikuti cara diatas dengan lebih teliti lagi :)

Anonymous said...

sudah gan, tapi kalo di coba di searh dia kagak nampilin apapun

Unknown said...

intinya : gak usah di rubah yang aneh2 pada bagian kode untuk Search nya,, tinggal ganti URL http://mazinubersahabat.blogspot.com/ dengan URL Blog kamu itu dudah bisa kok!
URL nya sudah kamu ganti belum???

Anonymous said...

mantep gan

Unknown said...

slmt malam Admin :-)
sy ingn tnya :
"gmna caranya buat sub-menu dari sub-menu"
(sub menu di dalam sub menu yang lain) ???
terima kasih

maju truss

Unknown said...

bang saya mau nanya soal scrip/code di atas,.. itu cara ngatur mesin pencarinya atau search agar nyambung ke blog kita tu diganti gimana...?? maklum bang newbie

Unknown said...

sama aja bang,.. udah ku coba ganti urlnya ttp yg di cari gk nampak,. udah saya tes

Unknown said...

tak coba dulu kang,,,, mkasie atas infonya mudah2an bsa....
trimmsss

Rendi Lesmana said...

gan, ada kendala nih.
1. gak bisa nemuin
2. cara ngilangin seacrh enginenya gimana ?

www.rendilesmanatips.blogspot.com

Anonymous said...

thanks gan, berhasil ane pasang di blog ane

Panen Film > Download Film Gratis

Unknown said...

iya, semoga bermanfaat :D

I Wayan Ardana Putra said...

Thx atas postingan yang sangat berharga. Tapi masih gagap juga nih gan, kalo mau ganti nama sub menu di dalam sub menu gimana caranya gan ?

Arief Rahmansyah said...

kang., koq searchnya nggak bisa di pake? mohon bantuanya., terima kasih

Unknown said...

iya,, mas belum bisa digunakan.. mau memperbaiki masih sibuk

Arief Rahmansyah said...

udah mas., udah saya utak-atik sendiri n berhasil

terima kasih buat kodenya.,

Unknown said...

sama-sama

Arief Rahmansyah said...

mas., kalau mau mengubah warna dropdwon yang harus di ganti yang mana mas?

Unknown said...

mantab sob, terimakasih banyak atas tutorialnya...

Unknown said...

mantappppp....