CARA MEMBUAT MENU HORIZONTAL DROP-DOWN (MHD2) DI BLOGGER....

Demo

....Posting ini atas permintaan dari sobat Sigit Super... "  oia gimana caranya buat biar menu di navbar bisa ada dua atau tiga menu.maksudnya dropdown menu plis ya bung ?" ...Widget MHD2 ini termasuk salah satu  yang cukup rumit untuk dibahas...Btw setelah beberapa kali saya mencoba membuat sendiri MHD2 ini... sampai merumuskan kode script yang kurang lebih  hampir  sempurnalah (..menurut saya sih..).. karena telah banyak kode yang saya utak-atik di script MHD2 ini agar sesuai dengan keinginan  imajinasi saya....dengan tampilan MHD2 yang Minimalis tapi Modern dan Cool...dan postingan inilah yang akan memuat hasil akhir dari Script MHD2 ala Andi Wong... Ecaknyo... Hehe.. :D  ( Narsis.com...  )

Jadi... Baca & Pahami langkah-langkah cara pembuatan MHD2-nya berikut ini :

1. Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang saja expand template widget )...

2. Dan seperti biasa Copy-Paste dahulu seluruh kode HTML template widget blog kamu ke dalam Notepad dan simpan... untuk jaga-jaga..kan tinggal copy-paste saja lagi agar template blognya kembali seperti semula..

3. LANGKAH PERTAMA .... Cari (CTRL+F) kode "  ]]></b:skin> " lalu Copy script dibawah ini dan Paste-kan diatasnya :

 //*  MHD2  */<br /> <br /> <br />           #bg_nav {<br /> <br />               background: #FCF526;   /* kuning_warna background dasar  */<br /> <br />               width: 750px;          /* Panjang dari kotak menu dasar */<br /> <br />               height: 30px;<br /> <br />               font-size: 11px;<br /> <br />               font-family: Arial, Tahoma, Verdana;<br /> <br />               color: #000000;<br /> <br />               font-weight: none;<br /> <br />               margin: 0px auto 0px;<br /> <br />               padding: 0px;<br /> <br />               overflow: hidden;<br /> <br />               -moz-border-radius:7px;<br /> <br />               }<br /> <br />         <br /> <br /> #bg_nav a, #bg_nav a:visited { /* bagian script yang ini dibiarkan saja ya */<br /> <br />               color: #F59F53;<br /> <br />               font-size: 11px;<br /> <br />               text-decoration: none;<br /> <br />               text-transform: uppercase;<br /> <br />               padding: 0px 0px 0px 3px;<br /> <br />               }<br /> <br />           #bg_nav a:hover { /* bagian script yang ini dibiarkan saja ya */<br /> <br />               color: #FCF888;<br /> <br />               text-decoration: underline;<br /> <br />               padding: 0px 0px 0px 3px;<br /> <br />               }<br /> <br /> <br />           #navleft {<br /> <br />               width: 800px;<br /> <br />               color: #FFFFFF;<br /> <br />               float: left;<br /> <br />               margin: 0px;<br /> <br />               padding: 0px;<br /> <br />               }<br /> <br />         <br /> <br />           #nav {<br /> <br />               margin: 0px;<br /> <br />               padding: 0px;<br /> <br />               list-style: none;<br /> <br />               }<br /> <br />           #nav ul {<br /> <br />               margin: 0px;<br /> <br />               padding: 0px;<br /> <br />               list-style: none;<br /> <br />               }<br /> <br /> <br />           #nav a, #nav a:visited {  /* Menu Utama */<br /> <br />               background: #FCF526;  /*Kuning_warna latar menu utama  */<br /> <br />               color: #FC7200;           /*Orange_warna teks menu utama */<br /> <br />               text-shadow: 4px 4px 4px #aaa;    /* Memberi efek bayangan di teks */<br /> <br />               display: block;<br /> <br />               font-weight: bold;<br /> <br />               margin: 0px;<br /> <br />               -moz-border-radius:7px;<br /> <br />               padding: 8px 15px 8px 15px;<br /> <br />             <br /> <br />               }<br /> <br />           #nav a:hover {<br /> <br />               background: #F7F68F; /*Kuning cerah_warna hover di Menu Utama*/<br /> <br />               color: #3854F2;    /* Biru_warna teks di menu drop-down n teks hover MU*/<br /> <br />               margin: 0px;<br /> <br />               padding: 8px 15px 8px 15px;<br /> <br />               text-decoration: none;<br /> <br />               -moz-border-radius:7px;<br /> <br />               }<br /> <br /> <br />           #nav li {<br /> <br />               float: left;<br /> <br />               margin: 0px;<br /> <br />               padding: 0px;<br /> <br />               }<br /> <br />           #nav li li {<br /> <br />               float: left;<br /> <br />               margin: 0px;<br /> <br />               padding: 0px;<br /> <br />               width: 300px;<br /> <br />               }<br /> <br />           #nav li li a, #nav li li a:link, #nav li li a:visited {<br /> <br />               background: #F7F68F;  /*kuning cerah_warna latar menu drop-down*/<br /> <br />               width: 200px;<br /> <br />               float: none;<br /> <br />               margin: 0px;<br /> <br />               padding: 7px 30px 7px 10px;000000;<br /> <br />               }<br /> <br />           #nav li li a:hover, #nav li li a:active {<br /> <br />               background: #F8FABB; /*kuning cerah2_warna hover menu drop-down*/<br /> <br />               padding: 7px 30px 7px 10px;<br /> <br /> <br />               }<br /> <br />         <br /> <br />           #nav li ul {<br /> <br />               position: absolute;<br /> <br />               width: 10em;<br /> <br />               left: -999em;<br /> <br />               }<br /> <br /> <br />           #nav li:hover ul {<br /> <br />               left: auto;<br /> <br />               display: block;<br /> <br />               }<br /> <br />           #nav li:hover ul, #nav li.sfhover ul {<br /> <br />               left: auto;<br /> <br />               }<br /> <br />     #nav li ul a {<br /> <br /> <br />         width: 100px;<br /> <br /> <br />         }<br /> <br /> <br />         #nav li ul ul {<br /> <br /> <br />         position: absolute;<br /> <br /> <br />         margin: -30% 0 0 95%;<br /> <br /> <br />         }<br /> <br /> <br />         #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {<br /> <br /> <br />         left:-999em;<br /> <br /> <br />         }<br /> <br /> <br />         #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {<br /> <br /> <br />         left:auto;<br /> <br /> <br />         }<br /> <br /> <br />         #nav li li li.sfhover ul {<br /> <br /> <br />         left:auto;<br /> <br /> <br />         }<br /> <br /> <br />         #nav li:hover, #nav li.sfhover {<br /> <br /> <br />         position:static;<br /> <br /> <br />         }

