Tips Membuat Menu Horizontal Drop-Down pada Blogger

Demo

Postingan ini karena ane mpe judeknya gan,kesana kemari akhirnya dapet deh yang ane inginkan.....
maav ane nwubie gan didunia bloging heheheee.....

Semoga bermanfaat ya gan....!! :D

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: 760px; /* Panjang dari kotak menu dasar */<br /> <br /> height: 29px;<br /> <br /> font-size: 11px;<br /> <br /> font-family: Arial, Tahoma, Verdana;<br /> <br /> color: #000000;<br /> <br /> font-weight: 28px;<br /> <br /> margin: 0px auto 0px;<br /> <br /> padding: 0px;<br /> <br /> overflow: hidden;<br /> <br /> -moz-border-radius:0px;<br /> <br /> }<br /> <br /> <br /> <br /> #bg_nav a, #bg_nav a:visited { /* bagian script yang ini dibiarkan saja ya */<br /> <br /> color: #ffffff;<br /> <br /> font-size: 11px;<br /> <br /> text-decoration: none;<br /> <br /> text-transform: uppercase;<br /> <br /> padding: 0px 0px 0px 0px;<br /> <br /> }<br /> <br /> #bg_nav a:hover { /* bagian script yang ini dibiarkan saja ya */<br /> <br /> color: #ffffff;<br /> <br /> text-decoration: underline;<br /> <br /> padding: 0px 0px 0px 0px;<br /> <br /> }<br /> <br /> <br /> #navleft {<br /> <br /> width: 760px;<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: #053EFA; /*BIRU_warna teks menu utama */<br /> <br /> text-shadow: 4px 4px 4px #aaa; /* Memberi efek bayangan di teks */<br /> <br /> display: block;<br /> <br /> height: auto;<br /> <br /> width: auto;<br /> <br /> font-weight: bold;<br /> <br /> margin: 0px auto 0px;<br /> <br /> -moz-border-radius:0px;<br /> <br /> padding: 8px 15px 8px 15px;<br /> <br /> opacity: 0.7;filter:alpha(opacity=70);zoom:1;<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 auto 0px;<br /> <br /> font-weight: bold;<br /> <br /> padding: 8px 15px 8px 15px;<br /> <br /> text-decoration: none;<br /> <br /> -moz-border-radius:0px;<br /> <br /> opacity: 0.7;filter:alpha(opacity=70);zoom:1;<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 /> }<br /> <br /> /* eleman dibawah header */<br /> #under_header{<br /> margin:-20px 0 25px 0px;<br /> padding:1%;<br /> height;0px;<br /> width:98%;<br /> }<br /> <br /> ]]></b:skin><br />

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>

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>  " :

..Atau ( Jika tidak ada kode header-wrapper ).. Cari (CTRL+F) kode " <body> " lalu Copy script dibawah ini setelahnya :

<div id='under_header'><br /> <b:section class='header' id='underheader' preferred='yes'/><br /> <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'/> blogger profil</a></li><br /> <br /> <li><a href='http://www5.shoutmix.com/?pumitabusan' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Blog Walking</a></li><br /> <br /> </ul></li><br /> <br /> <li><a href='#' target='_blank'> Demo</a><br /> <br /> <ul><br /> <br /> <li><a href='http://eksperimen284.blogspot.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> blog eksperimen284</a></li><br /> <br /> </ul></li><br /> <br /> <li><a href='URL tujuan utk menu 2'> ALAT</a><br /> <br /> <ul><br /> <br /> <li><a href='http://www.colorpicker.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> color picker</a></li><br /> <br /> <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><br /> <br /> <li><a href='http://www.iconfinder.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Icon Finder</a></li><br /> <br /> <li><a href='http://translate.google.co.id/#' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Translator</a></li><br /> <br /> <li><a href='http://myspace.laymark.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Smiley Emotion</a></li><br /> <br /> <li><a href='http://sites.google.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Site</a></li><br /> <br /> </ul></li><br /> <br /> <br /> <br /> <li><a href='#' target='_blank'> Download/Upload</a><br /> <br /> <ul><br /> <br /> <li><a href='http://www.filehippo.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> FileHippo</a></li><br /> <br /> <li><a href='http://www.ziddu.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> ziddu</a></li><br /> <br /> </ul></li><br /> <br /> <li><a href='#' target='_blank'> <blink>MAU DUIT</blink></a><br /> <br /> <ul><br /> <br /> <li><a href='http://www.neobux.com/?r=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Neobux</a></li><br /> <br /> <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><br /> <br /> <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><br /> <br /> <li><a href='https://www.vipclix.com/?ref=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> vipclix</a></li><br /> <br /> </ul></li><br /> <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><br /> <br /> </ul><br /> <br /> </div><br /> <br /> </div><br /> </div><br /> <br /> </div><br />

....Paste-kan 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://sitimbul.co.cc/'> 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/12390139884825505845' 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>

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....