Cara Paling Mudah Buat Menu Navigasi Dropdown Horizontal

Cara Paling Mudah Buat Menu Navigasi Dropdown Horizontal
Menu dropdown adalah menu yang apabila mouse kita arahkan kemenu tadi akan keluar menu lagi kebawah,dan yang pasti akan menghemat ruangan dalam blog kita,juga mengurangi load page pada halaman blog.Untuk melihat Demonya lihat aja menu dropdown kang Roni di atas,kerenkan !!!
Untuk membuatnya tidak sesulit yang anda bayangkan karena anda cukup mengikuti beberapa langkah dibawah dan blablabla.............blog anda sudah mempunyai menu seperti milik kang Roni.

Langkah-langkahnya!

1.Masuk ke akun Blogger.com anda
2.Pilih Rancangan
3.Pilih Edit HTML
4.Klik Download Template Lengkap untuk keamanan
5.Copy code dibawah ini dan letakkan di atas code ]]></b:skin> yang ada di template anda


#NavbarMenu{background:#000000; width:960px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;}
#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}
#search{width:240px; font-size:11px; float:right; 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; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#000000; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;}
#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 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:-24px 0 0 170px;}
#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;}
#searchbox{padding:0; margin:0;}
#search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;}
#search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}
#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}
#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}
#top a:hover{color:#cc0000; text-decoration: underline;}
#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}
.topleft {width: 304px; float: left; margin: 0; padding:0;}
.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}
.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}

6.Selanjutnya silahkan hapus code menu navigasi anda yang berada di bawah <body> ( kalo nggak ada ya langsung aja ikuti langkah selanjutnya )

7.Selanjutnya ganti dengan code di bawah ini,atau yang tidak terdapat menu navigasi bawaan langsung masukin aja code di bawah ini

<div id='outer'>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http://roningasinanblog.blogspot.com/'>Home</a></li>
<li><a href='#'>Trik</a>
<ul>
<li><a href='http://roningasinanblog.blogspot.com'>Komputer</a></li>
<li><a href='http://roningasinanblog.blogspot.com'>Windows</a></li>
</ul></li>
<li><a href='#'>Tips</a>
<ul>
<li><a href='http://roningasinanblog.blogspot.com/2011/04/macam-macam-text-area-dan-cara.html'>Tips Blogspot</a></li>
<li><a href='http://roningasinanblog.blogspot.com/search/label/Tutorial%20blog'>Kesehatan</a></li>
</ul></li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='http://roningasinanblog.blogspot.com/search/label/Tutorial%20blog'>Tutorial Blog</a></li>
</ul></li>
<li><a href='#'>widget</a>
<ul><li><a href='http://roningasinanblog.blogspot.com/search/label/Tutorial%20blog'>Widget (smiley) &#160;&#160;&#187;</a>
<ul><li><a href='http://roningasinanblog.blogspot.com/search/label/Tutorial%20blog'>SMS Gratis</a></li>
<li><a href='http://roningasinanblog.blogspot.com/2011/04/macam-macam-text-area-dan-cara.html'>Scrool Ajaib</a></li>
<li><a href='http://roningasinanblog.blogspot.com/2011/04/macam-macam-text-area-dan-cara.html'>Status YM</a></li>
</ul></li>
<li><a href='http://roningasinanblog.blogspot.com/2011/04/macam-macam-text-area-dan-cara.html'>Kode kode Warna</a></li>
</ul></li>
<li><a href='#'>Berita</a>
<ul><li><a href='http://roningasinanblog.blogspot.com'>Unik</a></li>
<li><a href='/'>Gila</a></li>
<li><a href='/'>Link</a></li>
</ul></li>
<li><a href='http://roningasinanblog.blogspot.com'>Link Sahabat</a></li>
<li><a href='http://kontactr.com/user/Kang%20Roni'>[ Kontak Admin ]</a></li>
</ul>

</div>
<div id='search'>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='200' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>
<input class='btn' type='submit' value='Go'/>
</form>
</div></div>
</div>

