Cara Membuat Menu Horizontal Blog Drop Down

Tukang Tidur Main Youtube 300x250
Tukang Tidur Main Youtube 300x250
Cara Membuat Menu Horizontal Blog Drop Down adalah cara berbeda dalam menampilkan menu-menu yang ada didalam blog yang akan menghemat ruang serta mengelompokkan setiap kategori dari sub menu halaman yang memiliki keterkaitan dengan menu utama dalam blog tersebut. Membuat menu horizontal drop down tidak sama dengan menu horizontal sebelumnya yang telah saya ulas sebelumnya. Pada menu horizontal ini akan memiliki sub menu yang komplek dan tidak autonom seperti menu horizontal sebelumnya karena ia memiliki sub menu yang berkaitan dengan menu utama seperti yang terlihat pada gambar berikut ini

Cara Membuat Menu Horizontal Blog Drop Down


Berikut Cara Membuat Menu Horizontal Blog Drop Down
  1. Masuk ke akun blogger anda
  2. Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard
  3. Cari kode ]]></b:skin>
  4. Masukkan kode CSS berikut tepat diatas ]]></b:skin>
    #navdropdownsearchengine { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; }
    #navdropdownseleft { width: 400px; float: left; margin: 0; padding: 0; }
    #navdropdownse { margin: 0; padding: 0; }
    #navdropdownse ul { float: left; list-style: none; margin: 0; padding: 0; }
    #navdropdownse li { list-style: none; margin: 0; padding: 0; }
    #navdropdownse li a, #navdropdownse li a:link, #navdropdownse 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; }
    #navdropdownse li a:hover, #navdropdownse li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; }
    #navdropdownse li li a, #navdropdownse li li a:link, #navdropdownse li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; }
    #navdropdownse li li a:hover, #navdropdownse li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; }
    #navdropdownse li { float: left; padding: 0; }
    #navdropdownse li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
    #navdropdownse li ul a { width: 140px; }
    #navdropdownse li ul ul { margin: -32px 0 0 171px; }
    #navdropdownse li:hover ul ul, #navdropdownse li:hover ul ul ul, #navdropdownse li.sfhover ul ul, #navdropdownse li.sfhover ul ul ul { left: -999em; }
    #navdropdownse li:hover ul, #navdropdownse li li:hover ul, #navdropdownse li li li:hover ul, #navdropdownse li.sfhover ul, #navdropdownse li li.sfhover ul, #navdropdownse li li li.sfhover ul { left: auto; }
    #navdropdownse li:hover, #navdropdownse li.sfhover { position: static; }
  5. Cari kode dengan struktur seperti berikut ini
    <div id='header-outer'>
    <div id='header-inter'>
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title=' (Header)' type='Header'>
    <b:includable id='title'>
    ----------------------
    ----------------------
    ----------------------
    </b:includable>
    </b:widget>
    </b:section>
    </div>
    </div>
    </div>


    Letakkan kode berikut tepat dibawah kode </b:section> diatas

    <div class='menuhorisontal'>
    <ul id='navdropdownse'>
    <li><a href='#'>Menu DropDown</a></li>
    <li><a href='#'>Menu DropDown A</a>
    <ul>
    <li><a href='#'>Menu DropDown Sub A1</a></li>
    <li><a href='#'>Menu DropDown Sub A2</a></li>
    <li><a href='#'>Menu DropDown Sub A3</a></li></ul></li>

    <li><a href='#'>Menu DropDown B</a> </li>
    <li><a href='#'>Menu DropDown C</a> </li>

    <li><a href='#'>Menu DropDown D</a>
    <ul>
    <li><a href='#'>Menu DropDown Sub D1</a></li>
    <li><a href='#'>Menu DropDown Sub D2</a></li>
    <li><a href='#'>Menu DropDown Sub D3</a></li></ul></li>
    <li><a href='#'>Menu DropDown E</a> </li>
    </ul>
    </div>
  6. Selesai. Silahkan pratinjau perubahan blog anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilan menu horizontal blog drop down
  7. Simpan Template
