Cara membuat menu secara horizontal.

Posting ini saya tulis untuk sahabat yang bernama Abdul Aziz (SK Bagan Terap). Beliau ada bertanyakan tentang cara membuat menu horizontal di dalam blog seperti gambar di sebelah. Sebenarnya saya bukanlah mahir sangat tentang benda ni semua. Apa yang saya ada hanyalah sedikit ilmu yang mungkin boleh kita kongsikan bersama. Untuk sahabatku Ajiss..., selamat menggodak blog anda. Hu..hu..hu...

1. Login ke blogger pilih "Layout-->Edit HTML"
2. Masukkan kod berikut sebelum kod
</head>

<script src='http://blog.superinhost.com/vertical/verticalmenu.js' type='text/javascript'/>

3. Setelah itu masukkan kod berikut sebelum kod ]]></b:skin>

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: blue url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: red;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: red;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

4. Kemudian save template.
5. Pergi ke menu "Page Elements"
6. Pilih "Add a Gadget -->HTML/JavaScript" kemudian copy dan paste kod berikut ke dalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="http://www.blogger.com/">Home</a></li>
<li><a href="http://skserimawar.blogspot.com/">Halaman Utama</a></li>
<li><a href="http://cikguanaiz.blogspot.com/2009/08/sign-in-di-blogger-klik-menu-layout.html">Trick Blog</a></li>
<li><a href="http://cikguanaiz.blogspot.com/">Cikgu Anaiz</a></li>

</ul>

Kod yang berwarna hijau adalah linknya dan yang warna biru adalah teks yang dipaparkan. Sekiranya ingin menambah menu, copy dan paste sahaja html tersebut.

Contohnya, <li><a href="http://link anda">Menu yang hendak dipaparkan</a></li>

Jangan lupa tukarkan link dan teks yang hendak dipaparkan.

Selamat mencuba.