how to make menu bar “pull down” on blogspot

Jika sebelumnya blog ini sudah memuat cara membuat menu bar/menu navigasi mulai dari menggunakan bahasa HTML sederhana hingga menggunakan navbar menggunakan CSS dan HTML, ternyata ada juga rekan yang menanyakan bagaimana membuat menu navbar yang ketika diklik akan muncul sub menu baru tepat dibawahnya (istilah kerennya sih pulldown).

Sebagai perandaian menu yang akan dibuat direncanakan tiga menu utama dan dua menu dengan masing-masing memiliki 2 sub menu di dalamnya sebagai berikut yaitu:

1. “Home” yang akan merujuk ke URL utama blog
2. “Tips dan Trik” sebagai menu kedua dengan sub menu adalah “CSS” dan “HTML”, kemudian…
3. “Free Template” sebagai menu ketiga dengan sub menu adalah “2 KOLOM” dan “3 KOLOM”.

Masing-masing nama menu diatas telah memiliki URL-nya masing-masing yang diambil dari url berdasarkan label artikel pada blog, contoh url untuk ke label adalah seperti ini:

http://NamaBlogAnda.blogspot.com/search/label/CSS

yang bercetak tebal diakhir URL diatas adalah nama label dan oleh karena itu sebaiknya anda telah mencatat URL masing-masing Label anda yang akan dibuatkan link dan kemudian simpan dalam sebuah file notepad.

Menambahkan CSS Menu Navigasi/Menu bar

Pertama masuk akun bloger dan pilih blog yang akan dibuatkan menu navigasi. Setelah pilih “TATA LETAK” dan klik “Edit HTML”. Sebelum melakukan perubahan apapun pada template anda jangan lupa untuk menyimpan template lama Anda dengan mendownloadnya terlebih dahulu agar jika terjadi kesalahan Anda bisa mengembalikan ke template lama Anda. So langsung klik “Download Template Lengkap” dan simpan file XML anda di Hardisk computer.

Setelah proses backup template selesai cari kode berikut “]]></b:skin>” (tanpa tanda kutip), agar memudahkan pencarian tekan CTRL + F.

Masukkan/copy seluruh kode CSS dibawah ini tepat diatas kode diatas tadi dan tempatkan/paste diatas kode “]]></b:skin>” ini:

/*=== Navigasi pulldown ===*/

body{ behavior:url("csshover2.htc"); }

