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

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

Menu Horizontal Drop Down (menu bercabang)

Salam persahabatan, trik blogger kali ini share tentang menu horizontal drop down untuk blogger pemula yang ingin memasang menu horizontal dan juga sekedar untuk koleksi menu horizontal.

Untuk lebih jelasnya sobat bisa lihat demonya dengan mengklik tombol di bawah ini

Lihat Demo


Langsung saja kita ikuti tutorial berikut ini :

Masuk ke Blogger

Pilih Design >> Edit HTML

Cari kode  ]]></b:skin>

Copy dan pastekan kode script di bawah ini tepat di atas kode tadi

#trikbloggermenucontainer{height:37px;display:block;padding:0 0 0 0;font:12px Arial,Tahoma,Century gothic,verdana,sans-serif;font-weight:normal;background:#191917;border-bottom:1px solid #3d3d3d}
#trikbloggermenu{margin:0 auto;padding:0 0;height:37px;overflow:hidden;width:1000px}
#trikbloggermenu ul{float:left;list-style:none;margin:0;padding:0 10px}
#trikbloggermenu li{float:left;list-style:none;margin:0;padding:0}
#trikbloggermenu li a,#trikbloggermenu li a:link,#trikbloggermenu li a:visited{color:#999;display:block;margin:0;padding:0 10px;line-height:37px}
#trikbloggermenu li a:hover,#trikbloggermenu li a:active{color:#fff;margin:0;padding:0 10px;line-height:37px;text-decoration:none}
#trikbloggermenu li.current_page_item a{background:#034E9D;color:#fff}
#trikbloggermenu li li a,#trikbloggermenu li li a:link,#trikbloggermenu li li a:visited{background:#363737;width:150px;color:#bebebe;float:none;margin:0;padding:0 10px;font-weight:normal;line-height:30px;border-bottom:1px solid #212121}
#trikbloggermenu li li a:hover,#trikbloggermenu li li a:active{background:#4a4a4a;color:#fff;padding:0 10px;line-height:30px;border-left:none;border-right:none;border-bottom:1px solid #212121}
#trikbloggermenu li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:170px;margin:0;padding:5px;background:#1C1C1C}
#trikbloggermenu li li{}
#trikbloggermenu li ul a{width:140px}
#trikbloggermenu li ul a:hover,#trikbloggermenu li ul a:active{}
#trikbloggermenu li ul ul{margin:-36px 0 0 170px}
#trikbloggermenu li:hover ul ul,#trikbloggermenu li:hover ul ul ul,#trikbloggermenu li.sfhover1 ul ul,#trikbloggermenu li.sfhover1 ul ul ul{left:-999em}
#trikbloggermenu li:hover ul,#trikbloggermenu li li:hover ul,#trikbloggermenu li li li:hover ul,#trikbloggermenu li.sfhover ul,#trikbloggermenu li li.sfhover1 ul,#trikbloggermenu li li li.sfhover1 ul{left:auto}
#trikbloggermenu li:hover,#trikbloggermenu li.sfhover1{position:static}

Setelah itu cari kode <div id='main-wrapper'>


Copas kode di bawah ini tepat di atas kode tadi

<div id='trikbloggermenucontainer'>
<div id='trikbloggermenu'>

<ul>

<li class='current_page_item'><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Menu-1</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-1a</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-1b</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-1c</a></li>
</ul>
</li>

<li><a href='Your-Link-Here' title='Link-Title'>Menu-2</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-2a</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-2b</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-2c</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-2d</a></li>
</ul>
</li>

<li><a href='Your-Link-Here' title='Link-Title'>Menu-3</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-3a</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-3b</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-3c</a></li>
</ul>
</li>

<li><a href='Your-Link-Here' title='Link-Title'>Menu-4</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Menu-5</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-5a</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-5b</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-5c</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-5d</a></li>
</ul>
</li>

<li><a href='Your-Link-Here' title='Link-Title'>Menu-6</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-6a</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-6b</a></li>
</ul>
</li>

