Membuat menu halaman horizontal

Selain link dan banner yang membuat blog menarik di pandang, menu horisontal juga tidak kalah menarik untuk menjadi hiasan di blog Anda karena saya kira bentuknya Menarik dan elegan. Nah jkia Anda juga belum faham mengenai menu horisontal seo tutorial akan kasih contah yang di maksud menu horizontal, lihat dibawah:


Nah bagi yang blognya belum ada menu seperti ini silakan dibuat kalo tertarik, nih cara-caranya :

Langkah pertama yaitu log in ke blogger lalu masuk menu Layout kemudian masuk menu Edit HTML

Lalu taruh code dibawah diatas Code: ]]></b:skin> pokoknya di barisan CSS pada Blog Anda

.menuhorisontal{
width: 100%;
overflow: hidden;
border-bottom: 1px solid #000000;
}

.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 10px;
font: bold 12px Verdana;
list-style-type: none;
}

.menuhorisontal li{
display: inline;
margin: 0;
}

.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
border-right: 1px solid white;
color: white;
background: #414141; /*background dari Tabel*/
}

.menuhorisontal li a:visited{
color: white;
}

.menuhorisontal li a:hover, .menuhorisontal li.selected a{background:#002EB8; /*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}

Kalau sudah cari kode Dibawah ini:
<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section></div>


Code diatas Di Blog kamu berdeda-beda pokoknya kamu perhatikan Code yang berwarna hijau saja dan taruh Code dibawah ini tepat dibawah Code Diatas itu.

<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>

Kemudian Simpan.
Langkah kita belum selesai mari kita beranjak ke menu Layout
Nah dibawah Header pasti sudah ada tempat widget/gadget,



kemudian klik Add A Gadget kemudian pilih HTML/JavaScript.. Lalu taruh Code dibawah ini:

<div class='menuhorisontal'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://lerry060183.wordpress.com/'>Lerry060183</a></li>
<li><a href='http://ilmu-belajar-komputer.blogspot.com/'>Tutorial Komputer</a></li>
<li><a href='http://artis-indo-hot.blogspot.com/'>Berita Artis Indonesia</a></li>
</ul>
</div>

Nah selesai deh..