Bikin menubar pulldown versi 2

Baru saja blogger.com mengeluarkan fasilitas baru untuk para blogspot mania yaitu fasilitas page (yang sebenarnya bisa dibilang "too late" :x ), Artikel ini tidak membahas mengenai fasilitas tersebut melainkan bagaimana membuat Menubar pulldown yang sedikit lebih variatif dimana Artikel ini juga merupakan Pe eR tersulit dan terpanjang yang bisa saya selesaikan yang diberikan Rian pada komentar artikel Bikin menubar pulldown versi pertama, baca disini. Secara umum menubar pulldown versi 2 ini hampir sama dengan menubar cara yang pertama, perbedaannya hanya terletak pada bagian sub-menunya (menu baru yang muncul setelah kursor berada diatas Menu Utama) masih memiliki sub menu lagi sampai 2 turunan :x :x :x , Ilustrasi singkatnya seperti pada gambar screen capture diatas.
Jika tertarik silahkan mencobanya sendiri langkah-langkahnya adalah sebagai berikut: :k :k ;)

Persiapan:

1. Persiapkan semua link/URL LABEL blog yang akan pasang sebagai URL Menu Utama, Sub Menu Utama, dan Sub dari Sub Menu Utama. URL yang diambil adalah link dari LABEL yang dimasukkan ketika membuat artikel, jika belum jelas seputar LABEL mohon baca "FAQ cara membuat menu bar di blogspot" agar nantinya tidak kesulitan saat proses pengeditan/pemasangan Link.
2. Sebaiknya URL yang disiapkan sudah dipilah mulai dari kategori LABEL umum hingga yang lebih detail.
   
3. Masuk ke Kontrol Panel blog, pilih TATA LETAK ->  EDIT HTML.
4. Sekedar mengingatkan untuk tidak lupa backup template sebelum melakukan perubahan dengan cara mendownloadnya terlebih dahulu. berhubung segala resiko kerusakan template diluar tanggung jawab saya ya :D :D :D
   

Pemasangan Kode CSS
Setelah proses backup template selesai copy seluruh kode CSS dibawah ini dan tempatkan  diatas kode: ]]></b:skin>

/* pull-down mainmenu css*/

behavior:url("csshover2.htc");    /* important ! */

.mainmenu{
    float: left;
    width: 100%;
    padding: 0;
}
.mainmenu ul {
    float: left;
    width: 100%;
    list-style: none;
    line-height: 1;
    color:#FFFFFF;
    background: #000000;
    padding: 0;
    border: solid #FFFFFF;
    border-width: 1px 0;
    margin: 0 0 1em 0;
}

.mainmenu a, .mainmenu a:visited {
    display: block;
font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;font-weight:bold;font-style:normal;text-decoration:underline;
    color: #FFFFFF;
    text-decoration: none;
    padding: 1em 1em;
}
.mainmenu ul ul a{
    width:100%;
    height:100%;
}
.mainmenu ul a{
    width:1%;
}


.mainmenu li  {
    float: left;
    margin:0;
    padding:0;
}
.mainmenu ul li {float:left; position:relative;  }
.mainmenu ul li a {white-space:nowrap;}   
.mainmenu li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width:15em;   
   
    background: #333333;
    font-weight: normal;
    border-width: 1px;
    margin: 0;
}
.mainmenu li li {
    width:15em ;
}
.mainmenu li li a{
    width:13em ;
}
.mainmenu li ul  {
    margin: 0;
}
.mainmenu li ul ul {
    margin: -2.8em 0 0 13.5em;
}
.ul_ch,
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
    left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
    left: auto;
}
.mainmenu li:hover>ul.ul_ch  
{
    left: auto;
}
.mainmenu li:hover{
    background: #666666;
}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
    color:#FFFF00;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a,
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited,
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
    color:#FFFFFF;
}
.mainmenu li li:hover, .mainmenu li li li:hover,
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover
{
    background: #000000;
    z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a,
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
    color: #FFFF00;
}

.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
    color: #FFFFFF;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
    color: #FFFF00;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
    color: #FFFFFF;
}
/* end of mainmenu css */

Khusus untuk pemasangan kode dibawah ada dua cara:

Cara Pertama
Masih dihalaman Edit HTML beri tanda centang pada pada Expand Widget kemudian cari kode <div id='content-wrapper'> (tekan Ctrl + F)
Letakkan kode HTML dibawah ini tepat dibawah kode diatas.

<!-- PULL DOWN MENU Mulai -->
<div class="menuutama">
<ul>
<li class="li_nc"><a href="/" target="_self" >Home</a></li> <!-- baris ini jangan diubah -->
<li class="li_hc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu1" target="_self" >Menu1</a><ul class="ul_ch">
  <li class="li_hc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-1" target="_self" >SubMenu1-1</a><ul class="ul_ch">
     <li class="li_hc"><a href="http://NamaBlogAnda.blogspot.com/search/label/"  >Sub Menu1-1A</a><ul class="ul_ch">
        <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-1A-1"  >SubMenu1-1A-1</a></li>
        <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-1A-2"  >SubMenu1-1A-2</a></li>
        <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-1A-3"  >SubMenu1-1A-3</a></li>
        </ul></li>
     <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-2B"  >SubMenu1-2B</a></li>
     </ul></li>
  <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-2" target="_self" >SubMenu1-2</a></li>
  <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu1-3" target="_self" >SubMenu1-3</a></li>
  </ul></li>
