Senin, Juni 08, 2009

Membuat menu navigasi (horizontal) bercabang

Menu horizontal bercabang (nested) ini adalah kelanjutan dari bahasan tentang membuat menu navigasi horizontal sederhana. Dalam bahasan kali ini kita akan mencoba membuat menu navigasi yang ada cabangnya (dropdown). Script menu ini saya peroleh dari blog teman namanya anni (scriptnya sedikit saya ubah agar sesuai dengan template saya), sedikit penjelasan tentang teman saya ini, anni masih sekolah di sma (kalo tidak salah di tasikmalaya) , sekalipun masih sma tetapi dia sudah mahir utak-atik script html/javascript, pasti banyak mahasiswa yang kalah yaaa. Contoh menu navigasi horizontal bercabang tersebut bisa anda lihat di bawah ini:

menu horisontal

Menu horizontal di atas dibuat dengan menggunakan html script dan css, menurut beberapa sumber menu horisontal yang dibuat menggunakan script css + html  lebih mudah ditelusuri oleh robot search engine dibanding jika menggunakan menu yang dibuat menggunakan javascript.

Untuk membuatnya bisa lakukan langkah berikut:

1. Login ke account blogger anda
Pilih Dashboard -> Tataletak -> Edit HTML

cari kode berikut:




]]></b:skin>




2. Di bagian atas kode tersebut masukkan kode berikut




/* Navbar */
#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i36.tinypic.com/28lgntl.jpg) repeat-x;
opacity: 0.99; filter: alpha(opacity: 98);}
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
#menu ul{padding:0; margin:0;}
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://i36.tinypic.com/28lgntl.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}
#menu ul li ul {display:none;}
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}
.status-msg-wrap{
display:none;
}


4. Klik tombol "Simpan Template"

5. Buka halaman "Tata Letak -> Elemen Halaman"

6. Pada Elemen header , klik " Tambah Gadget"



Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header, untuk menampilkannya bisa lihat postingan saya tentang cara menampilkan "tambah gadget" di header


7. setelah mengklik tombol "tambah gadget" pilih HTML/Javascript




8. pada kotak dialog html/javascrpit masukkan kode html berikut:



<div id="menu">
<ul>
<li><a class="active" href="/"> Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
</ul></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
<li><a href="#">Menu 3.4</a></li>
</ul></li>
<li><a href="#">Menu 4</a></li>
<ul>
</ul>
</ul></div>




catatan:
Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda
misalnya:
http://kalongkalong.blogspot.com
atau
http://artikelkomputerku.blogspot.com/2008/12/tips-untuk-meningkatkan-kecepatan.html
http://artikelkomputerku.blogspot.com/2009/02/tips-dan-trik-windows.html
teks setelah tanda # seperti Home, Menu 1, dst bisa anda ganti dengan teks sesuai dengan keinginan anda.
9. Simpan perubahan yang anda buat, jika tidak ada masalah maka akan tampil menu navigasinya
Contoh lainnya bisa dilihat disini blog dummy (template denim)

Update Januari 2010

Berhubung ada beberapa teman yang menanyakan url target diambil dari mana, untuk sederhanya saat anda membuka sebuah halaman, bisa halaman dalam blog anda maupun blog lain, maka pada saat membuka halaman tersebut akan terlihat url target di address bar browser anda. Setiap halaman mempunyai url yang unik, artinya jika di dalam blog anda ada 100 postingan, maka ada 100 url (yang bisa dijadikan url target di menu).

Contoh url target bisa anda lihat di bawah ini:


Script lengkap menu di atas terlalu panjang jika saya posting disini.
Jika ingin mendownload script lengkap dari ketiga blog di atas, bisa download disini menu horizontal


Beberapa menu dropdown lainnya bisa dilihat disini:
1. Simple dropdown
2. Dropdown 2 level
3. Drop down massive blue





Artikel Terkait :



49 komentar:

thepoal mengatakan...

thx...info'na

~_EvilBou_~ mengatakan...

sep sep hebad beud tips2 na

~_EvilBou_~ mengatakan...

woke woke hebad cuyyyy

~_EvilBou_~ mengatakan...

kk maw tanyak kalo misalnya cabang dua gitu bisa apa gk??

coba liat ni http://hyper-blogger-template.blogspot.com/

itu az bisa cabang 4

Artikel Komputerku mengatakan...

Di blog http://hyper-blogger-template.blogspot.com/ , menggunakan script css + javascript untuk membuat menunya, dari pengalaman terkadang di template blogger tidak bisa berfungsi dengan normal javascriptnya, solusinya: jika menggunakan script (javascript) dari dinamic drive harus punya hosting javascript, nanti di template blogger buat link ke file javascript, tetapi jika menggunakan hosting javascript gratisan harus aktifkan account minimal 1 kali sebulan, jika tidak aktif/login dalam sebulan maka file javascript di hosting gratis akan dihapus, sehingga menu di blogger tidak jalan, Saya hanya buat menu horizontal yang dibuat pakai script css karena script css bisa di sisipkan ke template blogger, jadi tidak perlu upload file javascript ke hosting gratisan. Jika ingin menggunakan menu dari dinamic drive bisa upload dulu file javascript ke ripway atau hotlinkfile.nanti di link ke template blogger. saya secara pribadi lebih senang menggunakan script css karena menurut beberapa sumber di internet, css lebih seo friendly dibanding javascript.

enjoy mengatakan...

tq infonya..berhasil :)

Anonim mengatakan...

memasukan url tujuan berasal dari blog yang sama atau ada halaman baru. maksudnya, url yang berasal dari postingan kita sebelumnya? atau bagaimana

Artikel Komputerku mengatakan...

Bisa dari blog yang sama atau ur dari halaman lain dari blog yang sama atau blog yang lain.

Nur Abdillah Siddiq mengatakan...

gimana caranya agar link kita memilii background jika mouse kita arahkan,,terimakasih banyak sebelumnya..

dante gila mengatakan...

mas kayaknya ada masalah deh sama menu yang bercabang jika kita buka salah satu label pada blog..

coba buka :
http://artikelkomputerku.blogspot.com/search/label/Download%20e-book%20gratis
trus coba menu navi yang ada cabangnya...

mohon pencerahannya..

Artikel Komputerku mengatakan...

Makasih infonya, masalah tersebut muncul karena adanya tumpangtindihnya css script dari menu dan status message label, untuk mengatasinya setelah script menu bercabang
.....
background:black; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}

bisa tambahkan script berikut:

.status-msg-wrap{
display:none;
}

jadi seperti di bawah ini

.....
background:black; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}
.status-msg-wrap{
display:none;
}

dante gila mengatakan...

siip..thengkyu... :p

NADHIROTUL MAWADDAH WARAHMAH mengatakan...

yang ini mbaru agak sulit guh.....

Don Leman mengatakan...

Salam kenal
makasih atas tutornya

RebelzZynX mengatakan...

Mas, koq setelah saya taro urlny pas d buka (di klik) napa halamannya jadi muncul di window baru? bukannya di halaman yang sama??

Sory, masih baru..hehehe..
mohon bantuannya..

Artikel Komputer mengatakan...

@dante gila
Thanks juga
@Don Leman
Salam kenal juga
@RebelzZynX
mungkin di script url ada target="_blank"
Coba dihapus script target="_blank"
Contoh: detailnya bisa dilihat disini
http://artikelkomputerku.blogspot.com/2009/05/membuat-link-untuk-membuka-halaman.html

RebelzZynX mengatakan...

Ada lagi nih mas..maaf ya merepotkan, masih baru soalnya..hehe..
(Mohon blog saya dikunjungi agar kesalahannya bisa dilihat.)

www.feelmind-soul.blogspot.com

coba anda klik menu "Life" harusnya yang keluar padfa halaman "Life" tersebut postingan 'Love your life' and 'menghargai hidup' tapi yang keluar cuma 'menghargai hidup' saja.
Gimana caranya supaya yang saya maksud bisa teratasi y?
Mohon bantuannya. Thanks

Artikel Komputer mengatakan...

Coba buka gadget html/javascript yang berisi script menu horisontal , kemudian cari kode:
href="http://feelmind-soul.blogspot.com/2010/05/menghargai-hidup.html"
ganti dengan
href="http://feelmind-soul.blogspot.com/search/label/Life"

RebelzZynX mengatakan...

Waaaah..keren2..!!!
keren abiz.. thx banget yah.. :D
udah beres nih..d bisa..!!
thx banget..!!! X)
Anda TOP abiz..!! ^o^b

mau tanya nih..kalo daftarin blog ke google kena biaya ga??

Skali lagi, thanks atas bantuan anda.. X)

BONA PASOGIT NAINGGOLAN mengatakan...

Cara merobah menu navigasi (horizontal) bercabang bawaan blogger temlpate designer (Blogger dalam konsep) gimana ya mas?
Thanks Mas atas tips-tips nya, muantab bangat.

Artikel Komputer mengatakan...

@RebelzZynX
Gratis
@BONA PASOGIT NAINGGOLAN
Untuk mengubah menu navigasi di blogger in draft sama saja seperti diatas atau memanfaatkan fitur add css, namun saya sarankan memasang langsung script css ke template. Atau jika igin tampilan yang mirip panduan di atas bisa juga logout dari blogger in draft kemudian login ke blogger kemudin ikuti langkah di atas

animasigretong mengatakan...

seep, Gan. akhir'y ane nemu juga tips yang paten. dr kemaren2 ngubek2 c mbah gak nemu yang bener. jempol gan. terus kalo boleh ane mau tanya. kan tu yg d sampel menu tab'y warna'y ungu. kalo warna pengen ganti gmn gan?? harap maklum newbie blogger gan. thx before.

yang suka pelm2 animasi maen k home ane : http://animasigretong.blogspot.com/

Artikel Komputer mengatakan...

1. Upload gambar ke situs iamge hosting, kemudian ganti http://i36.tinypic.com/28lgntl.jpg dengan url gambar anda
2. Ganti kode warna script css yang ada di belakang background: , kode warna bisa dilihat disini http://artikelkomputerku.blogspot.com/2009/08/tabel-warna-untuk-blog.html

RNBGAME mengatakan...

mas mo nanya,aq coba bikin menu bercabang kok hasilnya ga keluar cabangnya.gmn mas coba di cek di rnbgame216.blogspot.com

Artikel Komputer mengatakan...

Script menu dropdown di atas hanya cocok untuk template lama blogger, terkadang tidak berfungsi di template baru blogger designer, Saya lihat blog anda pakai template blogger designer, menu navigasi dropdown yang cocok bisa dilihat disini :
Cara membuat menu navigasi horisontal dropdown dengan script css (massive blue drop down)

jerino nitro mengatakan...

pak bos, caranya biar tab di jerino.blogspot.com biar panjang sama kayak header nya gmn?

Artikel Komputer mengatakan...

Ditambah saja item menunya supaya penuh. Script lengkapnya bisa dibaca di postingan

Nurul Imam mengatakan...

kebetulan banget saya belum punya navigasi

ABU RIFQI mengatakan...

Thank,s gantipnya okey banget. Tapi stl aku terapkan udah muncul, hanya kenapa munculnya dibelakang posting..? Nggak di depannya kayak yg di DEMO. Mohon pencerahan

Abu Rifqi mengatakan...

SIIIP......... Tipsnya. Sory Gan, aku ganti pakai yg massive blue drop down dah okey. Thank's tuk TIPSnya.

Agan mengatakan...

gw udh ikutin smuanya. tp kok g bsa malah berantakan submenunya... mohon bantuannya!
Dimaseasy.blogspot.com

cayun mengatakan...

Maaf GAn, saya sudah coba tapi gagal terus .
kenapa ya ? tolong beri petunjuknya gan,
terimakasih infonya

Dzul mengatakan...

makasih banyak mas

Artikel Komputer mengatakan...

@Agan, cayun
Mungkin templatenya tidak kompatible dengan script menu di atas
Coba pakai yang massive blue drop down

AFit mengatakan...

Saya praktekkan ah

Afris tkj1 SMKNPUR mengatakan...

infonya sangat brmanfaat gan.....

diki fauzi mengatakan...

terimakasih sebelumnya,, oya saya dah coba bikin menu navigasinya tapi ko backgron nya ke potong ya,, mohon bantuanya,,

Okebung.Blogspot.Com mengatakan...

gan kok tempat saya tampilan cabangnya berada dibelakang ya, jadi gak keliatan ketutup sama widget lainnya.. tidak always ontop atau di depan terus,, tolong pencerahan gan..., trimakasih

Artikel Komputer mengatakan...

Okebung.Blogspot.Com
Setiap template blogger punya script yang berbeda, kemungkinan script menu navigasi tidak cocok dengan script template yang anda gunakan

Prodi D-IV Teknik Mesin Produksi dan Perawatan mengatakan...

Terimakasih banyak atas informasi di Blog Anda ini,,

saya membuat menu horizontal List-o-matic tutorial dari (http://www.isnaini.com/2007/10/20/membuat-list-menu-dengan-list-o-matic),,,

Aku bingung banget,, bagaimana memfungsikan menu horizontal untuk bisa terhubung dengan data yang kuinginkan ::???

Kemudian aku menggunakan "lebel sebagi menu" (http://teamdhani.blogspot.com/2010/11/menggunakan-label-sebagai-menu.html) Tidak Berhasil juga,,,,

Aku baru memulai belajar blog nich, aku mau bertanya nich ?, bisa mintak tolong diajarin step by step bagaimana jalan keluarnya, sehingga setiap aku klik menu,, maka akan keluar posting datanya,,,

Mohon dilihat blog aku: http://d4tmpp.blogspot.com/,,,

Atas jawaban dan masukannya saya ucapkan terima kasih yang sebesar-besarnya,,,

Marzuki,,,,

AnakTimor mengatakan...

Bang saya ada sedikit pertanyaan:
1.Saya mau membuat menu horizontal di blogku,bisa nggak ya?
2.Apa bisa ganti huruf dan warna di blog?
Sekian.Terimakasih atas bantuanya.
Maaf,saya baru belajar.he..he..he...

Tolong di lihat blog saya
http://www.anaktimor-17.blogspot.com

Rudy Hartono mengatakan...

thanks atas infonya yang sangat bermanfaat dan mudah dicerna, salam kenal
http://caramembuatyangakumau.blogspot.com

Myriads mengatakan...

tanxs gan !!! banyakin pahala yeee

Aldena mengatakan...

BOOOSSSS . . . UDAH IKUTIN SARAN PETUNJUK. ITU UKURAN TABNYA TUMPANG TINDIH GAK RAPI, GIMANA? TERUS PAS KRUSOR ARAH KE TAP MENU PAS DIGESER TURUN KE DROPDOWNNYA KOK ILANG BOSSS . . . BINGUNG NIH.??? SEJAUH INI PERCOBAANKU BARU ARTIKEL SI BOSS YG BISA BAGUS. TOLONG DILIHAT DAN GIMANA SOLUSINYA http://baretijo.blogspot.com/
TERIMA KASIIIIIIHHH

Artikel Komputer mengatakan...

@Prodi D-IV Teknik Mesin Produksi dan Perawatan
Sekedar saran saja untuk pengguna blogspot, sebaiknya tidak menggunakan label menjadi link menu, karena kurang seo friendly , silahkan di dilihat info lebih lanjut di situs google webmaster central , untuk label tidak diindex sebagai halaman oleh robot google, sebaiknya link menu langsung ke url postingan / url page statis
@AnakTimor
Ganti huruf dan ganti warna juga bisa , langsung diubah di script css-nya
@Aldena
Untuk script menu navigasi di atas compatible dengan template blogger yang lama, untuk template baru blogger tidak tampil dropdown menunya karena tidak compatible scriptnya,
Coba gunakan menu navigasi yang lain, seperti dropdown massive blue
http://artikelkomputerku.blogspot.com/2010/06/cara-membuat-menu-navigasi-horisontal.html

Muchamad Taufik Hidaya Putra mengatakan...

Maaf, sebelumnya kalau promo blog, saya harap masnya masih update blognuya.... tolong lihat blog saya http://zokufo.blogspot.com/
Terutama bagian Tips n trick sama Download disitu menu bercabang yang ke 2 tidak bisa di klik.....

Artikel Komputer mengatakan...

Saya lihat anda menggunakan template blogger yang baru, script menu navigasi di atas terkadang tidak compatible dengan template baru blogspot
Untuk template yang anda gunakan bisa lihat panduan menu dropdownnya disini
http://artikelkomputerku.blogspot.com/2010/06/cara-membuat-menu-navigasi-horisontal.html

Blognya aruel kelik mengatakan...

MAS BRO....SUDAH KU COBA MEMBUAT TAB MENU YANG BARU KOQ MUNCULNYA GAK DROP DOWN...MALAHAN NUMPUK DI BAWAHNYA....PADAHAL DAH SESUAI LANGKAH2NYA TANPA SAYA EDIT
COBA MAS LIHATI HASILNYA DI BLOG SAYA
www.kelik3341.blogspot.com
MAKASIH

Artikel Komputer mengatakan...

@Blognya aruel kelik
Sepertinya script css menunya tidak compatible dengan script template blog