<li><a href='Your-Link-Here' title='Link-Title'>Menu-7</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Menu-8</a></li>


</ul>

</div>
</div>

Kemudian simpan template sobat dan lihat hasilnya

Selamat mencoba semoga berhasil dan salam blogger !!!

Cara membuat Menu Navigasi bercabang di Blog

Menu Navigasi bercabang (dropdow menu) adalah menu navigasi yang berfungsi untuk menghubungkan link satu dengan link lainnya, biasanya diletakan dibawah atau diatas header, seperti contoh berikut :

untuk membuatnya sebagai berikut :
1. Login ke dasbor —> tata letak —>  edit HTML (centang : expand template widget)
2. Cari kode berikut :
]]></b:skin>
3. Kopy paste kode dibawah ini diatas kode tadi :
/* Navbar */
#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i40.tinypic.com/21bnh2e.jpg) repeat-x;
opacity: 0.99; filter: alpha(opacity: 50);}
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
#menu ul{padding:0; margin:0;}
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
#menu ul li a{float:left; padding-left:15px; display:block; color:#330000; text-decoration:none; font:13px Verdana, Arial, Helvetica, sans-serif; background:url(http://i40.tinypic.com/21bnh2e.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
#menu ul li a:hover{background-position:0px -60px; color:#330000;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#330000;}
#menu ul li ul {display:none;}
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:0px dotted #fff; background:LightSkyBlue; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#00CCFF;}
.status-msg-wrap{
display:none;
}
4. Simpan lalu masuk ke —&gt; Tata letak —&gt; klik  tambah gaddget  yang ada dibawah header blog.

Lalu pilih HTLM/JavaScript, setelah muncul jendela JavaScript, kopy paste kode berikut :
<div id=”menu”>
<ul>
<li><a href=”/”> Home</a></li>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a>
<ul>
<li><a href=”#”>Menu 2.1</a></li>
<li><a href=”#”>Menu 2.2</a></li>
</ul></li>
<li><a href=”#”>Menu 3</a>
<ul>
<li><a href=”#”>Menu 3.1</a></li>
<li><a href=”#”>Menu 3.2</a></li>
<li><a href=”#”>Menu 3.3</a></li>
<li><a href=”#”>Menu 3.4</a></li>
</ul></li>
<li><a href=”#”>Menu 4</a></li>
<ul>
</ul>
</ul></div>
Lalu Simpan, tanpa diberi judul diatasnya.
catatan untuk kode “#” isi dengan alamat url target anda (lihat gamabar paling bawah), tanda petiknya jangan di hilangkan dan tulisan Menu,  menu 1, menu 2 dst silahkan isi sesuai kehendak.  misalnya :
a. untuk yang tunggal (Tulisan ‘Menu1″ saja)
<li><a href=”#”>Menu1 </a></li> dirubah kodenya, menjadi :
<li><a href=”http.www.mapasanda.co.cc/2010/01/tentang-saya.html”>Tentang Saya</a></li>
b. untuk yang bercabang (tulisan “menu2, menu3 dst)
<li><a href=”#”>Menu 2</a>
<ul>
<li><a href=”#”>Menu 2.1</a></li>
<li><a href=”#”>Menu 2.2</a></li>
</ul></li>
dirubah kodenya menjadi :
<li><a href=”http.www.mapasanda.co.cc/”>Tutorial</a>
<ul>
<li><a href=”http.www.mapasanda.co.cc/2010/05/tutorial-blog”>Tutorial Blog</a></li>
<li><a href=”http.www.mapasanda.co.cc/2010/10/tutorial-komputer”>Tutorial Komputer</a></li>
</ul></li>dan seterusnya lalu simpan
untuk mendapatkan alamat URL target cukup melihat diatas browser anda, seperti gambar dibawah ini :

semoga bermanfaat

Menu Navigasi Dalam Navigasi Bar (Navbar) / Menu Navigation The Navigation Bar (Navbar)

