Membuat Menu di Side Bar

Agan bosan dengan menu di bawah header ??
Dan ingin membuat menu di side bar ??

1. Masuk dulu ke Template. Pilih Edit HTML.
__Klik Lanjutkan. Tidak usah centang expand template widget.

2. Carilah kode ini ]]></b:skin>
__Gunakan CTRL F untuk memudahkan pencarian.

3. Lalu masukkan kode berikut di atas kode ]]></b:skin> tadi.

ul.sidenav {
float: left;
margin: 2px 0 0;
padding: 0;
width: 240px;
list-style: none;
border-bottom: 0px solid #ffffff;
border-top: 0px solid #ffffff;
font-size: 1.2em;
}
ul.sidenav li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
ul.sidenav li a{
border-top: 1px solid #3373a9;
border-bottom: 1px solid #003867;
display: block;
color: #daa91b;
padding: 7px 7px 7px 25px;
text-decoration: none;
width: 240px;
background: #000000;
position: relative;
z-index: 2;
}
ul.sidenav li a:hover {
background-color: #004c8d;
border-top: 1px solid #1a4c76;}

Perhatikan :

Angka 240 adalah ukuran lebar. Sesuaikan nanti.

Kode color: #daa91b; adalah kode untuk warna teks.

Kode background: #000000; adalah kode warna kolomnya.

4. Masukkan lagi kode berikut di bawah kode ]]></b:skin>.

<script type='text/javascript'>
 /* Visit http://ketagihanbaca.blogspot.com/ for full more free JavaScript ! */
$(document).ready(function(){ $(&quot;ul.sidenav li&quot;).hover(function() { $(this).find(&quot;div&quot;).stop() .animate({left: &quot;210&quot;, opacity:1}, &quot;fast&quot;) .css(&quot;display&quot;,&quot;block&quot;)
}, function() { $(this).find(&quot;div&quot;).stop() .animate({left: &quot;0&quot;, opacity: 0}, &quot;fast&quot;)
});
});
</script>

5. Jadi susunannya seperti ini. Lihat baik-baik.

di sini kode langkah no.3
]]></b:skin>

di sini kode langkah no. 4.

6  Klik Simpan.

7. Kini masuklah ke Tata Letak, buka salah satu kolom side bar.

8. Lalu pilih HTML/Javascript.

9. Masukkan kode HTML/Javascriptnya berikut ini. Ganti kata link 1-6 dengan link yang di tuju, serta ganti kata Judul 1-6 dengan judul dari link tersebut.

<ul class='sidenav'>
<li> <a href='link 1'>Judul 1</a> </li>
<li> <a href='link 2'>Judul 2</a> </li>
<li> <a href='link 3'>Judul 3</a> </li>
<li> <a href='link 4'>Judul 4</a> </li>
<li> <a href='link 5'>Judul 5</a> </li>
<li> <a href='link 6'>Judul 6</a> </li>
</ul>

10. Klik Simpan. Dan lihat hasilnya