Mebuat Menu Horizontal

Membuat menu horizontal seperti milik saya yang bertengger tulisan " Award 10 plus backlink " dan belum saya tambahkan menunya, lantaran saya juga bingung mau menambahkan link apa selanjunya ,..
Tapi sedikit punya usul,bagaimana apabila anda meluangkan waktu unutk membuat posting award ke-11 plus backlink di blog anda. knp 11 ?

karna award yang ke -10 nya adalah saya ,,he2,,

Walah,,..sepertinya obrolan kita sudah keluar jalur nie !!! kalau begitu mari saya ajak anda ke topik pembicara kita mengenai cara membuat menu horizontal. Yuk mari ikuti langkah dibawah ini...silahkan,,,monggo mas

1. Masuklah kehalaman Dashboard > Tata Letak > Edit HTML.

2. Copy code dibawah ini dan letakan tepat di atas kode ]]></b:skin>

.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;
}

3. Jika sudah, carilah lagi kode berikut ini. namun ingat bahwa kode yang saya miliki dengan kode milik anda mungkin sedikit berbeda. yang penting carilah kode yang dicetak tebal saja !

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tutorial, Tips dan Trik (Header)' type='Header'/>
</b:section>
</div>

4. Jika sudah ketemu, copy kode berikut tepat di bawah kode diatas.

<div id='footheader'>

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

</b:section>

</div>

Jadi, Susunannya seperti ini :

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tutorial, Tips dan Trik (Header)' type='Header'/>
</b:section>
</div>

<div id='footheader'>

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

</b:section>

</div>

5. Lalu klik Simpan Template.

6. langkah selanjutnya adalah klik Elemen Halaman. Lihatlah sekarang telah ditambahakan widget baru tepat di bawah header anda. klik saja Add widget > pilih HTML/Javascript. klik tanda plusnya (+)

7. Lalu copy kode berikut kedalam add widget HTML/Javascript yang baru saja anda lakukan.

<div class='menuhorisontal'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://Tulislah alamat disini'>Nama Tombol</a></li>
<li><a href='http://Tulislah Alamat Disini'>Nama Tombol</a></li>

<li><a href='http://Tulislah Alamat Disini'>Nama Tombol</a></li>

</ul>
</div>

8. Jangan lupa gantilah kode ' Tulis alamat Disini ' dan sesuaikan dengan alamat link yang anda inginkan dan ganti juga ' Nama Tombol ' menjadi nama yang anda inginkan. untuk ' Home ' <a href='masukan alamat halaman utama blog anda'>Home</a></li> ! Jika anda menggunakan persis seperti kode diatas, maka akan dibutakan 4 tombol menu.

9. Apabila anda ingin menambahkan tombol menu lagi cukup ketik kode yang berwarna merah saja .

10.  Simpan dan lihatlah hasilnya.


Selamat mencoba ,,