Wednesday, August 11, 2010

Gadget Menu Horizontal Drop-Down



Ada pertanyaan dari sobat Sigit Super... " oia gimana caranya buat biar menu di navbar bisa ada dua atau tiga menu.maksudnya dropdown menu plis ya bung ?" 

Menu Horizontal Drop Down seperti gambar dibawah ini, tampilannya minimalis.




Langkah-langkahnya sbb :


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

2. Copy-Paste dahulu seluruh kode HTML template widget blog ke dalam Notepad dan simpan, untuk jaga-jaga (Backup)

3. Cari dengan CTRL+F kode "  ]]></b:skin> " lalu copy script dibawah ini dan paste diatasnya.



Contohnya seperti dibawah ini.
 /*  MHD2  */


          #bg_nav {

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

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

              height: 29px;

              font-size: 11px;

              font-family: Arial, Tahoma, Verdana;

              color: #000000;

              font-weight: 28px;

              margin: 0px auto 0px;

              padding: 0px;

              overflow: hidden;

              -moz-border-radius:0px;

              }

       

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

              color: #ffffff;

              font-size: 11px;

              text-decoration: none;

              text-transform: uppercase;

              padding: 0px 0px 0px 0px;

              }

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

              color: #ffffff;

              text-decoration: underline;

              padding: 0px 0px 0px 0px;

              }


          #navleft {

              width: 760px;

              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: #053EFA;           /*BIRU_warna teks menu utama */

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

              display: block;

              height: auto;
            
              width: auto;

              font-weight: bold;

              margin: 0px auto 0px;

              -moz-border-radius:0px;

              padding: 8px 15px 8px 15px;

              opacity: 0.7;filter:alpha(opacity=70);zoom:1;

              }

          #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 auto 0px;

              font-weight: bold;

              padding: 8px 15px 8px 15px;

              text-decoration: none;

              -moz-border-radius:0px;

              opacity: 0.7;filter:alpha(opacity=70);zoom:1;

              }


          #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;


        }

/* eleman dibawah header */
#under_header{
margin:-20px 0 25px 0px;
padding:1%;
height;0px;
width:98%;
}

]]></b:skin>


Hitam, yang ada di bagian bg_nav dan navleft, ini untuk mengatur panjang  menu horizontal, silahkan diatur sesuaikan.

Hijau, warna latar menu.

Pink, warna hover menu ketika di mouseover.

Orange, warna teks menu utama.

Biru, warna hover ketika teks di mouseover.


4. Cari dengan CTRL+F kode "  <div id='header-wrapper'> " lalu copy script dibawah ini setelah kode " </div>  ".

atau ( Jika tidak ada kode header-wrapper ), cari kode " <body> " lalu copy script dibawah ini setelahnya.



Paste persis seperti contoh dibawah ini.
<div id='under_header'>
<b:section class='header' id='underheader' preferred='yes'/>
<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'/> blogger profil</a></li>

<li><a href='http://www5.shoutmix.com/?pumitabusan' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Blog Walking</a></li>

        </ul></li>

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

        <ul>

        <li><a href='http://eksperimen284.blogspot.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> blog eksperimen284</a></li>

        </ul></li>

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

        <ul>

        <li><a href='http://www.colorpicker.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> color picker</a></li>

        <li><a href='http://centricle.com/tools/html-entities/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Encode/Decode HTML Entities</a></li>

<li><a href='http://www.iconfinder.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Icon Finder</a></li>

<li><a href='http://translate.google.co.id/#' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Translator</a></li>

        <li><a href='http://myspace.laymark.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Smiley Emotion</a></li>

<li><a href='http://sites.google.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Site</a></li>
      
        </ul></li>

      
           
        <li><a href='#' target='_blank'> Download/Upload</a>

        <ul>

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

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

       </ul></li>

        <li><a href='#' target='_blank'> <blink>MAU DUIT</blink></a>

        <ul>

        <li><a href='http://www.neobux.com/?r=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Neobux</a></li>

        <li><a href='http://www.idr-clickit.com/register.php/wong284.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> idr-clickit</a></li>

        <li><a href='http://www.donkeymails.com/pages/index.php?refid=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> DonkeyMails</a></li>

<li><a href='https://www.vipclix.com/?ref=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> vipclix</a></li>

       </ul></li>
       <li><a href='http://ecaknyo.blogspot.com/2010/08/cara-membuat-menu-horizontal-drop-down.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow003.gif'/> Buat Menu drop-down seperti ini</a></li>
      
  </ul>

        </div>

        </div>
 </div>

</div>


Hitam, gantilah nama menu-menu nya.
Biru, ganti alamat URL-nya, sesuaikan.


5. Simpan & reload blog untuk melihat hasilnya.



Selamat Mencoba.