Cara membuat menu sidebar atau sidebar navigation

Masih dengan artikel tutorial. yaitu membuat menu di sidebar atau kata lain sidebar navigation. ini sebenar nya sama dengan artikel Panduan sukses blogger sebelumnya cara menambah menu bar di blog. cuman yang berbeda disini. tata letaknya. dimana menubar terletak di antara header dan content blog, kalau sidebar menu atau sidebar navigation ini terletak di sidebar blog yang nggak asing dari namanya.

Nah untuk membuat ini sangat lah mudah. anda cukup menambah kan kode CSS dan id pemanggilannya ke dalam tamplate yang anda punya. bagi anda yang ingin menggunakan tutor ini atau sekadar mencoba nya. silahkan ikuti langkah-langkah yang akan saya bahas dibawah ini.

Berikut langkah-langkah cara menambah menu sidebar atau sidebar navigation untuk blog anda:

·         Login terlebih dahulu ke blogger

·         Rancangan

·         Edit HTML

·         Cari kode ]]></b:skin>

·         Kemudian letakkan kode di bawah ini di atas kode ]]></b:skin>

enav {

float: left;

margin: 2px 0 0;

padding: 0;

width: 280px;

list-style: none;

border-bottom: 1px solid #3373a9;

border-top: 1px solid #003867;

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: #fff;

padding: 7px 7px 7px 25px;

text-decoration: none;

width: 250px;

background: #005094;

position: relative;

z-index: 2;

}

ul.sidenav li a:hover {

background-color: #004c8d;

border-top: 1px solid #1a4c76;

}

Setelah itu letakkan kode di bawah ini setelah kode ]]></b:skin>

]]></b:skin>

<script type='text/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>

Kalau sudah simpan tamplate anda.

Langkah berikutnya untuk memanggil kode CSS di atas kita masuk ke Tata Letak

Elemen laman , Pilih Tambah gadget

Pilih HTML/JavaScript dan copy paste kode di bawah ini ke dalam nya

<ul class='sidenav'>

<li> <a href='#'>Home</a> </li>

<li> <a href='#'>About Us</a> </li>

<li> <a href='#'>Portfolio</a> </li>

<li> <a href='#'>Blog</a> </li>

<li> <a href='#'>Testimonials</a> </li>

<li> <a href='#'>Contact</a> </li>

</ul>

Untuk tulisan yang berwarna merah silahkan ganti dengan alamat Url dan nama yang anda ingin kan

Kemudian simpan.

Selamat mencoba........