Cara Membuat Menu Horizontal dengan CSS dan HTML di blogger

Masih seputar menu yang Mas Viki dulu pernah share Cara Paling Mudah Buat Menu Navigasi Dropdown dan sekarang Mas Viki juga share lagi tentang menu yang kayaknya lebih keren,lihat aja judulnya
Cara Membuat Menu Horizontal dengan CSS dan HTML di blogger
Menu Horizontal adalah menu yang mendatar seperti halnya milik Mas Viki di atas (kalo belum di hapus,sebab Mas Viki sukanya utak atik blog sampai-sampai amburadul semua,lihat aja kayak gini jadinya..hixhixhixxxx....)sengaja Mas Viki tidak memberi demo gambarnya karena untuk meringankan blog agar lebih seo and Naikkan pagerank yang dari dulu masih nol aja.

Perlu sobat ketahui keunggulan menu css adalah tidak terlalu membuat berat loading blog,berbeda dengan menu yang menggunakan kode javascript meski lebih keren dan cantik akan tetapi membuat loading blog lebih berat.

Langkah Membuat Menu Horizontal dengan CSS dan HTML

1.Login Blogger.com
2.Rancangan --> Edit HTML
3.Download template lengkap untuk keamanan bila terjadi kesalahan edit
4.Centang kotak Expand Template Widget untuk menampilkan semua kode template
5.Cari kode ]]></b:skin>
Dan masukkan kode css dibawah ini tepat diatas kode tadi

/* 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.Selanjutnya kita terapkan kode HTML nya.

Cari kode seperti ini <div id='content-wrapper'>
atau kode seperti ini <div id='outer-wrapper'>

karena setiap template berbeda-beda jadi sobat sesuaikan aja untuk mencari kodenya,
kalo sudah ketemu letakkan kode dibawah ini tepat di atasnya

<div id='menu'>

<ul id='pagenav'>

<li><a href='http://vikitctc.blogspot.com/' title='Home'>Home</a></li>

<li><a href='http://vikitctc.blogspot.com/' title='About'>About</a></li>

<li><a href='http://vikitctc.blogspot.com/' title='Contact'>Contact</a></li>

<li><a href='http://vikitctc.blogspot.com/' title='Link'>Link</a></li>

<li><a href='http://vikitctc.blogspot.com/' title='Archive'>Archive</a></li>

<li><a href='http://vikitctc.blogspot.com/' title='Privacy Policy'>Privacy Policy</a></li>

<li><a href='http://vikitctc.blogspot.com/' target='_blank' title='Aggregator'>Aggregator</a></li>

<li><a href='http://vikitctc.blogspot.com/' title='Bottom'>Bottom</a></li>

</ul>

</div>

7.Save template sobat dan blablabla Menu Horizontal dengan CSS dan HTML nya udah jadi.

Kalau mau mengubah warna,lebar,tinggi dan font stylenya silahkan sobat ubah kode cssnya ini

font-family: Arial, "Trebuchet MS", Verdana, Tahoma;

width: 988px;

height: 28px;

background: #eee;

Semoga Bermanfaat teman

Semoga artikel Cara Membuat Menu Horizontal dengan CSS dan HTML di blogger bermanfaat bagi Anda.