Contohnya seperti dibawah ini.......

 /*  MHD2  */


          #bg_nav {

              background: #FCF526;   /* kuning_warna background dasar  */

              width: 750px;          /* Panjang dari kotak menu dasar */

              height: 30px;

              font-size: 11px;

              font-family: Arial, Tahoma, Verdana;

              color: #000000;

              font-weight: none;

              margin: 0px auto 0px;

              padding: 0px;

              overflow: hidden;

              -moz-border-radius:7px;

              }

       

#bg_nav a, #bg_nav a:visited { /* bagian script yang ini dibiarkan saja ya */

              color: #F59F53;

              font-size: 11px;

              text-decoration: none;

              text-transform: uppercase;

              padding: 0px 0px 0px 3px;

              }

          #bg_nav a:hover { /* bagian script yang ini dibiarkan saja ya */

              color: #FCF888;

              text-decoration: underline;

              padding: 0px 0px 0px 3px;

              }


          #navleft {

              width: 800px;

              color: #FFFFFF;

              float: left;

              margin: 0px;

              padding: 0px;

              }

       

          #nav {

              margin: 0px;

              padding: 0px;

              list-style: none;

              }

          #nav ul {

              margin: 0px;

              padding: 0px;

              list-style: none;

              }


          #nav a, #nav a:visited {  /* Menu Utama */

              background: #FCF526;  /*Kuning_warna latar menu utama  */

              color: #FC7200;           /*Orange_warna teks menu utama */

              text-shadow: 4px 4px 4px #aaa;    /* Memberi efek bayangan di teks */

              display: block;

              font-weight: bold;

              margin: 0px;

              -moz-border-radius:7px;

              padding: 8px 15px 8px 15px;

           

              }

          #nav a:hover {

              background: #F7F68F; /*Kuning cerah_warna hover di Menu Utama*/

              color: #3854F2;    /* Biru_warna teks di menu drop-down n teks hover MU*/

              margin: 0px;

              padding: 8px 15px 8px 15px;

              text-decoration: none;

              -moz-border-radius:7px;

              }


          #nav li {

              float: left;

              margin: 0px;

              padding: 0px;

              }

          #nav li li {

              float: left;

              margin: 0px;

              padding: 0px;

              width: 300px;

              }

          #nav li li a, #nav li li a:link, #nav li li a:visited {

              background: #F7F68F;  /*kuning cerah_warna latar menu drop-down*/

              width: 200px;

              float: none;

              margin: 0px;

              padding: 7px 30px 7px 10px;000000;

              }

          #nav li li a:hover, #nav li li a:active {

              background: #F8FABB; /*kuning cerah2_warna hover menu drop-down*/

              padding: 7px 30px 7px 10px;


              }

       

          #nav li ul {

              position: absolute;

              width: 10em;

              left: -999em;

              }


          #nav li:hover ul {

              left: auto;

              display: block;

              }

          #nav li:hover ul, #nav li.sfhover ul {

              left: auto;

              }

    #nav li ul a {


        width: 100px;


        }


        #nav li ul ul {


        position: absolute;


        margin: -30% 0 0 95%;


        }


        #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {


        left:-999em;


        }


        #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {


        left:auto;


        }


        #nav li li li.sfhover ul {


        left:auto;


        }


        #nav li:hover, #nav li.sfhover {


        position:static;


        }


]]></b:skin>