Pernahkah anda mengalami kesulitan untuk membuat menu navigasi seperti 'Home', 'About','Daftar Isi',Links dll? Disini,kita akan belajar membuat navigasi bar (navbar) blogger menu sederhana,seperti kasus diatas. Jadi,bukan hanya membuat sebuah navbar,melainkan membuat 'menu navigasi' di dalam navbar itu sendiri. Bingung? Contoh hasil dari kreasi navbar ini,bisa anda lihat seperti gambar di bawah ini [klik gambar untuk hasil yang lebih besar]: Sedangkan jika anda ingin memastikan seperti apa sih hasil sebenarnya,silakan kunjungi situsnya langsung di SINI. Bagaimana? tertarik untuk membuatnya? Langkah Membuat Navbar Blogger Sederhana Sesederhana judul artikel ini,penempatan barisan kode css maupun kode untuk navbarnya,sangat sederhana sekali. Sekali lagi,tutorial membuat navbar ini hanya untuk blogspot dari blogger saja ya :p Pertama,Pergilah ke Dashboard blogger anda,lalu pilih Tata Letak,selanjutnya seperti biasa pilih tab Edit HTML. Selanjutnya,contreng tulisan Expand Widget Templates. Lalu cari kode berikut: </head> [untuk membantu,carilah menggunakan keyboard dengan menekan tombol alt+F] Setelah ketemu,letakkan kode css berikut persis di atas kode </head> tersebut. <style type="text/css"> #pelajaranblognav img { margin: 0px 0px -8px 0px; vertical-align: middle; } #pelajaranblognav { background-color: #222222; width: 100%; left: 0px; text-align: center; font-family: Arial, Tahoma, Verdana; font-size: 12px; z-index:10000; bottom:0; } #pelajaranblognav ul { margin: 0px; padding: 0px; list-style: none; color:white; font-family:arial; font-size:11px; } #pelajaranblognav a { background: #222222; color: #FFFFFF; text-decoration:none; font-weight: bold; margin: 0px; padding: 8px 12px 8px 12px; border-left: 0px solid #444444; border-top:0px solid #444444; border-right: 0px solid #000000; border-bottom: 0px solid white; } #pelajaranblognav a:visited { background: #222222; color: #FFFFFF; text-decoration:none; font-weight: bold; margin: 0px; padding: 8px 12px 8px 12px; border-left: 0px solid #444444; border-top:0px solid #444444; border-right: 0px solid #000000; border-bottom: 0px solid white; } #pelajaranblognav a:hover { background: #222222; color: green; text-decoration:none; font-weight: bold; margin: 0px; padding: 8px 12px 8px 12px; border-left: 0px solid #444444; border-top:0px solid #444444; border-right: 0px solid #000000; border-bottom: 0px solid white; } #pelajaranblognav li { float: left; margin: 0px; padding: 0px; } #copyright a { text-decoration: none; font-family:arial; font-size:11px; } #copyright { color: black; text-decoration: none; float:right; font-family:arial; font-size:11px; } </style> Jika sudah anda letakkan kodenya css-nya,sekarang cari lagi kode berikut: <body> Jika sudah ketemu,letakkan kode berikut persis di bawahnya. <div id="pelajaranblognav"> <table border="0" bgcolor="#222222"> <tr> <br/><ul><li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Daftar Isi</a></li> <li><a href="http://pelajaran-blog.blogspot.com/">Belajar Blog</a></li> <li><a href="http://cepat-terindex-google.blogspot.com/">Belajar Seo</a></li> <li><a href="#">Links</a></li></ul> <td> <a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS2_ad3_600by100.jpg" width="500" height="80"/></a> </td> <td><center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/> <center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/> </td><td> <center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/> <center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/> </td> </tr> </table> </div> <div id="copyright"> Langganan <a href="http://url_blog_anda.blogspot.com/feeds/posts/default" target="_self"><b>RSS Artikel</b></a> | Langganan <a href="http://url_blog_anda.blogspot.com/feeds/comments/default" target="_self"><b>RSS Komentar</b></a> | Buat <a href="http://pelajaran-blog.blogspot.com/2009/11/belajar-membuat-navigasi-bar-navbar.html" target="blank"><b>Navbar</b></a> Ini Di Blog Kamu </div> Setelah itu Simpan Template,dan lihat hasilnya sekarang :D Keterangan: Untuk tanda #,gantilah dengan url alamat yang ingin anda tuju. Untuk http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro,gantilah dengan alamat iklan banner anda. Untuk http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg,gantilah dengan url gambar banner anda. Untuk http://url_blog_anda.blogspot.com/,gantilah dengan url blog anda. Semoga bermanfaat dan modifikasilah sesuai selera anda masing-masing. Goosd Luck Ya! --------------------------------------------------------------------------------------------------------------------------------------- Menu Navigation The Navigation Bar (Navbar) Have you ever had difficulty to make a navigation menu like 'Home', 'About', 'Contents', Links, etc.? Here, we will learn to create a navigation bar (navbar) bloggers a simple menu, like the case above. So, not only create a navbar, but make 'navigation menu' in the navbar itself. Confused? Sample results from this navbar creations, like the picture you can see below [click image for greater results]: Navigation Bar / Blogger Navbar Meanwhile, if you want to make sure like what actual results, please visit the site directly HERE. How? attracted to him? Simple Steps to Make Blogger Navbar Simple as the title of this article, the placement of rows of css code and the code for navbarnya, very simple. Once again, the tutorial makes this navbar blogspot from bloggers just to be yes: p First, Go to your Blogger Dashboard, select Layout, then as usual select Edit HTML tab. Next, tick the writing Expand Widget Templates. Then find the following code: </ Head> [For help, seek to use the keyboard by pressing alt + F] After the meet, put the following css code right above the code </ head> it. <style type="text/css"># Pelajaranblognav img {margin: 0px 0px 0px-8px;vertical-align: middle;}# Pelajaranblognav {background-color: # 222222;width: 100%;left: 0px;text-align: center;font-family: Arial, Tahoma, Verdana;font-size: 12px;z-index: 10000;bottom: 0;}# Pelajaranblognav ul {margin: 0px;padding: 0px;list-style: none;color: white;font-family: arial;font-size: 11px;}# Pelajaranblognav a {background: # 222222;color: # FFFFFF;text-decoration: none;font-weight: bold;margin: 0px;padding: 8px 12px 8px 12px;border-left: 0px solid # 444444;border-top: 0px solid # 444444;border-right: 0px solid # 000000;border-bottom: 0px solid white;}# Pelajaranblognav a: visited {background: # 222222;color: # FFFFFF;text-decoration: none;font-weight: bold;margin: 0px;padding: 8px 12px 8px 12px;border-left: 0px solid # 444444;border-top: 0px solid # 444444;border-right: 0px solid # 000000;border-bottom: 0px solid white;}# Pelajaranblognav a: hover {background: # 222222;color: green;text-decoration: none;font-weight: bold;margin: 0px;padding: 8px 12px 8px 12px;border-left: 0px solid # 444444;border-top: 0px solid # 444444;border-right: 0px solid # 000000;border-bottom: 0px solid white;}# Pelajaranblognav li {float: left;margin: 0px;padding: 0px;}# Copyright a {text-decoration: none;font-family: arial;font-size: 11px;}# Copyright {color: black;text-decoration: none;float: right;font-family: arial;font-size: 11px;}</ Style> If you already put the css code, it is now looking again the following code: <body> If you've met, put the following code just below it. <div id="pelajaranblognav"><table border="0" bgcolor="#222222"><tr><br/> <li> <a href="#"> Home </ a> </ li><li> <a href="#"> About </ a> </ li><li> <a href="#"> Table of Contents </ a> </ li><li> <a href="http://pelajaran-blog.blogspot.com/"> Learning Blog </ a> </ li><li> <a href="http://cepat-terindex-google.blogspot.com/"> Learning Seo </ a> </ li><li> <a href="#"> Links </ a> </ li> </ ul><td><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"> <img border = "0" src = "http://www.awsurveys.com/Pictures/AWS2_ad3_600by100.jpg" width = "500" height = "80 "/></ a></ Td><td> <center> <a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"> <img border = "0" src = "http://www.awsurveys.com/ Pictures/AWS_ad3_150by150.jpg "width =" 80 "height =" 50 "/></ a> </ center> <br/><center> <a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"> <img border = "0" src = "http://www.awsurveys.com/Pictures/AWS_ad3_150by150 . jpg "width =" 80 "height =" 50 "/></ a> </ center> <br/></ Td> <td> <center> <a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"> <img border = "0" src = "http://www.awsurveys.com/Pictures/AWS_ad3_150by150 . jpg "width =" 80 "height =" 50 "/></ a> </ center> <br/><center> <a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"> <img border = "0" src = "http://www.awsurveys.com/Pictures/AWS_ad3_150by150 . jpg "width =" 80 "height =" 50 "/></ a> </ center> <br/> </ Td> </ Tr></ Table></ Div><div id="copyright">Subscriptions <a href="http://url_blog_anda.blogspot.com/feeds/posts/default" target="_self"> <b> RSS Articles </ b> </ a>| Subscriptions <a href="http://url_blog_anda.blogspot.com/feeds/comments/default" target="_self"> <b> RSS Comments </ b> </ a>| Create <a href="http://pelajaran-blog.blogspot.com/2009/11/belajar-membuat-navigasi-bar-navbar.html" target="blank"> <b> Navbar </ b> < / a> This On You Blog</ Div> After that, Save Template, and see the results now: D Description:         To sign #, replace with the url address you want to go.         To http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro, change the address of your banner ads.         To http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg, replace with your banner image url.         To http://url_blog_anda.blogspot.com/, replace with url of your blog. Hopefully useful and modify according to your taste each one. Goosd Luck Yes!

Cara Membuat Menu Blogger plus search

Bismillahirahmanirrahim. Pada tutorial kali ini kita akan membahas bagaimana caranya membuat menu bloggger. Menu blogger yang akan kita buat nantinya terdapat pula fasilutas kotak pencarian blogger (search blogger). Sebelum kita masuk ke langkah-langkah pembuatan menu blogger + kotak pencarian blogger sebaiknya kalian liat dulu tampilan menu bloggernya pada link demo di bawah ini.

Download Demo

• Pertama kalian harus login dulu di blogger
• Setelah login pilih Racangan --> Edit HTML dan beri cheklis pada Expand Template Widget
• Copy paste kode di bawah ini sebelum kode ]]></b:skin>
#menusemua{height:120px;margin-top:12px;float:left;width:920px;} #menueko{height:34px;float:left;width:600px}
#menueko,#menueko ul{padding:0;margin:0;list-style:none;line-height:1} #menueko{margin-bottom:1px}
#menueko ul{float:left;list-style:none;margin:0 0 0 0;padding:0}
#menueko li{float:left;list-style:none;margin:0;padding:0 6px 0 0}
#menueko ul li{list-style:none;margin:0;padding:0}
#menueko li a,#menueko li a:link{color:#fff;display:block;border:1px solid #fff; margin:0;padding:8px 8px 8px 8px;text-decoration:none;text-transform:uppercase;font:bold 11px Arial,Helvetica,sans-serif;background:#0D606B;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#menueko li a:hover,#menueko li a:active{color:#AAEDF6;display:block;text-decoration:none;background:#003D45}
#menueko li.current_page_item a{color:#fff;}
#menueko li:hover,#menueko li.sfhover{position:static}

