Senin, 30 Juli 2012

You are here : Home » TAMPILAN SIDE BAR » Membuat Menu di Side Bar

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

1 komentar: