Cara memasang menu bar atau menu
utama di bahagian teratas halaman blog anda
Agar blog kita lebih nyaman untuk
dikunjungi oleh orang banyak dan juga lebih menarik untuk dilihat,maka salah
satunya adalah dengan Cara memasang
menu bar atau menu utama di bahagian teratas halaman blog anda.
Contohnya seperti gambar dibawah ini :
Nah sekarang langsung aja ke pokok
permasalahanya
1. Masuk ke menu settingan blog anda
2. Klik template blog , lalu klik edit html
3. Cari kode <div
class='main-outer'> atau <div
id='main-wrapper'> <div
id='main'> ( berlainan menurut template blog anda )
4. Untuk mempermudah pencarian klik ctrl + f atau f3 , lalu tulis atau copy paste <div class='main-outer'> atau <div id='main-wrapper'> <div id='main'> kedalam kotak pencarian
5. Jika sudah ketemu, copy dan paste / simpan kode yang berada di bawah ini, tepat diatas kode yang ada diatas 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>
(((<div
class='main-outer'> ))) ini contoh, jangan disimpan
6. Sehingga menjadi kode seperti di bawah ini :
Catatan yang perlu di perhatikan pada kode
dibawah ini adalah :
1. Ganti tanda # (warna biru)
dengan link/url yang anda inginkan. Bisa jadi link arsib blog, label (katagori), entri populer yang ada pada blog
anda atau bisa juga link/url blog orang lain.
2. Ganti Tulisan warna biru dengan nama atau judul menu dan sub menu yang anda inginkan.
3. Setiap sub menu
bisa ditambah atau dikurangkan sesuai keinginan.
7. Kemudian klik simpan template.
Selamat mencoba....? ( insya ALLAH mudah-mudahan berhasil ).