<li class="li_hc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu2" target="_self" >Menu2</a><ul class="ul_ch">
  <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu2-1" target="_self" >SubMenu2-1</a></li>
  <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu2-2" target="_self" >SubMenu2-2</a></li>
  <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/SubMenu2-2" target="_self" >SubMenu2-3</a></li>
   </ul></li>
<li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu3"  >Menu3</a></li>
<li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu4"  >Menu4</a></li>
</ul>
</div>
<!-- PULL DOWN MENU 2.0 by Oentoe_09 | Blog: http://oentoe09.blogspot.com/ | Selesai -->

Keterangan Kode HTML diatas:

• kode Warna Hijau adalah kode yang tampil sebagai menu utama diantaranya link HOME, Menu 1 sampai menu 4.
• Kode Warna Biru adalah kode untuk Sub-Menu pulldown pertama
• Kode Warna Ungu adalah kode Sub-Menu pulldown ke-2 yaitu sub dari Sub-Menu  pertama .
• Kode Warna Merah adalah kode untuk Sub-menu  ke-3 yaitu sub dari Sub-menu pulldown ke-2.
• Ganti semua kode http://NamaBlogAnda.blogspot.com/search/label/xxxx-xxx  dengan URL Label Artikel yang sebelumnya sudah dipersiapkan (kecuali untuk HOME tidak perlu diedit), sebagai contoh jika salah satu artikel diberi LABEL "Tutorial" (tanpa tanda kutip) maka URLnya  menjadi http://NamaBlogAnda.blogspot.com/search/label/Tutorial. sehingga menjadi seperti ini: <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Tutorial"  >Tutorial</a></li>
  

Untuk melihat hasilnya masih di halaman Edit HTML tekan tombol Pratinjau, jika sudah nampak Menu Bar-nya silahkan Save hasil Perubahan Anda.

Cara Kedua
Cara ini hanya jika hasil pada cara pertama tidak sesuai dengan keinginan (biasanya letak menu bar tidak rapi), dan pastikan cara pertama diatas belum dilakukan.
Cara kedua ini adalah dengan menempatkan kode HTML diatas melalui Add Widget di tab Add Elemen Page yang nantinya widget tersebut diletakkan dibawah header. Berhubung secara default widget header hanya bisa satu widget yaitu Header itu sendiri maka masih di tab EDIT HTML beri tanda centang pada Expand Widget dan cari kode ini <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> setelah ketemu ganti nilai maxwidgets menjadi 2 dan nilai showaddelement menjadi yes, setelah itu baru simpan hasil perubahannya.
Pindah ke tab Add Elemen Page kemudian klik Add Widget yang berada dibawah Header. Pilih HTML/Javacript  dan paste semua kode HTML diatas, lalu simpan.
Tekan tombol Pratinjau untuk melihat Hasilnya.

Tips Menambah atau mengurangi Link Menu:

• Jika ingin menambah lagi Menu Utama (HOME, Menu 1 dstnya), fokus hanya pada kode berwarna hijau kemudian copy paste kode  <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Label" >Label</a></li>  ini dan tempatkan tepat dibawah kode   <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu4" >Menu4</a></li> (tergantung berapa banyak Menu utama yang ingin ditambahkan). Sedangkan jika ingin mengurangi  Menu Utama langsung hapus baris yang berwarna hijau yaitu kode dari <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu4" >Menu4</a></li> (atau tergantung berapa Menu utama yang ingin dihapus).
• Jika ingin membuat Sub menu pada Menu3, copy paste semua kode berwarna biru pada menu2 dan paste diantara  kode <li class="li_nc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu3"  >Menu3</a> dan  </li>. Hal yang sama berlaku jika ingin menambahkan Sub Menu pada Menu 4 atau pada tambahan Menu Utama yang anda telah tambahkan.
• Jika masih ingin menambahkan sub menu dari sub menu  pada Menu3 dan Menu4 (seperti pada Menu 1) :x :x :x , copy semua kode menu1 yaitu mulai dari  kode <li class="li_hc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu1" target="_self" >Menu1</a>  sampai pada kode </li>  yaitu sebelum  kode <li class="li_hc"><a href="http://NamaBlogAnda.blogspot.com/search/label/Menu2" target="_self" >Menu2</a> kemudian replace kode Menu 3 dengan hasil copy tadi. Hal yang sama berlaku jika ingin menambahkannya pada Menu 4 atau pada tambahan Menu Utama yang telah tambahkan.

Semoga bisa bermanfaat, selamat mencoba dan semoga sukses ataupun tidak sukses bikin menu bar-nya. Btw don't forget to leave comment ya :k :k :k .

Update:
Mau desain sendiri menu bar di blog anda menggunakan software gratis? silahkan baca info singkatnya disini atau mau langsung  klik Download untuk mengunduh aplikasinya