Ket: Ganti tulisan yang berwarna merah dengan link anda,dan yang biru dengan nama menu blog anda.


Untuk mengubah warna latar belakang/background menu navigasi agar sesuai dengan templat anda perhatikan code pada langkah nomor 5 yang saya cetak dengan warna biru, ganti code yang berwarna biru tersebut dengan code warna yang anda sukai.
untuk mengetahu code warna klik disini

Sumber:kang salman

Related Post:

37 comments:

Imtikhan said...

Salam persahabatan
info yang bagus kawan

untuk bisa valid itu semua bisa dihapus

roni said...

terimakasih atas sarannya

Boku no Blog said...

Terimakasih share Tutornya
Sukses selalu dan Happy blogging

ujik sugiant said...

salam blogger...

kang roni.. untuk mengumpulkan suatu posting yang banyak ke satu menu itu gimana?

thx..

roni said...

Ya pakai menu Dropdown sob seperti di atas, sobat tinggal kumpulkan semua link setiap halaman posting kemudian masukkan link tadi kedalam satu kategory menu dropdown.
Sebagai contoh sobat perhatikan kode dibawah yang merupakan satu kategori menu dropdown di atas,misalkan kategori Trik.

<li><a href='#'>Trik</a>
<ul>
<li><a href='http://roningasinanblog.blogspot.com'>Komputer</a></li>
<li><a href='http://roningasinanblog.blogspot.com'>Windows</a></li>
<li><a href='ISI LINK YANG LAIN>Windows</a></li>
<li><a href='ISI LINK YANG LAIN>Windows</a></li>
<li><a href='ISI LINK YANG LAIN>Windows</a></li>
...........Begitu seterusnya sampai habis link page-nya.......
</ul></li>

Bila masih bingung mohon ditanyakan lagi.

ujik sugiant said...

iya kang roni masih bingung ini aq,.. link posting yang aq kumpulkan seperti contoh di atas setelah aq simpan malah hilang atau seperti tidak ke simpan 'n menu dropdown jdi tidak karuan posisinya..
cara penempatan yg tepat gimana ya kang roni ?
thx...

roni said...

Coba lakukan cara di atas sampai pada langkah ke5. kemudian masuk pada Tata letak terus klik Tambah gadget pilih HTML JavaScript,kemudian masukakan kode pada langkah ke7 di atas kedalam kolom HTML JavaScript.

Perlu diperhatikan pilih Tambah gadget pada Bagian HEADER/bagian paling atas.

Ruly Jenar Nakula said...

mantap kang .. simple dan elegant tutornya

priyonisme said...

mas, mau tanya, sebelumnya salam kenal. karena warna faforitku orange. makan kode warna yang di atas ex : #000000 nah saya ganti dengan #b45f06 e malah jadinya kok jelek.. ada garis putih.. dan ketika di sorot menum nya lapiran warnanya item purdar.. gak cocok baget mas.. pengen buat kayak punyanya mas se...

dan satu lagi mas, karena saya kurang suka dengan blog yang lebah.. ya setandar seperti punya mas dan punya ku.. nah untuk itu.. menu navigasinya itu bisa di kecilin ukuranya sesuai dengan lebar di blog saya engak ams.. mohon petujuknya.. salam. by. priyo

Kangroniblog said...

Untuk menyesuaikan warna minimal sobat cari dan ubah kode warna berikut,
1.#NavbarMenu{background:#000000
2.background:#4a4d4c
3.#nav li li a:visited{background:#000000;
4.#nav li li a:active{background:#4a4d4c

dan utk memperkecil ukuran minimal sobat harus menemukan angka 960px dan 700px pada kode di atas dan ubah nilainya menjadi lebih kecil.

Perlu diperhatikan, selain sobat harus mengurangi nilai dari kedua angka di atas ,sobat juga harus menghapus sebagian menu yang terdapat pada langkah ke7 diatas misalkan sobat hapus menu,Berita,Link,Kontak admin.

Untuk pembelajaran sendiri supaya sobat lebih paham,sobat bisa mencoba merubah setiap kode warna yang ada dan merubah nilai angka yang ada ,Kangroni kira pembelajaran seperti itu akan membuat sobat lebih cepat memahami.Oke thanks atas visitnya...

hai their said...

mohan info, dmn kita temukan "rancangan" yg ada di blog kita sendiri?krn sy cari di blog saya tdk saya temukan kata rancangan utk mendonwload tamplate lengkap?trimakasih

Kangroniblog said...

Oke sob ,kangroni minta maaf karena tidak meng update bahasa blogger ,saya jelasin aja di laman komen ini.
Bila sobat mencari menu dgn kata RANCANGAN diblogger saya jamin tidak akan ketemu karena blogger sudah memperbarui themanya dan menggantinya dengan kata TEMPLATE.Untuk mencarinya sebagai berikut:

1. Login blogger dan otomatis sobat akan masuk pada halaman Dhasbor blogger.
2. Perhatikan icon panah segitiga hitam yang mengarah kebawah yg terletak disamping kanan atas atau sebelah kanan icon pensil warna orange.kalau sudah ketemu klik aja dan akan keluar menu drop down kebawah.
3. Dari menu drop down tadi pilih TEMPLATE/klik template
4. Setelah sobat dibawa pada halaman Template perhatikan pojok kanan atas ada tulisan Backup/Restore atau Cadangkan/Pulihkan, Kalau sudah ketemu klik aja.
5. Setelah sobat mengklik tulisan Backup/Restore selanjutnya sobat bisa donlot template dgn menekan tombol dengan tulisan Download full template/Unduh template lengkap, dan bisa meng upload thema yg baru dengan klik Browser. Kurang jelas boleh tanya lagi....

hai their said...

terimakasih atas petunjuknya, sy sdh masuk ke unduh template lengkap, tp yg keluar justru kode2, apa yg hrs sy lakukan dg kode2 itu?

Kangroniblog said...

Seharusnya file yg sobat donlot berjenis xml dokument dan apabila sobat buka dengan notepad/open with wordpad akan berupa kode,memang benar dalemnya isinya cuma kode javascrip dan css, dan kode2 tadilah yg harus sobat otak atik utk merubah atau menambah tampilan halaman blogger agar lebih cantik.
Saya sarankan buka aja dengan wordpad agar terlihat rapi dan tidak membingungkan.

fungsi file xml dokument tadi hanya sebagai cadangan untuk di upload lagi apabila sobat salah dalam mengedit template, dan itu akan mengembalikan tampilan blogger seperti sebelum di edit.jadi biarkan saja tersimpan dikomputer.

Apabila sobat ingin mengedit template untuk membuat Menu Navigasi Dropdown Horizontal sobat langsung saja menuju menu Template kemudian klik Edit HTML yg terletak ditengah halaman,setelah itu akan terlihat tampilan kode2 template/thema blogger persis seperti yang sobat donlot tadi dan sobat langsung bisa mengeditnya disitu,

Untuk mengedit template atau semisal ingin membuat Menu Navigasi Dropdown Horizontal pastinya sobat akan disuruh mencari kode tertentu didalam template tadi dan itu akan menjadi tambah sulit apabila sobat tidak menampilkan kolom pencarian kode. Untuk menampilkan kolom pencarian caranya :

1. Klik pada kolom kode template dimana saja yg penting masih didalam kolom.

2. Tekan tombol Ctrl+F pada keybord secara bersamaan, setelah itu akan keluar kolom kecil dipojok kanan atas. selanjutnya masukkan kode yg akan dicari kemudian enter.

Bila masih blum jelas kangroni akan selalu siap utk menjawab pertanyaan sobat.

hai their said...
This comment has been removed by the author.
hai their said...
This comment has been removed by the author.
hai their said...
This comment has been removed by the author.
hai their said...

sy sdh berhasil membuatnya, tp justru ketika di pratinjau malah menu nya lari ke bagian bawah, bukan di bagian atas, bgmn caranya menaikan/meletakkan nya di bagian atas ?

Kangroniblog said...

Coba menu mega dropdownnya dihapus dulu

