Menu Pull Down

Menu bar, adalah kotak menu, kali ini khusus yang Kang Helmy bahasa adalah menu atas. Menu bar ini dimaksudkan agar kita dapat lebih cepat mencari posisi / informasi yang ada pada seluruh Content Blog  atau Link2 yang berkaitan dengan info yang diinginkan. (Ah... udah gak usah dipikir kata-katanya... entar kan tahu sendiri). Kita langsung ke TKP aja deh...


Caranya :
  1. Seperti biasa masuk ke Account Blog (Udah pasti hafal deh)
  2. Kemudian klik EDIT HTML cari ]]></b:skin>, kalau bingung gunakan tombol CTRL + F, kemudian ketik aja ]]></b:skin>, kalau udah ketemu di atas tulisan ]]></b:skin>, anda tempelin ini (yang warna biru) :
#catmenucontainer{height:33px;
background:none;
display:block;padding:0 0 0 0;font:12px Tahoma,Century gothic,verdana,Arial,sans-serif;font-weight:normal;border-bottom:0 solid #BCB8B7}

#catmenu{margin:0;padding:0;width:1000px;background:none}
 
#catmenu ul{float:left;list-style:none;margin:0;padding:0}
#catmenu li{float:left;list-style:none;margin:0;padding:0}
#catmenu li a,#catmenu li a:link,#catmenu li a:visited{color:#aaa;display:block;margin:0;padding:9px 10px 10px 10px}

#catmenu li a:hover,#catmenu li a:active{background:#7E7E7E;color:#fff;margin:0;padding:9px 10px 10px 10px;text-decoration:none}

#catmenu li li a,#catmenu li li a:link,#catmenu li li a:visited{background:#7E7E7E;width:150px;color:#aaa;font-family:Tahoma,century gothic,Georgia,sans-serif;font-weight:normal;float:none;margin:0;padding:9px 10px 10px 10px;border-bottom:1px solid #333}

#catmenu li li a:hover,#catmenu li li a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ehZhERyrFuUoViEiDyHiqBmIeQOKKoTcPwln6m1v-QJ3KdWgzWCv0i96MvNKsO9-c-RvBnFTAwI0TchbaGpgKb9Myz5fxDlzYMfikJpnvIdmnMfnt2rH5x38qjLFJkk8f0yDK2udbas/s1600/catmenuhov.jpg) repeat-x;color:#fff;padding:9px 10px 10px 10px}
#catmenu li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:170px;margin:0;padding:0}
#catmenu li li{}
#catmenu li ul a{width:140px}
#catmenu li ul a:hover,#catmenu li ul a:active{}
#catmenu li ul ul{margin:-34px 0 0 170px}
#catmenu li:hover ul ul,#catmenu li:hover ul ul ul,#catmenu li.sfhover ul ul,#catmenu li.sfhover ul ul ul{left:-999em}
#catmenu li:hover ul,#catmenu li li:hover ul,#catmenu li li li:hover ul,#catmenu li.sfhover ul,#catmenu li li.sfhover ul,#catmenu li li li.sfhover ul{left:auto}
#catmenu li:hover,#catmenu li.sfhover{position:static}
    • Klik RANCANGAN --> TAMBAH GADGET --> HTML/JavaScript (untuk ini poisi harus di atas, entar kalau kebalik... malah aneh tuh).
    • Kemudian masukan scrip di bawah ini :
    <div id='catmenucontainer'>
    <div id='catmenu'>
    <ul>

    <li><a expr:href='data:blog.homepageurl'>Home</a></li>

    <li><a href='#l' title='keterangan'>Menu 1</a>
    <ul class='children'>
    <li><a href='#l' title='keterangan'>Sub Menu 1</a></li>
    <li><a href='#l' title='keterangan'>Sub Menu 1</a></li>
    <li><a href='#l' title='keterangan'>Sub Menu 1</a></li>
    </ul>
    </li>

    <li><a href='#l' title='keterangan'>Menu 2</a>
    <ul class='children'>
    <li><a href='#l' title='keterangan'>Sub Menu 2</a></li>
    <li><a href='#l' title='keterangan'>Sub Menu 2</a></li>
    <li><a href='#l' title='keterangan'>Sub Menu 2</a></li>
    <li><a href='#l' title='keterangan'>Sub Menu 2</a></li>
    </ul>
    </li>

    <li><a href='#' title='Keterangan'>Menu 3</a>
    <ul class='children'>
    <li><a href='#l' title='keterangan'>Sub Menu 3</a></li>
    <li><a href='#l' title='keterangan'>Sub Menu 3</a></li>
    <li><a href='#l' title='keterangan'>Sub Menu 3</a></li>
    </ul>
    </li>

    <li><a href='#' title='Keterangan'>Menu 4</a>

    <li><a href='#' title='Keterangan'>Menu 5</a>
    <ul class='children'>
    <li><a href='#l' title='keterangan'>Sub Menu 5</a></li>
    <li><a href='#l' title='keterangan'>Sub Menu 5</a></li>
    <li><a href='#l' title='keterangan'>Sub Menu 5</a></li>
    <li><a href='#l' title='keterangan'>Sub Menu 5</a></li>
    </ul>
    </li>

    <li><a href='#' title='Keterangan'>Menu 6</a>
    <ul class='children'>
    <li><a href='#l' title='keterangan'>Sub Menu 5</a></li>
    <li><a href='#l' title='keterangan'>Sub Menu 5</a></li>
    </ul>
    </li>
    <li><a href='#' title='Keterangan'>Menu 6</a>
    </ul></div></div>
      Keterangan 
      • Tanda "#" anda ganti dengan alamat urlnya  misal : "http://kanghelmyblog.blogspot.com/2010/12/bikin-tulisan-berjalan.html"
      • Keterangan  adalah keterangan dari menu anda, silahkan ganti apa aja yang cocok.
      • Menu 1, Menu 2 dst, adalah title Menu, silahkan ganti apa aja.
      • Nah.... tinggal simpan dan tampilkan ... gampang kan.... he..he..., entar kalau dirasa ribet... kasi komentar di bawah ini, Kang Helmy pasti akan menjawab  (he..he..he..kalau gak khilaf sih).
      Oke deh... selamat mencoba, dan terima kasih mau kunjung di blog Kang Helmy.
      Sumber : http://kanghelmyblog.blogspot.com/2010/12/membuat-menu-bar.html 
      Catatan : menu ini hanya berlaku untuk blogspot dengan themes mudah
      Langganan: Postingan (Atom)