Cara Membuat Horizontal Menu Dropdown

Lagi-lagi tulisan lama saya angkat kedalam blog saya, sebenarnya saya agak malas menulis postingan ini, karena cukup panjang kode HTML-nya,  tapi berhubung ada beberapa pertanyaan dari sobat blogger di kolom shoutbox, yang menanyakan tentang cara membuat menu horizontal seperti yang ada di blog saya, makanya sekalian saja saya tuliskan tentang horizontal menu dropdown buat sobat blogger.

Menu ini cukup panjang dan berhubungan dengan template, jadi saya sarankan untuk membackup template sobat terlebih dahulu sebelum mencoba tutorial ini. Sepertinya saya terlalu panjang lebar ya, baiklah langsung saja kita menuju TKP.

1. Login ke Blogger.
2. Klik Tata Letak.
3. Klik Edit HTML.
4. Backup template sobat terlebih dahulu, silahkan klik Download Template Lengkap.
5. Contreng Expand Widget Template.
6. Cari kode </b:skin> dan letakkan kode berikut sebelum kode </b:skin>
   
   
   .jqueryslidemenu{
   font: bold 12px Trebuchet MS; background: #414141; width: 100%;}
   
   .jqueryslidemenu ul{
   margin: 0; padding: 0; list-style-type: none;}
   
   /*Top level list items*/
   .jqueryslidemenu ul li{
   position: relative; display: inline; float: left;}
   
   /*Top level menu link items style*/
   .jqueryslidemenu ul li a{
   display: block;
   background: #414141; /*background of tabs (default state)*/
   color: white;
   padding: 8px 10px;
   border-right: 1px solid #778;
   color: #2d2b2b;
   text-decoration: none;}
   
   * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
   display: inline-block;}
   
   .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
   color: white;}
   
   .jqueryslidemenu ul li a:hover{
   background: black; /*tab link background during hover state*/
   color: white;}
   
   /*1st sub level menu*/
   .jqueryslidemenu ul li ul{
   position: absolute;
   left: 0; display: block; visibility: hidden;}
   
   /*Sub level menu list items (undo style from Top level List Items)*/
   .jqueryslidemenu ul li ul li{
   display: list-item; float: none;}
   
   /*All subsequent sub menu levels vertical offset after 1st level sub menu */
   .jqueryslidemenu ul li ul li ul{top: 0;}
   
   /* Sub level menu links style */
   .jqueryslidemenu 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;}
   
   .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
   background: #eff9ff;color: black;}
   
   /* CSS classes applied to down and right arrow images */
   
   .downarrowclass{
   position: absolute; top: 12px; right: 7px;}
   
   .rightarrowclass{
   position: absolute; top: 6px; right: 5px;}
   
7. Kemudian letakkan kode berikut sebelum kode </head>
   
   

   <!--[if lte IE 7]>
   <style type="text/css">
   html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
   </style>
   <![endif]-->

   <script src='http://miscah.googlecode.com/files/jquery.min.js' type='text/javascript'/>
   <script src='http://miscah.googlecode.com/files/slidemenu_horizontal.js' type='text/javascript'/>

8. Cari kode yang mirip seperti ini
   
   

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

   
   kenapa saya bilang cari yang mirip, karena setiap template mempunyai karakter yang berbeda-beda dan tulisan yang saya tandai dengan warna merah adalah judul blog sobat.
   
9. Kemudian letakkan kode berikut tepat setelah kode diatas
   
   
   <div class='jqueryslidemenu' id='myslidemenu'>
   <ul>
   <li><a href='/'>Home</a></li>
   <li><a href='#'>Daftar Isi</a></li>
   <li><a href='#'>Tutorial Blog</a>
   <ul>
   <li><a href='#'>Sub Item 1.1</a></li>
   <li><a href='#'>Sub Item 1.2</a></li>
   <li><a href='#'>Sub Item 1.3</a></li>
   </ul>
   </li>
   <li><a href='#'>Islam</a></li>
   <li><a href='#'>Folder 2</a>
   <ul>
   <li><a href='#'>Sub Item 2.1</a></li>
   <li><a href='#'>Folder 2.1</a>
   <ul>
   <li><a href='#'>Sub Item 2.1.1</a></li>
   <li><a href='#'>Sub Item 2.1.2</a></li>
   <li><a href='#'>Folder 3.1.1</a>
   <ul>
   <li><a href='#'>Sub Item 3.1.1.1</a></li>
   <li><a href='#'>Sub Item 3.1.1.2</a></li>
   <li><a href='#'>Sub Item 3.1.1.3</a></li>
   <li><a href='#'>Sub Item 3.1.1.4</a></li>
   </ul>
   </li>
   <li><a href='#'>Sub Item 2.1.4</a></li>
   </ul>
   </li>
   </ul>
   </li>
   <li><a href='http://miscah.blogspot.com'>Link Exchange</a></li>
   </ul>
   <br style='clear: left'/>
   </div>
   
10. Setelah itu Simpan Template sobat.

Kira-kira seperti itu kodenya, untuk yang saya tandai dengan tanda '#' sobat ganti sendiri dengan url yang sobat inginkan. Oke sob, selamat mencoba ya !

Oleh : Dody FariaL Pada hari Sabtu, Agustus 08, 2009

Tweet

Berlangganan artikel terbaru via Email

Artikel Lainnya :