hai their said...

sdh di hapus tp blm mau pindah ke atas, bgmn selanjutnya setelah kita hapus mega dropdownnya?

hai their said...

atau bisa kasih contoh code di bawah body?

Kangroniblog said...

Setelah ane cek lagi blog sobat dan ane terawang kode2 blog sobat ternyata memang ada kesalahan dalam peletakan kode.

Seharusnya sobat itu menaruh kodenya dibawah kode <body> bukan dibawah kode </body>

Ane jelasin dikit ya sob ...
1. <...> = Tag pembuka
2. </...> = Tag penutup

dan sobat tadi meletakkan kodenya dibawah tag penutup.
Cek lagi sob nanti mampir sini lagi...oke

hai their said...

oooooooooooooo.....thanks infonya, aku tdk paham istilah2 kode soalnya aku search <....>atau tag pembuka tdk mucul tp pas aku search justru mucul jd kupikir itu yg dimaksd

hai their said...

mksdnya pas aku searh yg atau taq penutup justru itu yg muncul letak nya dimana, jd mengapa bisa tdk muncul letak nya ketika diminta tag pembuka

Kangroniblog said...

Rata2 template blogger itu tag body pembukanya seperti ini <body>
tapai milik blog sobat kayaknya tag body pembukanya seperti dibawah ini

<body class='loading'> jadi cari aja dan dicoba.kalo sukses kasih info kekangroni.....

hai their said...

sprti nya tdk ada juga, ada cara lain? tp klw sy searh body saja baru keluar letak nya dmn

Kangroniblog said...

Kalo gitu cari aja kode ini <body

hai their said...
This comment has been removed by the author.
hai their said...

ok sdh ditemukan letaknya, kemudian di bawah body berapa baris yg hrs kita hapus?soalnya ketika sy hapus 1 baris dibawah body justru system memberitahukan Tidak dapat memuat pratinjau template: Kesalahan saat mengurai XML, baris 748, kolom 5: The element type "body" must be terminated by the matching end-tag,

Kangroniblog said...

Dihapus itu kalau dulunya sudah ada menu navigasinya dan milik sobat tidak ada jadi nggak perlu ada yg dihapus, coba taruh aja tepat dibawah kode ini
<body atau kalau tidak salah kode lengkapnya spt ini
<body class='loading'> ,,

Kangroniblog said...

Saya ulangi lagi tepat dibawah kode <body

Kangroniblog said...

perhatikan...
<body class='loading'>
----TARUH KODENYA DISINI ------
<div class='navbar section' id='navbar'>

hai their said...

ok sdh berhasil, tp letak nya kok jd paling atas, bukan di bwh running teks atau di bawah image header sprt blog sobat punya

hai their said...

ok akhirnya sdh clear satu masalah, trims atas petunjuknya salam kenal, tinggal saya rubah semua isi2 nya

Kangroniblog said...

Salam knl juga,,,and silahkan kembali lagi bila ada yg ingin ditanyakan....

hai their said...

sob...ada yg mau aku tanyakan lagi, klw mau kita rubah isi menu dg yg pny kita sendiri bagaimana, ketika org klik lgnsung ke link nya, apa prl buat blog lain lagi atau tdk prlu lg?

Kangroniblog said...

Menu Navigasi Dropdown yang sobat buat kemaren itu link dan nama menukan masih milik kangroni jadi sobat harus mengganti linknya dan nama menu yg sesuai dengan thema blog sobat.Dan untuk mengganti link/url/alamat tujuan halaman sobat perlu memperhatikan beberapa ulasan dibawah ini:

1. Sobat tidak perlu membuat blog baru
2. Sobat harus memberi Label pada setiap postingan/artikel.
3. Setiap label nanti mempunyai link sendiri2 dan link itulah yg bisa sobat pakai untuk mengisi Menu Navigasi Dropdown.ini adalah salah satu cara merubah alamat tujuan dari Menu Navigasi Dropdown.

bila masih belum jelas bisa lanjut lagi pertanyaannya

Post a Comment