mau dapat artikel terbaru blog ini? silahkan ikuti update blog ini

Ads

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"

41 komentar:

joe mengatakan...

wah kok sulit banget ya?

kre_thek mengatakan...

gampang kok sob..

lamnal ea sob..

Oentoe_09 mengatakan...

@ Joe:
Awalnya emang sulit mas Joe..saya juga mulainya dari nol dan modal berselancar ke berbagai blog tutorial..akhirnya dah bisa ngedit dewe and berbagi pengalaman lewat blog ini. btw lam kenal ya ;)

@ Kre-thek:
sblumnya lam kenal ya
Syukurlah klo masih ada yang bisa ngeh sama artikel ini.
btw saya dah liat menubarnya blog Kre-thek and kayaknya berjalan dengan lancar ya?

kre_thek mengatakan...

yap lancar mas.. awal nya sieh memng puyeng.. tapi intinya sangat simple cuma ul ul nya ajjah yang perlu diperhatikan..
hee.. tapi saya gag taro di html coz jadinya ngegabung.. jadi saia pake di gadget dehh.. dan berhasil.. hehehe..

Oentoe_09 mengatakan...

Komentar ini telah dihapus oleh pengarang.

Oentoe_09 mengatakan...

@Krethek:
iya ya kenapa gak kepikiran sampe kesana padahal lebih mudah klo lewat "add element page" ketimbang mesti edit html template. mana bisa di drag kemana-mana pula.
btw makasih masukkannya mas... :D

kre_thek mengatakan...

sama2 mas :D kita kan saling sharing.. saia jg berterima ksih mas.. atas sub menu nya.. hee..

Ajeng mengatakan...

Luamaaaaa sekali aku tidak mampir kesini. Masih ingat sayakah? Wah,postingannya sngat bermanfaat tuh. Bisa sicopykan? Terima kasih ilmunya..

Oentoe_09 mengatakan...

@ Ajeng:
masihlah..kalo gak percaya bisa liat link ek blognya ajeng masih terpasang tuh di widget "jejak blogger" di bawah artikel ini.
silahkan kopi paste sepuasnya asal gak diubah and jgn lupa sumbernya gitu :D
sama-sama

ruly mengatakan...

kirim dulu info2 ttg blog ta...sy msh bljr bah...

mhalieq mengatakan...

bos.. ajar ka dulue.. minta ka dlm file word..

masicang mengatakan...

hmm... bisa ngga ya tak coba di page blog ku?

Kak Seno mengatakan...

mas udah aku coba tapi untuk scrib : header-wrapper di templet blogku tidak ada adanya header-inner
trus gimana mas?

Oentoe_09 mengatakan...

@ Ruly:
file apa yang mo dikirim kanda?

@ Malik:
langsung meq save aja ini blog di hardiskta bro..

@ Mas Icang:
semoga sukses belajarnya Mas

@ Pengging Cyber Media:
Klo "header wrapper" gak ketemu bisa pake cara mas Kre-thek langsung sisip scriptnya dgn menambahkn widget html di Add Element page kemudian copy & pastekan script ke dalam elemen tersebut..
good luck ya mas ;)

Unknown mengatakan...

thanks banget

ayo belajar photoshop disini

http://ict-photoshop.blogspot.com/feeds/posts/default

M45-4DY mengatakan...

jika sudah ada dan mau di modif kayak gitu gmn??? coba liat blogQ n tolong ksih masukan buat ganti menu barnya...

Oentoe_09 mengatakan...

@ JowCow:
sama-sama joko ;)

@ Mas Ady
dari hasil terawang barusan (dukun kali..!!) khusus menu blognya url asal belum di ganti alias masih menggunakan url dari yang buat template..
klo bisa di edit dulu ganti dengan alamat blognya mas Adi caranya (klo menggunakan blogger.com) masuk saja di akun blogger anda and tuju langung edit template kemudian langsung ganti url asal sesuai dengan alamat blog anda ok..(janang lupa backup dulu dan save hasil perubahannya)

semoga bermanfaat

FAJRIN INDRIANI RAIS mengatakan...

Makasi artikelnya bagus banget dan aku dah coba dan berhasil tapi kok malah gambar header yang aku buat malah munculnya disamping ya??? jadinya gak rapi.... gimana caranya biar headernya tetap berada diatas menu pulldown yang dibuat tadi sehingga lebih rapi lagi...mohon bantuannya...
makasi sebelumnya

Oentoe_09 mengatakan...

@ Fajrin:
trims jg dah mampir ke blog ini...kayaknya template yang di pake adalah "rounded" dari default blogger.com ya?
setahu saya mmg max widget untuk header max 1 so mesti di buat jadi dua ato lebih biar nantinya kode menu bisa ditambahkan di bawah header caranya mesti ubah nilai max widget header lewat CP akun >> edit html(backup terlebih dahulu).
setelah itu balik lagi ke element halaman dan add element page copy-paste kode menu bar tadi dan widget (for HTML/Javascript) dibagian header..
semoga bisa membantu
BR,
Oentoe_09 ;)

Unknown mengatakan...

MASSS PLEASEE BANTU AKU... AKU DAH BISA BIKIN MENU BAR NYA..

TAPI CARA MASUKIN POSTINGAN KE MENU BAR NAVIGASI-NYA GIMANA. CONTOH : BAR NAVIASINYA MUSIK, NAH KALAU KITA MAU KLIK BAR MUSIK SEHARUSNYA DIDALAMNYA ADA SEBUAH POSTINGAN YANG SUDAH DIMASUKAN,

NAH PERTANYAANYA :
Bagaimana cara memasukan postingan tersebut kemenu naviagasi, terima kasih

www.moexty.co.cc <<<<<< Blog saya

e-mail saya : moexty_luckY@yahoo.co.id

usaha online mengatakan...

mas, sumpeh nie postingan bantu saya buanget....makasih ye.....

gru mengatakan...

kakkkkkkkk makaaaaaaaaaassssssssssssiiihhhhhhhhhhhhhhh
topppppppppppppp akkkuuuuuuu bbbbeeeerrrrrrrhaasiiillllllll

(walaupun pake paksaan juga hhe)

Visit me @ bilangapa.co.cc

Oentoe_09 mengatakan...

@ All:
Makasih dah mampir sobs... ;) :D

Rooseno Rahman Dewanto mengatakan...
Rooseno Rahman DewantoKomentar ini telah dihapus oleh pengarang.Senin, 21 Desember, 2009
ins mengatakan...

TAPI CARA MASUKIN POSTINGAN KE MENU BAR NAVIGASI-NYA GIMANA. CONTOH : BAR NAVIASINYA MUSIK, NAH KALAU KITA MAU KLIK BAR MUSIK SEHARUSNYA DIDALAMNYA ADA SEBUAH POSTINGAN YANG SUDAH DIMASUKAN,

NAH PERTANYAANYA :
Bagaimana cara memasukan postingan tersebut kemenu naviagasi, terima kasih
ervin_tea@yahoo.co.id

Rian mengatakan...

Mas udah di pasang thanks :)

tp klo misalkan dari submenu tersebut pengen keluar sub menu lagi ke kanan gimana mas

misal
Free Templates
2 kolom >>> white
>>> Black
3 kolom

thanks minta di tindak lanjuti ya :)

DoraKenQU-SSK mengatakan...

TQ y..^^

aktifis sandal jepit mengatakan...

masih dalam percobaan sob,bingung tapi menantang...

sound of classick mengatakan...

kok ada yang kurang dengan scribt di blogku ya?

tapi coba kucari lagi,makasih infonya bos

merawat dan memperbaiki komputer mengatakan...

oke,bisa di coba di blogspot saya...

thanks ndan infonya...

Unknown mengatakan...

kang maaf mo tnya,,,,klau cara menyesuai kan postingan dengan Query nya gmana ya,,,..bingung eung..di tunggu jawabannya..

Oentoe_09 mengatakan...

@ for all: Teman-teman makasih dah mampir, sebelumnya saya minta maaf karena untuk sementara saya belum bisa update apapun dalam waktu dekat ini berhubung saat ini saya berstatus CPNS jadi masih sibuk dengan segala urusannya.. . mohon dimaklumi, sekali lagi maaf atas ketidaknyamannya..
BR,
Oentoe_09

triwied_77 mengatakan...

saya coca ya mas...

jack mengatakan...

mas saya mau nanya nih cara memasukan tulisan ke menu bar cara'y gmn sih????
saya ambil contoh dari blog mas,misal saya arahin mouse ke blog tools maka keluar pilihan ebook tools,free service dll,nah saya mau tanya cara masukin tulisan ke ebook tools,free service tu gmn????thxs

Oentoe_09 mengatakan...

@ Jack: Silahkan baca di versi kedua bikin menu pulldown pada link berikut: http://oentoe09.blogspot.com/2010/02/bikin-menubar-pulldown-versi-2.html
Insya Allah memberi solusi atas pertanyaannya. Sebelumnya thanks for maen ke blog ini Bro ;)

jack mengatakan...

makasih banyak mas oentoe...akhirnya saya berhasil juga walaupun tadi sedikit pusing akhirnya bisa juga..hehe maklum saya masih baru,so thx bngt mas semoga ilmunya jadi barokah

Oentoe_09 mengatakan...

@ Anonim 1: buat mengkoneksikan kotak search dengan menu bar bisa baca artikel saya disini

@ Anonim 2: Klo boleh lihat hasil setelah dipasang di blog boleh gak?

Brandalz Coolz mengatakan...

Kalo bikin submenu dari submenu gimana..????
Kayang Yang Di menu ini..:
My Experience
Edit Template
CSS
HTML/JavaScript
Gimana Caranya....??
Thanks Masukannya...
Kunjungi Juga Blog Ane di http://vector-community.blogspot.com Kalo bisa balez ke email ane : yayakvector@yahoo.com

soepras mengatakan...

sama seperti yayak vector...saya nyampai tahap ini kesulitan untuk membuat isi di sub menu...

terima kasih atas sebelum dan sesudahnya

Oentoe_09 mengatakan...

@ Yayak Vektor & Soepras:
Silahkan baca dengan seksama artikel diatas mengenai Menambahkan HTML Menu Navigasi/Menu bar

rico ade mandana mengatakan...

kak,,kalo punya ku kok gak kayak yang kaka jelasin ya..gak bisa template ku di buat dropdown menu

Posting Komentar

Label

Entri Populer

Blog support