MEMBUAT MENU BAR DAN SUB BAR DI BLOG
UNTUK PEMULA
Menu dan Sub-menu Bar sangat dibutuhkan guna mencari
informasi berdasarkan pada kategori atau sub menu . Memberi sub menu bar juga
membuat Semua judul artikel bisa ditampilkan di layar dalam satu tatapan mata;
blog kita tampak lebih ilmiah, teratur, dan simpel.
Jika anda berminat memasangnya di blog, artinya anda
orang yang berfikir sistimatis dan menyukai keteraturan.Selamat mencoba:
Pilih Template lalu pilih Edit HTML
Cari scrift
berikut :
<div
class='main-outer'> atau
<div
id='main-wrapper'> atau
<div
id='main'>
Agar lebih
mudah, klik saja F3 pada keyboard lalu pilh salah satu scrift diatas.
Berdasarkan pengalaman saya setelah membolak balik informasi di www.google.com
maka yang cocok adalah :
div
class='main-outer'>
Bisa jadi beda
dengan template yang lain…
Setelah dapat,
copas scrift berikut tepat diatas scrift yang dicari tadi :
<style>
/* -- Menu
Horizontal + Sub Menu-- */
#cat-nav
{background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a {
color:#eee; text-decoration:none; text-shadow: #033148 0px 1px
0px;border-right:1px solid #156994;}
#cat-nav a:hover
{ color:#fff; }
#cat-nav
li:hover { background:#000; }
#cat-nav a span
{ font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal;
font-weight:400; color:#fff; text-shadow:none;}
#cat-nav
.nav-description { display:block; }
#cat-nav a:hover
span { color:#fff; }
#secnav, #secnav
ul { position:relative; z-index:100; margin:0; padding:0; list-style:none;
line-height:1; background:#0d5e88; }
#secnav a {
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100;
padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li {
float:left; width: auto; height:35px;}
#secnav li
ul { position: absolute; left: -999em;
width: 200px; top:35px}
#secnav li ul
li { height:30px; border-top:1px solid
#fff; }
#secnav li ul li
a { font-family:Verdana, Geneva,
sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px;
font-style:normal; font-weight:400; color:#eee; }
#secnav li ul
ul { margin: -30px 0 0 180px; }
#secnav li:hover
ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover
ul ul ul { left:-999em; }
#secnav li:hover
ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul,
#secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav
li:hover,#secnav li.hover {
position:static; }
#cat-nav #secnav
{width:100%;margin:0 auto;}
</style>
<div
id='cat-nav'>
<ul
class='fl' id='secnav'>
<li><a
href='#'>Beranda</a></li>
<li><a
href='#'>Menu 1</a></li>
<li><a
href='#'>Menu 2</a>
<ul
id='sub-custom-nav'>
<li><a
href='#'>Sub Menu2 a</a></li>
<li><a
href='#'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a
href='#'>Menu3</a>
<ul
id='sub-custom-nav'>
<li><a
href='#'>Sub Menu3a</a></li>
<li><a
href='#'>Sub Menu3b
</a></li>
</ul>
</li>
<li><a
href='#'>Menu4</a>
<ul
id='sub-custom-nav'>
<li><a href='#'>Sub Menu4a</a></li>
<li><a
href='#'>Sub Menu4b
</a></li>
</ul>
</li>
<li><a
href='#'>Menu5</a></li>
</ul>
</div>
PENJELASAN :
1. Cara
memasukkan alamat URL:
Ganti tanda # (warna MERAH) dengan link/url yang anda inginkan.
Bisa jadi link posting atau label (katagori) yang ada pada blog anda.
Ganti Tulisan warna MERAH dengan nama menu dan nama sub menu yang
anda inginkan.
3. Untuk warna hijau tambah copas ENTER copy dibawahnya atau kurangi jumlah menu,
silakan atau hapus Skrip dengan blok warna hijau (1 porsi menu) , jumlah
sub-menunya bisa ditambah sesuai selera, misalnya submenu ..c, d, e, f, dst.
0 komentar:
Posting Komentar