Membuat Menu Navigasi Horizontal

Sebelum ini saya mendapatkan pertanyaan dari seorang teman di facebook, bagaimana caranya supaya blog kita ada kamar-kamarnya. Saya mengerti, yang dia maksud adalah, bagaimana cara membuat menu navigasi di blog.

Menu navigasi itu terbagi dua: Menu horizontal/mendatar, dan menu vertikal/meninggi.
Sekarang cara membuat menu horizontal.
Tidak terlalu rumit.
1.  Masuk ke akun blogger
2.  Masuk menu template, lalu pilih edit HTML.
3. Pijit CTRL+F untuk mempercepat pencarian kode ini ]]></b:skin> lalu di atasnya, simpanlah kode di bawah ini:

#greenmenu { border: solid 1px #52e052; background:#64DAFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCH9rGw7_Eydua4j1LxNTMRM70mc04NSILOTLI6JrRBD2Cixcvz0rfQP_lntCUFnUWTpT9eW6c-Rjtxxkb8CDzUhSQPQSdfzvU6eChryGoXLN2WNG0ss2gAI26ofaNgamh0OwkCZU4sGw/h120/greenbg.gif) repeat-x; }
#menugreen{ font-size:0; } 
#menugreen ul, #menugreen li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }
#menugreen a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRDf7Ac-GJ8PFOMColPWLFz51jzoof1y0ZEq4Nm4vsJjvrCaM7ZpJ2WMslPFu0ocWSejj22q45f5dCgTu7Ru0naMALKAx8fMzgprIsbY_EQi00xVX483s9Etn9VYxhjdt-S9Oqa3qaAcQ/h108/green.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
#menugreen a:hover, #menugreen a.current{ background-position: 0% -60px; color: #fff; }
#menugreen a.end{ width:2px; padding-left:0;padding-right:0; }

4. Kemudian klik simpan template.
5. Langkah berikutnya, klik Tata Letak => Tambah Gadget => HTML Java Scipt => lalu Copas kode ini ke dalamnya.

<div id='greenmenu'>
<div id='menugreen'>
<ul>
<li><a expr:href='data:blog.homepageUrl' class='current'>Home</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 1</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 2</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 3</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 4</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 5</a></li>
<li><a class='end'>&nbsp;</a></li>
</ul>
</div>
</div>

6. Gantilah yang berwarna merah dengan link Anda, dan yang berwana biru dengan nama yang Anda inginkan.
7. Simpan. Bukalah blog, jika cara yang Anda lakukan benar, Anda akan melihat tab menu seperti ini: