Cara Membuat Multi Menu Drop Down

1. Login ke Blog kamu.
2. Pilih Menu Edit HTML, cari kode ]]></b:skin>
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode Di tahap 2.


.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}
.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}



4. Selanjutnya cari kode </head>,setelah ketemu letakan script di bawah ini tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://btemplatescripts.googlecode.com/files/ddsmoothmenu.txt' type='text/javascript'/>



5. Selanjutnya cari kode yang mirip dengan kode di bawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog (Header)' type='Header'/>
</b:section>
</div>


 
  Punya saya seperti ini : (Template Bawaan Blogger)
<!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
      </div>


 
   Kode di atas merupakan kode bagian Header dan untuk yang berwarna merah biasanya itu adalah judul header blog anda, jadi cari saja kode yang mirip kayak di atas. Dan setelah ketemu letakan kode di bawah ini tepat di bawah kode bagian akhir kode header di atas (letakan tepat di bawah kode yang berwarna biru).

<div class='ddsmoothmenu' id='smoothmenu1'>
<ul>
<li><a href='http://pehbate.blogspot.com/'>Home</a></li>
<li><a href='#'>Download</a>
<ul>
<li><a href='http://pehbate.blogspot.com/p/software.html'>Software</a></li>
<li><a href='#'>Modul Kuliah</a>
<ul>
<li><a href='http://pehbate.blogspot.com/p/modul-manajemen-informatika.html'>Manajemen Informatika</a></li>
<li><a href='#'>Akan Hadir</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='http://pehbate.blogspot.com/p/tutorial-jaringan.html'>Jaringan</a></li>
<li><a href='#'>Komputer</a>
<ul>
<li><a href='#'>Sistem Operasi</a>
<ul>
<li><a href='http://pehbate.blogspot.com/p/tutorial-windows.html'>Windows</a></li>
<li><a href='http://pehbate.blogspot.com/p/tutorial-kali-linux.html'>Kali Linux</a></li>
</ul>
</li>
<li><a href='#'>Hardware</a></li>
</ul>
</li>
<li><a href='http://pehbate.blogspot.com/p/tutorial-blog.html'>Blogspot</a></li>
<li><a href='#'>Pemograman</a>
<ul>
<li><a href='http://pehbate.blogspot.com/p/tutorial-visual-basic.html'>Visual Basic</a></li>
<li><a href='http://pehbate.blogspot.com/p/tutorial-mysql.html'>Mysql</a></li>
<li><a href='http://pehbate.blogspot.com/p/tutorial-turbo-pascal.html'>Turbo Pascal</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Tips Dan Triks</a>
<ul>
<li><a href='#'>Laptop</a>
<ul>
<li><a href='http://pehbate.blogspot.com/p/lenovo.html'>Masalah Lenovo</a></li>
</ul>
</li>
<li><a href='http://pehbate.blogspot.com/p/printer.html'>Printer</a></li>
<li><a href='http://pehbate.blogspot.com/p/trik-lainnya.html'>Trik Lainnya</a></li>
</ul>
</li>
<li><a href='#'>Pengetahuan</a>
<ul>
<li><a href='#'>Bahan Kuliah</a>
<ul>
<li><a href='http://pehbate.blogspot.com/p/manajemen-informatika.html'>Manajemen Informatika</a></li>
</ul>
</li>
<li><a href='#'>Tahukah Anda</a></li>
</ul>
</li>
<li><a href='#'>Akan Hadir</a></li>
</ul>
<div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
  <form action='http://pehbate.blogspot.com/search/label/' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://pehbate.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdVifs96UN1-1spm9Yw-6VaqZBzMg4SnTxMTGpSV8de3_b36ol5Iu4ArhECRzPDppRsO023f65JyA_pvdLiK8janwWQRqCw2CLYhf9SCkQuBppwnBLlO3qFkLjsj-ojgzXl-8m2Gl6-hY/s1600/field-bg.gif) no-repeat;' type='text' value='Search'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTL5y0SLx9CI21O7HmJNdGqeO6WSN0dr7md4P9r_P7zCIrDwOkHViIUVBqH-QNV2f9IS2z5ZmdyNXF_wEtsqVObUfWwwtTQYBNl7qZ1tPiOwvr-Oh9eOMYxxiICWaL2e7A-mdOowi-Dc4/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br style='clear: left'/></div><div style='clear:both;'/>
 


maaf gan gak sempat edit,,
ane Buru-buru ni mau ke kampus,,
Silahkan di edit link-Link Blog saya dengan link-link blog agan..
Ok. Selamat Mencoba ya gan..
Labels:

Post a Comment

[blogger]

Author Name

Contact Form

Name

Email *

Message *

Powered by Blogger.