Cara Membuat Menu Horizontal di Blogger Dengan CSS dan HTML
Oleh Niammuddin Mz, Pada March 17th, 2013Langkah1
Masuk dasboard >> tataletak >> edit HTML
Langkah2
{code type=xml}
Cari kode seperti ini : ]]>
{/code}
Dan masukkan kode css dibawah ini tepat diatas kode tadi
{code type=css}
/* css menu */
#menu {
font-family: Arial, “Trebuchet MS”, Verdana, Tahoma;
width: 988px;
height: 28px;
background: #eee;
}
#pagenav {
display: block;
font-weight: bold;
font-size:11px;
color: #fff;
margin: 0 0 5px 0;
padding: 0 0 0 10px;
height: 28px;
line-height: 28px;
list-style-type: none;
position: relative;
}
#pagenav li {
float: left;
color:#ffffff;
}
#pagenav li a {
height:20px;
line-height:20px;
font-size:10px;
font-weight:bold;
padding: 0 6px 0 6px;
text-transform:uppercase;
}
#pagenav .current_page_item a {
color:#FFF;
}
#pagenav .current_page_item a:hover {
color:#FFF;
}
{/code}
Langka3
Sekarang tahap menerapkan kode htmlnya.
{code type=html}
cari kode seperti ini:
setiap template berbeda-beda kodenya, jadi kamu sesuaikan sendiri.
Lalu masukkan kode dibawah ini tepat di atasnya
{code type=html}
{/code}
Langkah4
Save template sobat dan lihat hasilnya.
Untuk warna dan lebar tinggi dan font stylenya silahkan ubah kode cssnya ini
{code type=html}
font-family: Arial, “Trebuchet MS”, Verdana, Tahoma;
width: 988px;
height: 28px;
background: #eee;
{/code}
Sesuai template blog kamu supaya lebih serasi dan halus.
untuk linknya silahkan ganti link : / dengan link kamu sendiri, dan juga text anchornya. seperti home, about, contact.
Selamat mencoba dan semoga berhasil.