Semoga bermanfaat dan bisa diterapkan dalam blog anda setelah membaca artikel ini, Cara Membuat Menu Horizontal Blog Drop Down
Dapet Duit Dari Twitter 486x60

97 komentar

Mantep nih gan, follow ya redynirtiana.blogspot.com

Balas

@Redy Nirtiana Muzaffar makasih atas kunjungan dan komentarnya gan,, tentu..

Balas

saya agak bingung,,,maklum pemula
gan bisa ga buating tutorial berupa videonnya?

Balas

bisa kirim videonya ke email saya ga?
www.gungjunior@gmail.com

Balas

@agung yoga mohon maaf mas, untuk videonya saya tidak bisa buatin, artikel diatas saya kira bisa diterapkan dengan mudah kok,,,

Balas

terima kasih banyak atas tutornya gan, salut deh ibu-ibu indonesia juga jago ngeblog...

Balas

ijin mempraktekkan bu ana,terima kasih banyak...

Balas

@sinopsis dan review film terimakasih kembali, silahkan dan semoga bermanfaat

Balas

@objek wisata di indonesia dan sinopsis film sama-sama mas, makasih banyak juga atas komen dan kunjungannya
mungkin ini yg dinamakan emansipasi hehee

Balas

Saya salut ma admin blognya..he.. Di sela2 ngurusin keluarga tp mc juga .. Sempat ngeblog ..salam knal and happy blogging

Balas

Terimakasih ...
sangat membantu saya
seora g newbe
..................

Balas

@wawan nawansta saya juga masih newbie mas, masih belajar juga,, makasih atas kunjungan serta komentarnya..

Balas

Artikelnya bermanfaat utk saya yang gaptek.Boleh nanya ya mbak, cara mengisi menu navigasi dengan halaman statis ada artikelnya nggak?

salam sukses
MFY

Balas

@maria yuniarti di blognya mbak Maria kan sudah ada dan terisi tuch,,,

Balas

Mas maksud cara yg ke 3 masukin kode mksdnya apa yh?

Balas

@Mardi Mardiansyah Wiria mungkin maksud mas Mardi poin yang ke 4? kalo yg ke 3 kan Cari Kode...

Balas

saya pemula tapi agak bingung...
trims panduan nya...

Balas

@Chia Network kalau boleh tahu, bingungnya dimana? mari kita belajar bersama-sama..

Balas

bunda... sy newbie.. masih bingung untuk paste kodenya dimana, masalahnya.. untuk struktur spt dibawah ini.. ada 4 (empat) dan saya coba jd tidak muncul menu'a.

-----------


Balas

bunda... sy newbie.. masih bingung untuk paste kodenya dimana, masalahnya.. untuk struktur spt dibawah ini.. ada 4 (empat) dan saya coba jd tidak muncul menu'a

'"
'"
'"


note : sengaja sy kasih tanda '" agar bisa ke post.

Balas

@farus Rodman maksudnya gimana mas Rodman? tanda "' maksudnya yang mana?

Balas

saya masih bingung sama cara yg ke 5. maklum newbie

Balas

@M. Ahwan Rozali jangan lupa centang Expand wdiget templatenya dan cari salah satu kode diatas, coba fokus kan pada header-wrapper

Balas

Yth. Mbak Yuni..
Setelah coba saya praktekan Cara membuat menu horizonal dropdown tsb. Ada kesulitan yang saya alami, yaitu kode script berikut ini tidak saya temukan pada struktur html template nya. Mohon penjelasan Terimakasih.
Abby Syamsi

Balas

Yth. Mbak Yuni..
Setelah coba saya praktekan Cara membuat menu horizonal dropdown tsb. Ada kesulitan yang saya alami, yaitu kode script No. 5 tidak saya temukan pada struktur html template nya.

Mohon penjelasannya. Terimakasih.
Abby Syamsi

Balas

@Anonim setiap template memiliki kode yang berbeda mas, sebagai acuannya silahkan cari kode Header1, semua template pasti memiliki Header1 dan cari bagian atas atau sebelum kode Header1 dan penutupnya,, kalau bisa tolong sertakan alamat blognya, biar saya cek,,

