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 :
- Seperti biasa masuk ke Account Blog (Udah pasti hafal deh)
- 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) :
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/AVvXsEjNv3Yuq_aI4c7f4pIhjwiAvvGItfVn-T4UKSd2iJZ-zVLVsJMK7mi1XyBSTAoVAlVXQaWIxUtC96_zV9JZIZrtRCPP8rQX0-JbmFMTRBS5L0rEVsjsRAFnkozbf5LoZQWFlJIQjPAHogQ/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='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).
