Cara membuat menu horizontal di blogger

Kali ini saya akan menjelaskan tentang bagaimana cara membuat menu horizontal di blogger dengan sangat mudah kawan, dulu saya juga pernah membuat postingan tentang membuat menu tapi menu vertikal dengan icon bukan horizontal tempatnya disini kawan postingannya. Nah, sekarang kita akan belajar membuat menu yang horizontal kawan, caranya cukup mudah kok, sekarang dari pada berlama-lama di blog saya ini langsung saja kawan tinggal ikuti langkah-langkah di bawah ini.

Cara membuat menu horizontal di blogger

1. Login ke blogger 2. Pilih Rancangan
3. Klik Edit HTML
4. Centang Expand Template Widget
5. Taruh kode berikut diatas kode ]]></b:skin>

/* 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;
}

6. Jika sudah selesai, sekarang cari kode <div id='content-wrapper'> atau <div id='outer-wrapper'> dan copy kode di bawah ini diatas salah satu kode di atas

<div id='menu'>
<ul id='pagenav'>
<li><a href='http://rezazr.blogspot.com' title='Home'>Home</a></li>
<li><a href='http://www.blogger.com/profile/15950281676412082049' title='Profil'>Profil</a></li>
<li><a href='http://bloggertouch.appspot.com/rezazr' title='REZAZR Touch'> REZAZR Touch</a></li>
<li><a href='http://j-rocks.co.id' title='www.j-rocks.com'>www.j-rocks.com</a></li>
<li><a href='http://rezazr.blogspot.com' title='templates'>templates</a></li>
<li><a href='http://rezazr.blogspot.com/2011/04/chatting-room.html' title='Chatting Room'>Chatting Room</a></li>
<li><a href='http://rezazr.blogspot.com/2011/04/guest-book.html' target='_blank' title='Guest Book'>Guest Book</a></li>
<li><a href='http://rezazr.blogspot.com/search/label/Blogger' title='Tips Blogger'>Tips Blogger</a></li>
</ul>
</div>

7. Simpan jika sudah selesai

Catatan :

=> Tulisan yang berwarna merah biasa anda atur sendiri dan ganti sesuka hati

sumber:http://fadhilamadan.blogspot.com