membuat menu bar
Membuat Menu Bar
kali ini saya akan menjelaskan bagaimana membuat menu bar pada sebuah blog. berikut contoh gambar menu bar yang akan kita buat
Menu dan Sub-menu Bar
sangat dibutuhkan untuk mencari informasi berdasarkan 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.
Gak usah panjang lebar langsung di coba
Langkah-langkah
- Klik Desain
- Pilih Template lalu pilih Edit HTML
cari scrift berikut dengan cara pencet Ctrl+F
<div class='main-outer'> atau
<div id='main-wrapper'> atau
<div id='main'>
pilih salah satu script di atas
setelah dapa, copas scrift berikut diatas scrift tadi :
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:black;margin:0 0px;padding:0;height:35px;}
#cat-nav a { color:white; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid white;}
#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:#666666; }
#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:#fff; }
#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>
Keterangan:
- Memasukan URL
ganti tanda # (warna biru) dengan link/url yang anda inginkan seperti label, Contat Us, dll yg anda inginkan.
-Memasukan judul menu
ganti tulisan warna hitam dengan judul menu yang anda inginkan
Simak terus tutorial membuat blog hanyadi WEB MASTER
Comments
Post a Comment