.NavMenuPD {

float:left;

padding:0;

margin:0;

color: #FFFFFF;

background: #000000;

width:100%;

border:solid 1px #004080; clear:both;} /*Warna Navigasi Utama*/

.NavMenuPD a, .NavMenuPD a:visited {

font-family:Verdana, Arial, Helvetica, sans-serif;

font-style:normal;

font-weight:bold;

font-size:12px;

color: #FFFFFF;

background-color: #000000;

text-decoration: none;}

.NavMenuPD ul {list-style-type:none;padding:0; margin:0;}

.NavMenuPD ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #004080; border-left:solid 1px #004080;}

.NavMenuPD ul li a {color: #FFFFFF;background: #000000;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }

.NavMenuPD ul li ul {display:none; border:none;color: #FFFFFF;background: #000000; width:1px}

.NavMenuPD ul li:hover a {background-color:#C0C0C0; text-decoration:none; color:#000000;} /*Warna main cells mode hover */

.NavMenuPD ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}

.NavMenuPD ul li:hover ul li a {display:block; width:100px; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#C0C0C0; color:#FFFFFF;} /*warna subcells mode normal */

.NavMenuPD ul li:hover ul li a:hover {background-color:#808080; text-decoration:none;color:#FFFF00;} /*Warna subcells mode hover*/

.NavMenuPD ul li a:hover {background-color:#C0C0C0; text-decoration:none;color:#000000;} /*warna main cells mode hover */

.NavMenuPD ul li a:hover ul {display:block; width:100px; position:absolute; z-index:999; top:29px; left:0; }

.NavMenuPD ul li ul li a:visited { background-color:#C0C0C0; color:#FFFFFF;} /*Warna subcells normal mode*/

.NavMenuPD ul li a:hover ul li a {display:block; width:100px; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#C0C0C0; color:#FFFFFF;}

.NavMenuPD ul li a:hover ul li a:hover {background-color:#808080; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/

/*= by Oentoe09 – url blog: http://oentoe09.blogspot.com =*/

Keterangan Kode CSS diatas:

• Kode berwarna merah adalah CSS yang mengatur tampilan menubar (main cells) saat pertama muncul, warna bisa anda ganti-ganti sesuai dengan warna blog anda dan pada kode diatas saya memilih warna hitam (#000000) dengan font warna putih (#FFFFFF) yang ditebalkan (bold).
• Kode Berwarna Biru adalah Tampilan menu ketika Cursor mouse berada di diatas text menu juga tampilan sub menu (subcells), dimana warna mode normal saya pilih adalah warna abu-abu muda (#C0C0C0) dan posisi kursor diatas teks sayap pilih warna abu-abu yang lebih gelap(#808080).
• Jika Anda tidak menyukai adanya border berwarna biru diantara masing-masing text menu anda bisa menhilangkannya dengan mengganti nilai solid 1px menjadi 0px atau mengganti kode warna #004080 (biru) dengan warna sesuai keinginan anda tentunya.

Menambahkan HTML Menu Navigasi/Menu bar

Untuk memasukkan link yang telah kita siapkan sebelumnya. cari kode HTML ini <div id='header-wrapper'> dan masukkan kode dibawah tepat dibawah kode <div id='header-wrapper'> ini.

<div class="NavMenuPD ">
<ul><li><a href="/">Home</a> <!-- jangan diubah baris ini -->
</li></ul>

<ul><li><a href="http://NamaBlogAnda.blogspot.com/search/label/tipstrick ">Tips dan Trick</a>

<ul>

<li><a href="http://NamaBlogAnda.blogspot.com/search/label/CSS">CSS</a></li>

<li><a href="http://NamaBlogAnda.blogspot.com/search/label/javascript">Java Script</a></li>

</ul>

</li></ul>

<ul><li><a href="http://NamaBlogAnda.blogspot.com/search/label/freetemplate">Free Template</a>

<ul>

<li><a href="http://NamaBlogAnda.blogspot.com/search/label/2kolom">2 Kolom</a></li>

<li><a href="http://NamaBlogAnda.blogspot.com/search/label/3kolom">3 Kolom</a></li>

</ul>

</li></ul>

</div>

Keterangan Kode HTML diatas:

• Kode berwarna Hitam adalah kode tombol “Menu Utama” yaitu Home disini anda tidak perlu melakukan perubahan apapun kecuali teks nama Home bisa Anda ganti menjadi FrontPage atau Muka.
• Kode warna Hijau dan Merah adalah Tombol masing menu utama dalam hal ini adalah tombol “Tips dan Trick” dan tombol “Free Template”.
• Kode Warna biru adalah URL Label yang sebelumnya telah anda tentukan dan disimpan pada file notepad tadi.
• Jika masih ingin menambahkan beberapa tombol dengan sub menu silahkan Copy semua kode berwarna merah diatas dan ganti URL sesuai tujuan yang anda inginkan.
• Jika hanya ingin menambahkan sub menu saja copy kode ini: <li><a href="http://NamaBlogAnda.blogspot.com/search/label/NamaLabel">NamaLabel</a></li> ganti "NamaLabel" seusai kebutuhan.
  
• Kemudian jangan lupa letakkan diatas kode ini
  </ul>
  </li></ul>
  

Setelah itu Simpan hasil penambahan tadi dengan tombol SAVE / SIMPAN, kemudian tekan pratinjau untuk melihat hasil modifikasi yang anda telah buat tadi. Semoga Sukses.
Finally mudah-mudahan cara diatas bisa bermanfaat dan jika ada pertanyaan seputar tulisan ini boleh disampaikan lewat komentar itung-itung juga buat nambah link anda di blog. Selamat ngoprek template dan semoga sukses :D

Segala sesuatu yang terjadi akibat mengikuti tutorial ini menjadi resiko masing-masing, admin tidak bertanggung jawab OK?!

Update:

buat rekan-rekan yang ingin memasang menu bar pulldown seperti menubar blog ini silahkan baca caranya di "cara membuat menu pulldown versi 2" atau desain menggunakan Menu Generator (Freeware) silahkan langsung baca disini mengenai "Tools Modifikasi Blog"