#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7no1vU2RjWqUdnAAXIFmfFrm7FNsetGAYKvjDRbs8CJ75rs5C7TPDIae20E8lQbTPLqVuTGPwoTqQCbJjg3vMhg85XINgZtVg1HyE88Z1c-Fvu2B2SosBwna4j_cKb1Hnnn2eoE9iTF8Y//) no-repeat left top;
width: 180px;
height: 16px;
color: #202020;
font-size: 12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px 0px 0px 15px;
padding: 4px 0px 3px 25px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;

#searchbutton {
background: #1c426d; /* Warna background tombol pencari */
color: #FFF; /* Warna teks tombol pencari */
font-size: 11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 3px 0px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
• Lalu Copy paste lagi kode di bawah ini di widget HTML
<div id='menusemua'>
<ul id='menueko'> 
<li><a href='http://cktpanellistrik.blogspot.com/2010/04/panel-distribusi-lvmdplvsdp.html'>Panel listrik</a></li>
<li><a href='http://www.cantiknya-ilmu.co.cc/2010/07/tool-parse-html.html' title='posts rss'>Tools</a></li>
<li><a href='http://www.cantiknya-ilmu.co.cc/feeds/posts/default' title='comments rss'>Posts RSS</a></li>
<li><a href='http://www.cantiknya-ilmu.co.cc/feeds/comments/default' title='comments rss'>Comments RSS</a></li>
</ul> 
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari artikel disini...&quot;;}' onfocus='if (this.value == &quot;cari artikel disini...&quot;) {this.value = &quot;&quot;}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='go'/>
</form>
</div>
• Simpan template dan liat hasilnya