Balas

Admin... Minta Tolong donk...
bagaimana sih caranya merubah Besar Menu Horizontal dan margin,,warna,,,backround dan lainnya....
thanks sebelumnya...

Balas

visit my blo aoret13.blogspot.com

Balas

ko di blog saya gk ada div id header nya ya? udah cari muter''?
ada bnya div class header outher..

Balas

Mantep gan infonya :)

Kunjungi balik http://septiankenthis.blogspot.com/
Salam ngeBLOG Kenthis 69 !

Balas

@halimah queen saya sudah lihat kode template blognya mbak Halimah, semua kode yang ada di artikel diatas, ada semuanya, silahkan dicari lagi dan untuk mencarinya jangan lupa centang Expand Template Widget agar kodenya muncul semua..

Balas

sudah saya pasang di blog saya http://pinque27.blogspot.com, tapi link-nya koq nggak bisa di klik ya....? Trim's panduannya..

Balas

thanks info'x gan, sangat bermanfaat sekali bagi saya ..

Balas

hai thanks infox
sy udah buat page statis sebelumnya lgsung dari blogger.
dan sudh terisi bbbrpa postingan. Nah apa bisa buat dropdown dari page statis yang sdh ada ? krn kl masuk ke html gitu pasti doble jadinya kl page statis yg pertama ga dihapus.

trus kl udah buat menu dropdown pke html gitu. gimana cara menempatkan postingan kl mau tulis postingan baru ?
mohon bantuannya

thanks

Balas

@Masturi Mahuding kalau menggunakan kode langsung yang sudah di statis page untuk menu horizontal, saya kira cukup sulit, nukan tidak bisa tp perlu penambahan kode-kode dari dropdown terebut

Balas

sangat membantu saya..
jangan lupa kunjungi blog saya
http://www.cyber-corp99.blogspot.com

Balas

Mksh info'x gan sangat membantu sekali..

Balas

makasih sis..oiya cara ngilangin baris menu warna biru yang ada di paling atas itu gmn yaa..#newbe

Balas

aku jga binggung.saya usaha terus.nanti bisa.

Balas

wah mantap nih postnya ane langsung coba..
follow juga ya globallisasi.blogspot.com

Balas

terimakasih artikel ini sangat membantu saya .. !!'

Balas

kok... ttep ga bisa sist. apa template yang kita pasang juga berpengaruh yaa ?
mohon pencerahannya...

Balas

thankz,,,,,postingx.. sngt mmbantu.......

Balas

terima kasih, ane pusing cari2in ini, kunjungi blog saya yg sederhana http://habiball.blogspot.com/

Balas

Numpang Lewat gan, harap kunjung kembali ya

Balas

Mantap mbae... tapi masih belum mudeng juga nich.... Mampir ya ke http://desain-rumah888.blogspot.com/

Balas

Bagus infonya, sangat berguna!!
Tpi klau saya pengen nambah menu dropdownnya dan didalam menu itu ada sub- subnya lgi lagi bagaimana caranya? tinggal nambah dikoding kedua atau koding 1ada yg harus ditambab juga?
Maaf baru belajar bikin blog,,

Balas

kalau memasukan tulisan kita ke menu gemana ya mbak, moho solusinya ya,
ne blog saya :

http://indonesiaprogresif.blogspot.com/

Balas

gan ko menu dropdownnya ga lancar ya?? Ini blog ane http://st-times.blogspot.com/ Tlg ya gan knp bisa gitu...

Balas

terimakasih informasinya saya akan coba pasang

Balas

