Sebagaimana yang pernah saya katakan mengenai sebuah menu dalam blog, bahwa dengan adanya menu akan mempermudah penelusuran isi blog. Hal ini menjadikan sebuah menu itu penting. Sebelumnya saya pernah membuat postingan mengenai Menu Vertikal (Read: Cara membuat menu vertikal sederhana di blog). Dan sekarang saya memposting untuk menu horizontalnya. Terimakasih pada rekan-rekan blogger yang mana saya bisa juga membuat design menu sendiri (walau lumayan pusing.....).
Ok, kita langsung saja bagaimana pada cara pembuatannya:1. Login dan masuk ke 'perancangan' -- 'edit HTML'
2. Cari kode ]]></b:skin> dan tempatkan script CSS di bawah sebelum kode tersebut (silakan copy)
/* menu horizontal dx*/
#nav {
background:#106b93 repeat-x bottom left;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-goog-ms-border-radius:8px;
border-radius:8px;
clear:both;height:35px;
margin:5px 0px;
padding:4px 0px 0px ;}
#nav-left {
display:inline;
float:left;
padding-left:4px;
padding-top:1px;
width:660px;
}
#nav-right {
display:inline;
float:right;
padding-right:15px;
padding-top:3px;
width:200px;
}
#nav ul {
font:bold 16px Arial,Helvetica,sans-serif;
margin:0;
overflow:hidden;
padding-left:0;
position:relative;
}
#nav ul li {
float:left;
list-style:none outside none;
}
#nav ul li a, #nav ul li a:visited {
color:#FFFFFF;
display:block;
margin:1px 4px;
padding:4px;
text-decoration:none;
}
#nav ul li a:hover {
-moz-border-radius:3px 3px 3px 3px;
background-color:#f5f8fa;color:#106b93;
margin:1px 4px;
padding:4px;
}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover {
-moz-border-radius:3px 3px 3px 3px;
background-color:#f5f8fa;color:#106b93;
margin:1px 3px;
padding:4px;
}
3. Lalu cari kode </header> dan tempatkan kode HTML di bawah sebelum kode itu (atas kode </header>), silakan copy
<!--Menu horizontal dx-->
<div id='nav'>
<ul id='nav-left'>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li><a href='#'>Daftar Isi</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul></div>
4. Save template. dan lihat hasilnya.
Catatan:
- Warna pink adalah fungsi pembentukan garis lengkung pada border. Jika tidak suka silakan hapus.
- Warna biru adalah warna background dan warna huruf, silakan Anda sesuaikan dengan template Anda.
- Warna merah adalah tinggi menu.
- Warna Hijau adalah jarak antar margin . Menu dengan Header
- Selebihnya untuk kode CSS silakan coba sendiri. OK
- Tulisan Beranda, Daftar isi, Menu 3 dst. Merupakan nama menu yang tampil
- Tanda '#' sialakan isi dengan alamat URL tujuan.
- Apabila ingin menambahkan menu tinggal menambah yang bercetak tebal warna kuning.