Mungkin sampai disini dulu tutorial kali ini.  Kalian ada yang kurang paham bisa tanyakan pada kotak komentar dan kalau ada kekurangan mohon tulis juga saran dan kritiknya di kotak komentar.  Terima kaish telah berkunjung dan tunggu posting-posting lainnya.

Cara Membuat Menu Drop Down Horizontal Dengan JavaScript

Pada postingan ini, saya akan memaparkan bagaimana membuat menu drop down horizontal pada blogspot. Menu drop down merupakan menu yang mempunyai sub-sub menu didalamnya. Prisipnya adalah ketika pointer menyorot sebuah main menu, maka akan muncul sub menu dari main menu tersebut. Kode-kode ini saya dapat dari www.dynamicdrive.com. Klik disini untuk melihat contohnya.

Bagaimana cara menambahkan menu drop down pada blog kita? Berikut langkah-langkahnya:

1. Silahkan login terlebih dahulu pada akun Blogspot pembaca
2. Klik link menu Tata Letak dan pilih sub menu Edit HTML dan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
   
3. Jangan lupa untuk membackup terlebih dahulu template pembaca agar jika terjadi kesalahan bisa dikembalikan lagi pada kondisi semula. Klik link Download Template Lengkap
4. Copy paste kode berikut di atas tag </head>
   <script type="text/javascript"
src="http://nestoriko.googlepages.com/chrome.js">
</script>
   
5. Cari kode ]]></b:skin> kemudian tambahkan struktur CSS dibawah ini dengan mengcopy paste diatas kode ]]></b:skin>
   
.chromestyle{
width: 100%;
font-weight: bold;
}

.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://nestoriko.googlepages.com/chromebg2.gif) center center repeat-x;
padding: 4px 0;
margin: 0;
text-align: center;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #B5E2FE;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: url(http://nestoriko.googlepages.com/chromebg2-over.gif) center center repeat-x;
}

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #B5E2FE;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #B5E2FE;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{
background-color: #EBF7FF;
}
   
6. Cari struktur seperti dibawah ini pada template pembaca
   <b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
   
7. Jika sudah ketemu, copy paste struktur berikut ini tepat dibawah struktur yang Anda temukan pada langkah 6
   <div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://tutorial-website.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Menu1</a></li>
<li><a href="#" rel="dropmenu2">Menu2</a></li>
</ul>
</div>

<!--menu drop down pertama -->
<div id="dropmenu1" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>