Saya kok gk ktemu dengan kode yang ada dilangkah 5 (yg tulisan merah, itu knpa ya ?

Balas

terimakasih informasinya saya akan coba pasang

Balas

kalau memasukan tulisan kita ke menu gemana ya mbak, moho solusinya ya,

Balas

erimakasih artikel ini sangat membantu saya .. !!'

Balas

http://maimtricks.blogspot.com
mohon kunjungannya

Balas

Buk format edit HTML kan udah berubah gimana nih.............?

Balas

horee berhasil...
hehehe
newbie nih gan...
mohon kritiknya ya di http://pkbmnurulhuda.blogspot.com/

mksh tutorialnya.. :D

Balas

terima kasih gan sangat bermanfaat

BBM hadir 27 juni di android dan ios

http://syamsblog95.blogspot.com/2013/06/blackberry-messenger-hadir-di-android.html

Balas

Klo untuk merubah lebar dan tinggi menu nya yang harus di ganti yg mananya ya mba mohon pencerahannya terimakasih

Balas

pada bagian kode ul, ganti width untuk lebar menu utama
bagian li ul, ganti width untuk lebar sub menu (menu dropdownya)
untuk tinggi tergantung dari pengaturan, margin dan padding; tinggi dari teks terhadap kolom menu (line height);

Balas

wah,gak gampang kaya di wordpress self host ya gan.. salam kenal

Balas

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

Balas

min aku uda nyoba tapi ko g bisa drop down...maap pemula.
http://storeyanes.blogspot.com/
cek min... makasi

Balas

BU, BELUM DIJAWAB CARA MEMPOSTING ARTIKEL KE MENU

Balas

bro kalo ga ada ]]> gmna ya?? soalnya gua ga ada ni, jadi ga bisa pake tuhh ]]>,,
tolong bantuan nya ya gan ^_^

Balas

Kalau ganti warnanya bisa gak ya?

Balas

Terimakasih yanh gan infonya, saya sudah berkeliling nyari yang pas sama templat saya , ternyata disini yang cocoknya,,,izin follow yah www.pakaiantanahabangbandung.com

Balas

Bagus Infonya,ijin Nyimak dulu mas

Balas

saya mau tanya, kalo di template blog saya ngak ada ]]> skin bagaimana? apa harus di buat ]]> di antara baris kode template saya atau bagaimana? apa ada mslah dgn template saya padahal say ngak pake template yang download.. asli dari blogger

mohon penjelasannya

Balas

kalau tidak ada kode ]]> maka di template menggunakan kode </style>

Balas

gak cocok sama template ane gan

Balas

coba gunakan yang terbaru ini mas,panduantemplateblog.com/2014/03/update-menu-horizontal-drop-down-search.html

Balas

mas biar ukurannya sama besar dengan menu bawaan yang ada diblog saya bagaimana ya mas? coba mas cek menu category kan kecil itu? biar sama ukurannya dengan menu sitemap yang disebelahnya bagaimana ya mas? apa yang harus saya edit? sudah saya coba tetap gak berubah ukuran nya.. cek disini mas untuk linknya http://adsteuku.blogspot.com

Balas

infonya bermanfaat tnte mksih ya ^_^
oia,,kayaknya ada yang kesusahan tante mencari code ]]> di blog tampilan baru...
soalnya blog baru sm blog lama kan beda jadi susah kl gk tau nyari code ]]>.

Balas

oia 1 lgi tante ko menu dropdown sub1A-dst ko pas mau di klik ngilang,,,itu kneapa ya tante tolong pencerahanya makasih :)

Balas

memang benar mas, hanya sebagian caranya saja yang berbeda, untuk mencari kode di template, klik terlebih dahulu area kode, selanjutnya tekan CTRL+F pada keyoarb sehingga muncul kolom pnecarian didalamnya, bukan diluar... selanjutnya, masukkan teks atau kode didalam kolom tersebut, tekan Enter.. ketemu dech.. :)

Balas

ada yang kurang kodenya mas.. :)

Balas

kalau sudah ada kode menunya, lebih baik dipilih salah satu saja mas..
kalau ingin menyamakannya, sesuaikan ukuran font, margin, padding, dan line-height dengan kode bawaannya

Balas

aku gak ngerti bu -_- gabisa bisa tolongin :'(

Balas

di coba dulu mbak, di blognya mbak Dwir sudah ada tuch menu horizontal tapi belum dropdown ya..

Balas

Top Top Top, markotop, terima kasih Sis sharenya.

Balas

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih