Silakan ikuti url berikut untuk tutorial versi terbaru :
http://www.indaam.com/2011/06/imenu-dropdown-menu-versi-2-for-wordpress-dan-blogspot/
menu dropdown yang kita buat kali ini mungkin lebih baik dari versi-versi sebelumnya, untuk menu navigation dropdown versi sebelumya silakan klik tag menu-menu atau kategory menu-navigation.
mmm, dan basa-basinyanya kepanjangan kali ya? tulisan kali ini saya akan mencoba membuatnya seperti percakapan, semoga saja lebih mudah untuk dimengerti 
berikut rincian percakapanya, kita asumsikan ada dua blogger yang sedang chat via Gtalk, satu bernama andi sultan dan yang satu bernama rizal coy
andi sultan: sore
rizal coy: sore juga
andi sultan: boleh nanya ngga?
rizal coy: yah, apa?
andi sultan: gini, saya ingin menambahkan menu-menu navigasi scroll di blog saya, caranya gimana ya?
rizal coy: contohnya?
andi sultan : itu loh menu-menu yang bila cursor melintas, maka akan muncul menu-menu lagi.
rizal coy: oh, itu
andi sultan: caranya giman?
rizal coy: versi staticnya dulu ya
andi sultan : ia, caranya?
rizal coy: coba buka program notepad, notepad ++ juga boleh
andi sultan : sudah
rizal coy : coba copy markup serta style berikut
<!DOCTYPE>
<html>
<head>
<title>menu menu drop by indam site</title>
<meta name="author" content="indam" />
<style type="text/css">
#menudrop{
margin:0;
padding:0;
clear:both;
background-color:#151B8D;
}
/*
#menudrop{
width:67%;
}*/
/* #menustyle */
.menustyle{
float:left;
background-color:transparent;
margin:0;
padding:0;
text-transform:capitalize;
text-decoration:none;
font:bold 16px Times New Roman;
}
.menustyle ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
.menustyle li{
float:left;
list-style:none;
margin:0;
padding:0;
min-width:50px;
text-align:center;
}
.menustyle li a,
.menustyle li a:link,
.menustyle li a:visited{
border-left:1px solid #ccc;
color:white;
display:block;
padding:8px 5px;
text-decoration:none;
}
.menustyle li a:hover,
.menustyle li a:active{
text-decoration:none;
background:#555;
color:#f1f1f1}
.menustyle li li a,
.menustyle li li a:link,
.menustyle li li a:visited
{text-align:left;
background:#555;
border-bottom:1px solid #ccc;
width:200px;
color:#ffffff;
padding:10px 5px
}
.menustyle .ketikahoverbuka{
z-index:2;
position:absolute;
left:-10000px;
margin:0;
width:500px;
background:#555
}
.menustyle .kategorinya{
z-index:2;
position:absolute;
left:-10000px;
margin:0;
width:700px;
background:#555
}
.menustyle li li a:hover,
.menustyle li li a:active{
text-decoration:none;
background:white;
color:#555}
.menustyle li a.enclose,
.menustyle li a.enclose:visited{
border-top:1px solid #00FFFF
}
.menustyle li ul{
z-index:2;
position:absolute;
left:-10000px;
width:170px;
margin:0;
padding:0
}
.menustyle li ul a{
width:140px
}
.menustyle li ul ul{
margin:-75px 0 0 171px
}
.menustyle li:hover ul ul,
.menustyle li:hover ul ul ul,
.menustyle li.sfhover ul ul,
.menustyle li.sfhover ul ul ul{
text-decoration:none;
left:-10000px}
.menustyle li:hover ul,
.menustyle li li:hover ul,
.menustyle li li li:hover ul,
.menustyle li.sfhover ul,
.menustyle li li.sfhover ul,
.menustyle li li li.sfhover ul{
left:auto
}
.menustyle li:hover,.menustyle li.sfhover{
position:static}
/* --#menustyle -- */
</style>
</head>
<body>
<div id='menudrop'>
<ul class='menustyle'><li><a href='javascript:void(0)' rel='nofollow' >archive</a><ul class="ketikahoverbuka"> <li><a href='http://www.indaam.com/2010/08/' title='August 2010'>August 2010</a></li>
<li><a href='http://www.indaam.com/2010/07/' title='July 2010'>July 2010</a></li>
<li><a href='http://www.indaam.com/2010/06/' title='June 2010'>June 2010</a></li>
<li><a href='http://www.indaam.com/2010/05/' title='May 2010'>May 2010</a></li>
<li><a href='http://www.indaam.com/2010/04/' title='April 2010'>April 2010</a></li>
</ul></li><li><a href='javascript:void(0)' rel='nofollow' >kategory</a><ul class="kategorinya">
<li class="cat-item cat-item-3"><a href="http://www.indaam.com/category/animation/" title="animasi">animasi</a></li>
<li class="cat-item cat-item-4"><a href="http://www.indaam.com/category/blogspot-tips-and-tutorial/" title="blogspot tips and tutorial">blogspot tips and tutorial</a></li>
<li class="cat-item cat-item-5"><a href="http://www.indaam.com/category/cerita/" title="cerita">cerita</a></li>
<li class="cat-item cat-item-6"><a href="http://www.indaam.com/category/css/" title="css">css</a></li>
<li class="cat-item cat-item-7"><a href="http://www.indaam.com/category/html/" title="html">html</a></li>
<li class="cat-item cat-item-8"><a href="http://www.indaam.com/category/indaam-com/" title="indaam.com/tentang">indaam.com/tentang</a></li>
<li class="cat-item cat-item-42"><a href="http://www.indaam.com/category/indaam-comtentang/" title="indaam.com/tentang">indaam.com/tentang</a></li>
<li class="cat-item cat-item-9"><a href="http://www.indaam.com/category/js-script/" title="javascript">javascript</a></li>
<li class="cat-item cat-item-10"><a href="http://www.indaam.com/category/keamanan/" title="keamanan">keamanan</a></li>
<li class="cat-item cat-item-11"><a href="http://www.indaam.com/category/lainya/" title="lainya">lainya</a></li>
<li class="cat-item cat-item-12"><a href="http://www.indaam.com/category/menu-menu-navigasi/" title="menu navigasi">menu navigasi</a></li>
<li class="cat-item cat-item-43"><a href="http://www.indaam.com/category/menu-navigasi/" title="menu navigasi">menu navigasi</a></li>
<li class="cat-item cat-item-13"><a href="http://www.indaam.com/category/modif-default-themes/" title="modif default themes">modif default themes</a></li>
<li class="cat-item cat-item-14"><a href="http://www.indaam.com/category/plugins/" title="plugins">plugins</a></li>
<li class="cat-item cat-item-15"><a href="http://www.indaam.com/category/seo-tips/" title="seo">seo</a></li>
<li class="cat-item cat-item-16"><a href="http://www.indaam.com/category/source-dan-script-animasi/" title="source dan script animasi">source dan script animasi</a></li>
<li class="cat-item cat-item-17"><a href="http://www.indaam.com/category/teman/" title="teman">teman</a></li>
<li class="cat-item cat-item-18"><a href="http://www.indaam.com/category/theme/" title="theme">theme</a></li>
<li class="cat-item cat-item-19"><a href="http://www.indaam.com/category/for-wordpres-theme/" title="theme-wordress">theme-wordress</a></li>
<li class="cat-item cat-item-20"><a href="http://www.indaam.com/category/widget/" title="widget">widget</a></li>
<li class="cat-item cat-item-21"><a href="http://www.indaam.com/category/script-php-wordpress/" title="wordpress codex">wordpress codex</a></li>
<li class="cat-item cat-item-44"><a href="http://www.indaam.com/category/wordpress-codex/" title="wordpress codex">wordpress codex</a></li>
<li class="cat-item cat-item-22"><a href="http://www.indaam.com/category/wordpress-tips-and-tutorial/" title="wordpress tips and tutorial">wordpress tips and tutorial</a></li>
</ul></li><li><a href='javascript:void(0)' rel='nofollow' >my acount</a>
<ul class="ketikahoverbuka"><li><a href='javascript:void(0)' rel='nofollow' >my blog</a>
<ul><li><a href='http://indaam.com' target='_blank'>indam belajar wordpress</a></li>
<li><a href='http://indam-bontang.blogspot.com/' target='_blank'>indam bontang</a></li>
<li><a href='http://intheamwhy.blogdetik.com/' target='_blank'>indam blog detik</a></li>
<li><a href='http://intheamwhy.blogspot.com' title='damai itu indah' target='_blank'>damai itu indah </a></li>
</ul></li>
<li><a href='http://facebook.com/indaam' target='_blank'> my facebook </a></li>
<li><a href='http://profiles.frienster.com/indam' target='_blank'>my friendster</a></li>
<li><a href='http://twitter.com/intheamwhy' target='_blank'>my twitter</a></li>
<li><a href='http://www.myspace.com/intheamwhy' target='_blank'>my space</a></li>
</ul></li><li><a href='javascript:void(0)' rel='nofollow' >thanks to</a>
<ul class="ketikahoverbuka"><li><a href='http://salsabeela.com' title='salsabeela' target='_blank'>salsabeela</a></li>
<li><a href='http://twitter.com/salsabeela' title='salsabeela on twitter' target='_blank'>salsabeela on twitter</a></li>
<li><a href='http://facebook.com/salsabeela' title='salsabeela on facebook' target='_blank'>salsabeela on facebook</a></li>
<li><a href='http://kutukutubuku.com' title='kutukutubuku.com' target='_blank'>online book store</a></li>
<li><a href='http://tukusolution.com' title='web consultant' target='_blank'>web consultant</a></li>
<li><a href='http://langsingmulus.com' title='weight loss product retail' target='_blank'>langsingmulus.com</a></li>
<li><a href='http://heartyboutique.com' title='boutique online' target='_blank'>boutique online</a></li>
<li><a href='http://salsabeela.onsugar.com' title='hijab fashion blog' target='_blank'>hijab fashion blog</a></li>
<li><a href='http://unwinged.salsabeela.com' title='marriage life blog' target='_blank'>marriage life blog</a></li>
<li><a href='http://jakartadailyphoto.com' title='jakarta daily photo' target='_blank'>jakarta daily photo</a></li>
</ul></li>
<li><a href="#lainya">lainya</a></li>
<li><a href="#lainyalagi">lainya lagi</a></li>
</ul>
<div style="clear:both"></div>
</div>
</body>
</html>
andi sultan : sudah
rizal coy: paste ke notepad lalu save as dengan nama test-menu.htm dan pada save as type pilih all files
andi sultan sudah
rizal coy: coba jalankan test-menu.htm (double klick)
andi sultan: suda
rizal coy: seperti itu kah?
andi sultan: ya, cara membuatnya di wordpress gimana?
rizal coy: sudah install localhost dan wordpress offline?
andi sultan : sudah
rizal coy: ok, kalau gitu kita coba di localhot dulu ya
andi sultan: caranya?
rizal coy: active-kan localhost dan wp offline
andi sultan: trus?
rizal coy: masuk ke …/wp-content/themes/
andi sultan: lalu
rizal coy: kita coba di Twentyten dulu ya
andi sultan : ok
rizal coy: buka folder twentyten di …/wp-content/themes/…
andi sultan: sudah
rizal coy: buat file baru dengan nama menu-menudrop.php, di didalam folder twentyten dan ingat ekstensi filenya adalah [dot]php
andi sultan : sudah, trus?
rizal coy: edit menu-menudrop.php, kemudian isi dengan script berikut
<div id="menudrop">
<ul class='menustyle'>
<!--// you can edit this code-->
<!-- archive -->
<li><a href='javascript:void(0)' rel='nofollow' >archive</a>
<ul class="ketikahoverbuka"><?php wp_get_archives('type=monthly'); ?></ul>
</li>
<!--// end archives-->
<!--// kategorinya-->
<li><a href='javascript:void(0)' rel='nofollow' >kategori</a>
<ul class="kategorinya"><?php list_cats(1, '', 'name', 'asc', '', 1, 0, 0, 0, 0, 0, 0,'','','','','') ?></ul>
</li>
<!--// end kategorinya-->
<!--// feeds-->
<li><a href="<?php bloginfo('rss2_url'); ?>">feed</a></li>
<!--// end feeds -->
<!--// feds kommnet-->
<li><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments feed</a></li>
<!--// end feed commnet-->
<!--// author-->
<li><a href='javascript:void(0)' rel='nofollow' >author</a>
<ul class="ketikahoverbuka">
<?php wp_list_authors('show_fullname=1&optioncount=0'); ?>
</ul>
</li>
<!--// end author-->
<!--// other site-->
<?php /* comment otther site
you can delete this comment and activate nav menu other site
<li><a href='javascript:void(0)' rel='nofollow' >other site</a>
<ul class="ketikahoverbuka">
<li><a href='http://google.com' title='google' target='_blank'>google</a></li>
<li><a href='http://wikipedia.org' title='wikipedia' target='_blank'>wikipedia</a></li>
<li><a href='http://yahoo.com' title='yahoo' target='_blank'>yahoo</a></li>
<li><a href='http://facebook.com' title='facebook' target='_blank'>facebook</a></li>
<li><a href='http://twitter.com' title='twitter' target='_blank'>twitter</a></li>
<li><a href='http://w3.org' title='w3c' target='_blank'>w3c</a></li>
<li><a href='http://blogger.com' title='blogger' target='_blank'>blogger</a></li>
<li><a href='#' title='judul' target='_blank'>mail</a>
<ul>
<li><a href='http://gmail.com' title='google mail' target='_blank'>google mail</a></li>
<li><a href='http://mail.yahoo.com' title='yahoo mail' target='_blank'>yahoo mail</a></li>
<li><a href='http://hotmail.com' title='hotmail' target='_blank'>hotmail</a></li>
</ul>
</li>
<li><a href='http://youtube.com' title='judul' target='_blank'>youtube</a></li>
<li><a href='http://www.indaam.com' title='indam site' target='_blank'>indam site</a></li>
<li><a href='http://salsabeela.com' title='ollie blogs' target='_blank'>ollie blog</a></li>
<li><a href='http://wordpress.com' title='indam site' target='_blank'>wordpress com</a></li>
</ul>
</li> End comment other site*/?>
<!--// end other site-->
<!--// blogroll-->
<li><a href='javascript:void(0)' rel='nofollow' >Blogroll</a>
<ul class="ketikahoverbuka">
<?php wp_list_bookmarks('title_li=&categorize=0'); ?>
</ul>
</li>
<!--// end blogroll
regards www.indaam.com
-->
</ul><div style="clear:both"></div>
</div>
andi sultan: sudah
rizal coy: save
andi sultan: sudah juga
rizal coy : edit style.css lalu tambahan style berikut
#menudrop{
margin:0;
padding:0;
clear:both;
background-color:#151B8D;
}
/*
#menudrop{
width:67%;
}*/
/* #menustyle */
.menustyle{
float:left;
background-color:transparent;
margin:0;
padding:0;
text-transform:capitalize;
text-decoration:none;
font:bold 16px Times New Roman;
}
.menustyle ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
.menustyle li{
float:left;
list-style:none;
margin:0;
padding:0;
min-width:50px;
text-align:center;
}
.menustyle li a,
.menustyle li a:link,
.menustyle li a:visited{
border-left:1px solid #ccc;
color:white;
display:block;
padding:8px 5px;
text-decoration:none;
}
.menustyle li a:hover,
.menustyle li a:active{
text-decoration:none;
background:#555;
color:#f1f1f1}
.menustyle li li a,
.menustyle li li a:link,
.menustyle li li a:visited
{text-align:left;
background:#555;
border-bottom:1px solid #ccc;
width:200px;
color:#ffffff;
padding:10px 5px
}
.menustyle .ketikahoverbuka{
z-index:2;
position:absolute;
left:-10000px;
margin:0;
width:500px;
background:#555
}
/*
.menustyle .categories{
float:left;
margin:0;
padding:0;
}
.menustyle .ifmouseover li{
float:left;
margin:0;
padding:0
}*/
.menustyle .kategorinya{
z-index:2;
position:absolute;
left:-10000px;
margin:0;
width:700px;
background:#555
}
.menustyle li li a:hover,
.menustyle li li a:active{
text-decoration:none;
background:white;
color:#555}
.menustyle li a.enclose,
.menustyle li a.enclose:visited{
border-top:1px solid #00FFFF
}
.menustyle li ul{
z-index:2;
position:absolute;
left:-10000px;
width:170px;
margin:0;
padding:0
}
.menustyle li ul a{
width:140px
}
.menustyle li ul ul{
margin:-75px 0 0 171px
}
.menustyle li:hover ul ul,
.menustyle li:hover ul ul ul,
.menustyle li.sfhover ul ul,
.menustyle li.sfhover ul ul ul{
text-decoration:none;
left:-10000px}
.menustyle li:hover ul,
.menustyle li li:hover ul,
.menustyle li li li:hover ul,
.menustyle li.sfhover ul,
.menustyle li li.sfhover ul,
.menustyle li li li.sfhover ul{
left:auto
}
.menustyle li:hover,.menustyle li.sfhover{
position:static}
/* --#menustyle -- */
andi sultan: sudah
rizal coy: jangan lupa save, setelah di save edit lagi header.php lalu hapus <div id=”main”> yang ada di line 78, kemudian ganti dengan script ini
<?php include (TEMPLATEPATH.'/menu-menudrop.php') ?><div id="main">
rizal coy: save, sekarang coba activate themes Twentyten
andi sultan: thanks ya
andi sultan: cara menambahkan dithemes lain gimana?
rizal coy: pada intinya ikuti langkah-langkah diatas lalu sesuaikan penempatan script ini
<?php include (TEMPLATEPATH.'/menu-menudrop.php') ?>
contoh, coba pindakan script ini
<?php include (TEMPLATEPATH.'/menu-menudrop.php') ?>
dibawah
<div id="site-description"><?php bloginfo( 'description' ); ?></div>
disini, line 60
andi sultan: kalau mau ubah tampilan menu, misal warna, latar belakang dan family font giman?
rizal coy: edit css yang ditambahkan pada style.css tadi
andi sultan: thanks banget ya
rizal coy: sama-sama, senang bisa membantu
andi sultan: kapan-kapan bisa sharing lagi nggak?
rizal coy: tentu
***
hahaha… semoga lebih mudah untuk dimengerti.
Terima kasih gan uda dijawab pertanyaanku yg lwat fb.
“active-kan localhost ” -> kalimat yang salah.
sandro,
iya gan, terima kasih kembali.
ganda,
itulah saya, selalu penuh dengan kesalahan.
Ha? lalu?
Tidak ada yang salah dude, just not good enough.
Jika ini adalah tutorial saya pikir terlalu bloated. Bukankah sebenarnya kode yang disajikan bisa diminimalkan? Ups, maaf saya mengkritisi gaya menulismu, saya tahu saya tidak berhak mengatur-ngatur seorang blogger & blognya. Yeah, yang saya tahu adalah, kamu dapat melakukan yang lebih baik bro.
Ardianzzz,
saya adalah orang yang banyak melakukan kesalahan. saya hanya berusaha agar ilmu saya bermanfaat untuk orang lain.
kadang saya berpikir apa gunanya ilmu, jika ilmu itu hanya untuk diri kita sendiri?
iya, sebenarnya si bisa di kuruskan tapi saya bingung jika nantinya ngga di mengerti, sebenernya memperlihatkan source kodenya saja sudah cukup. tapi, yaitu tadi ‘apakah bisa dipahami.
hohoho, kritik ya, sebenarnya saya senang, karena itu dapat membuat saya berkembang. thanks bro, saya akan berusaha memperbaiki gaya penulisan saya
No! Justru yang dikuruskan terutama adalah source code-nya. Kalau memang sourcenya banyak dan penting mendingan dibikin file yang bisa didownload.
Sederhana saja, saya rasa pengunjung tidak punya cukup waktu untuk menyimak kode di atas satu per satu, baris per baris — lagipula perintahnya untuk menyalin tempelnya saja. Akibatnya halaman posting menjadi tidak enak dipindai, istilahnya noisy.
Ardianzz,
hehehe, source(terutama cssnya) itu sudah paling kurus, menudrop ini sudah saya gunakan sejak di blogspot. saya suka dgn menudropdown ini karena ngga pakai javascript(lebih ringan) dan kita bisa membuat banyak sub-submenu dan subsubmenu-lagi.
saya juga berpikir seperti itu, membuat file download, hanya saja keadaan sekarang ngga memungkinkan. sebenarnya agar terlihat lebih rapi bisa pakai tag textarea untuk isi sourcenya, hanya saja di wp itu lebih rumit jika pakai tag textarea.
kalo untuk blog blogspot gimana gan? sama kah?
Indam,
Mana ada manusia yang selalu benar? Karena itulah kita akan selalu belajar hingga akhir hayat?
ya, sampai kapanpun itu ‘nggak akan pernah ada manusia yang selalu benrar’. setuju bgt, belajar sampai akhir hayat.
sgt senang bs menemukan web ini. byk p?an yg tertunda seputar dunia pemograman web, tp sy bingung mau nanya sm siapa. cari di buku tdk memuaskan..
sy may tax, tag meta fungsinya utk apa yach..??
bisa tidak ada penjelasan dari script yg sdh diberikan..?? kl kepanjangan dibuat di file word atau pdf aja..!! maaf sdh merepotkan..
Steven,
saya sudah pernah menambahkan keterangan di setiap script yg saya tulis, berhubung waktu yg kurang, yaudah seadanya saja. coba klik artikel brhubungan ‘tulisan ini’.
Untuk meta tag coba baca ini http://www.indaam.com/2010/04/tag-meta-yang-saya-tambahkan-di-indaam-com/