PAHAMI & PERHATIKAN SCRIPT INTI MHD2 DIATAS :

>> Untuk script diatas ini kalau tidak begitu memahami jangan terlalu banyak diubah2 ya.. biarkan saja seperti MHD2 punya saya diatas...jadi copas saja...takutnya nanti error loh..

> Hitam = Yang ada di bagian bg_nav dan navleft... ini untuk mengatur panjang  menu horizontal..harus sinkronisasi ya...silahkan diatur sesuaikan dengan blognya...
> Hijau = Warna Latar menu.... bisa diubah & disesuaikan dengan keinginan...
> Pink = Warna hover menu ketika menu di mouseover... bisa diubah & disesuaikan dengan keinginan...
> Orange = Warna  teks menu utama... bisa diubah & disesuaikan dengan keinginan...
> Biru = Warna hover ketika teks di mouseover.... bisa diubah & disesuaikan dengan keinginan...

4. LANGKAH KEDUA.... Cari (CTRL+F) kode "  <div id='header-wrapper'> " lalu Copy script dibawah ini setelah kode "   </div>  " :

<div id='bg_nav'><br /> <br />           <div id='navleft'><br />                <div id='nav'><br /> <br />    <ul><br /> <br />         <li><a href='http://ecaknyo.blogspot.com/'> home</a></li><br /> <br />         <li><a href='####' target='_blank'> Blogging</a><br /> <br />         <ul><br /> <br />         <li><a href='http://www.blogger.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Login ke blogger</a></li><br /> <br />         <li><a href='http://www.blogger.com/profile/07038241031299325975' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> profil</a></li><br /> <br />         </ul></li><br /> <br />         <li><a href='URL tujuan utk menu 1' target='_blank'> MENU 1</a><br /> <br />         <ul><br /> <br />         <li><a href='URL tujuan utk menu 1.1' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 1.1</a></li><br /> <br />         <li><a href='URL tujuan utk menu 1.2' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 1.2</a></li><br /> <br />         <li><a href='URL tujuan utk menu 1.3' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 1.3</a></li><br /> <br />        </ul></li><br /> <br />         <li><a href='URL tujuan utk menu 2'> MENU 2</a><br /> <br />         <ul><br /> <br />         <li><a href='URL tujuan utk menu 2.1' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 2.1</a></li><br /> <br />         <li><a href='URL tujuan utk menu 2.2' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 2.2</a></li><br /> <br />         <li><a href='URL tujuan utk menu 2.3' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 2.3</a></li><br /> <br />         </ul></li><br /> <br />         <li><a href='URL tujuan utk menu 3' target='_blank'> MENU 3</a><br /> <br />         <ul><br /> <br />         <li><a href='URL tujuan utk menu 3.1' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 3.1</a></li><br /> <br />         <li><a href='URL tujuan utk menu 3.2' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 3.2</a></li><br /> <br />         <li><a href='URL tujuan utk menu 3.3' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 3.3</a></li><br /> <br />        </ul></li><br />             <br />         <li><a href='URL tujuan utk menu 4' target='_blank'> MENU 4</a><br /> <br />         <ul><br /> <br />         <li><a href='URL tujuan utk menu 4.1' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Menu 4.1</a></li><br /> <br />         <li><a href='URL tujuan utk menu 4.2' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Menu 4.2</a></li><br /> <br />         <li><a href='URL tujuan utk menu 4.3' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 4.3</a></li><br /> <br />        </ul></li><br /> <br />         <li><a href='URL tujuan utk menu 5' target='_blank'> MENU 5</a><br /> <br />         <ul><br /> <br />         <li><a href='URL tujuan utk menu 5.1' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 5.1</a></li><br /> <br />         <li><a href='URL tujuan utk menu 5.2' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 5.2</a></li><br /> <br />         <li><a href='URL tujuan utk menu 5.3' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 5.3</a></li><br /> <br />        </ul></li><br />        <br />        <br />   </ul><br /> <br />         </div><br /> <br />         </div><br /> <br /> </div>

....Paste-kan persis seperti Contoh dibawah ini :

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='t4 eksperimen ecaknyo.blogspot.com (Header)' type='Header'/>
</b:section>
    </div>

<div id='bg_nav'>

          <div id='navleft'>
               <div id='nav'>

   <ul>

        <li><a href='http://ecaknyo.blogspot.com/'> home</a></li>

        <li><a href='####' target='_blank'> Blogging</a>

        <ul>

        <li><a href='http://www.blogger.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Login ke blogger</a></li>

        <li><a href='http://www.blogger.com/profile/07038241031299325975' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> profil</a></li>

        </ul></li>

        <li><a href='URL tujuan utk menu 1' target='_blank'> MENU 1</a>

        <ul>

        <li><a href='URL tujuan utk menu 1.1' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 1.1</a></li>

        <li><a href='URL tujuan utk menu 1.2' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 1.2</a></li>

        <li><a href='URL tujuan utk menu 1.3' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 1.3</a></li>

       </ul></li>

        <li><a href='URL tujuan utk menu 2'> MENU 2</a>

        <ul>

        <li><a href='URL tujuan utk menu 2.1' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 2.1</a></li>

        <li><a href='URL tujuan utk menu 2.2' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 2.2</a></li>

        <li><a href='URL tujuan utk menu 2.3' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 2.3</a></li>

        </ul></li>

        <li><a href='URL tujuan utk menu 3' target='_blank'> MENU 3</a>

        <ul>

        <li><a href='URL tujuan utk menu 3.1' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 3.1</a></li>

        <li><a href='URL tujuan utk menu 3.2' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 3.2</a></li>

        <li><a href='URL tujuan utk menu 3.3' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 3.3</a></li>

       </ul></li>
           
        <li><a href='URL tujuan utk menu 4' target='_blank'> MENU 4</a>

        <ul>

        <li><a href='URL tujuan utk menu 4.1' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Menu 4.1</a></li>

        <li><a href='URL tujuan utk menu 4.2' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Menu 4.2</a></li>

        <li><a href='URL tujuan utk menu 4.3' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 4.3</a></li>

       </ul></li>

        <li><a href='URL tujuan utk menu 5' target='_blank'> MENU 5</a>

        <ul>

        <li><a href='URL tujuan utk menu 5.1' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 5.1</a></li>

        <li><a href='URL tujuan utk menu 5.2' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 5.2</a></li>

        <li><a href='URL tujuan utk menu 5.3' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> MENU 5.3</a></li>

       </ul></li>
      
      
  </ul>

        </div>

        </div>

</div>


    <div id='content-wrapper'>

PAHAMI & PERHATIKAN SCRIPT ISI MHD2 DIATAS :

>> kalau kamu telah mengerti susunan menu drop-down diatas ini.... maka kamu akan bisa menambah maupun mengurangi menu drop-down nya... jadi pelajari dan pahami dulu...

> Hitam = Gantilah nama menu-menu nya sesuai keinginan...
> Biru = Ganti alamat URL-nya sesuaikan dengan Nama Menu yang kamu cantumkan...

5. Jika telah sesuai dengan langkah-langkah diatas... sudah kamu edit isi menu-nya sesuai keinginan kamu.. lalu Simpan & Refresh-lah dan lihat hasilnya....

.... Pahami benar2 Script MHD2 ini... .