<!--menu drop down kedua -->
<div id="dropmenu2" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
8. Coba perhatikan tulisan yang berwarna merah struktur tersebut. Tulisan "dropmenu1" dan "dropmenu2" tersebut merupakan atribut rel dari parent menu drop down yang kita buat. Pada bagian tersebut terlihat bahwa terdapat 2 menu drop down, yaitu "Menu1" dan "Menu2" (warna biru). Jika pembaca ingin menambah menu drop down lagi misalnya "Menu3", maka buatlah juga atribut rel untuk "Menu3" tersebut misalnya "dropmenu3", setelah itu tambahkan struktur menu drop down untuk "Menu3" setelah menu drop down kedua". Sehingga strukturnya akan menjadi:
   <div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://tutorial-website.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Menu1</a></li>
<li><a href="#" rel="dropmenu2">Menu2</a></li>
<li><a href="#" rel="dropmenu3">Menu3</a></li>
</ul>
</div>

<!--menu drop down pertama -->
<div id="dropmenu1" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>


<!--menu drop down kedua -->
<div id="dropmenu2" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<!--menu drop down ketiga-->
<div id="dropmenu3" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
9. Perhatikan bahwa nama atribut ID untuk menu drop down ketiga harus sama dengan nama atribut rel untuk "Menu3" yaitu "dropmenu3". Begitu pula jika pembaca ingin menambah menu drop down keempat, kelima, dan seterusnya.
10. "URL sub menu1" merupakan URL halaman yang akan dituju jika "Sub Menu1" diklik, dan seterusnya. Silahkan pembaca ganti nama menu, sub menu, dan juga URL dari menu drop down tersebut.
11. Bagi pembaca yang membuat web dengan menggunakan menggunakan software web design seperti dreamweaver, langkahnya hampir sama dengan yang diatas. Hanya saja struktur yang ada pada langkah 7 diletakkan pada bagian halaman web dimana pembaca ingin menambahkan menu drop down tersebut.
    

Selamat mencoba !!!

Membuat Multi Level Drop-Down Menu

Dengan di temaninya sebungkus rokok dan segelas kopy plus martabak akhirnya Alhamdulillah kang fatur bisa jalan jalan di dunia tidaknyata alias Internet. Dan Alhamdulillah saya mendapat oleh-oleh dari salah seorang hali bloger orang Arab Saudi untuk dibagikan kepada para sobat semua.

Oleh-oleh yang saya dapatkan dan yang saya akan bagikan pada malam ini yaitu tentang Membuat Multi Level Drop-Down Menu Dengan CSS dan JQuery. Mungkin para sobat juga sudah banyak mendengar tentang masalah ini, dan sudah banyak para ahli yang mempostingkannya, namun saya hanya sekedar ingin berbagi sama para sobat yang masih awam seperti saya dan mudah mudahan postingan kali ini dapat bermanfaat.

Baik, untuk para pemula semuanya kalau belum tahu apa itu Multi Level drops-Down Menu di bawah ini contoh gambarnya :




Gimana tertarik?? Nah berikut langkah-langkah membuat multi level drop-down menu dengan JQuery.


1. Seperti biasa Log In pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML


2. Tambahkan script JQuery berikut sebelum tag </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah kedua abaikan saja


3. Tambahkan juga script berikut setelah script JQuery yang tadi

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />

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


<script type="text/javascript" src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js"></script>

4. Selanjutnya tambahkan kode CSS berikut diatas tag ]]></b:skin>:

/* jqueryslidemenu
----------------------------------------------- */

.jqueryslidemenu{
font: bold 12px Verdana;
background: #ffffff;
width: 100%;
height: 250px;
}

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

5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://amatullah83.blogspot.com/">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</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>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</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>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://amatullah83.blogspot.com/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

6. Simpan template maka Hasilnya seperti pada gambar di bawah ini :



Untuk Sobat yang sudah hali dengan CSS silahkan edit sesuai selera sobat untuk kode warna silahkan klik disini.

Sekian dulu dari saya, insya Allah postingan selanjutnya menyusul, mau nerusin ngopy dulu takut keburu dingin.

Semoga bermanfaat! Thanks to Dinamic Drive