Hai sobat blogger sekalian, pada postingan kali ini saya akan berbagi informasi cara mempercantik desain blog anda dengan menampilkan Menu Sisi dengan Jquery. Mungkin postingan ini menjadi jawaban bagi sobat sekalian yang pernah melihat blog teman atau orang lain yang menampilkan animasi seperti ini. Bagi para blogger yang sudah menguasai atau pernah belajar CSS dan Jquery mengedit blog menjadi lebih dinamis tentunya bukan perkara sulit, jadi disini saya tidak bermaksud menggurui hanya membantu para blogger baru yang tidak mengerti dan mempunyai rasa ingin tahu yang kuat sehingga diharapkan kedepannya dapat berbagi juga kalo mempunyai tips dan trik berharga mengenai blog. Dulu saya pernah mencari d google bagaimana sih membuat animasi ini, namun tidak kunjung ditemukan caranya, sehingga kemudian saya mempelajari Jquery lebih dalam dan akhirnya berhasil membuatnya sendiri, Alhamdulillah :D. Tidak berlama-lama lagi, langsung saja kita mulai tutorialnya :

1. Sign in pada account blogger sobat>>> pada dasbor>>> Klik Template>>> Edit HTML.

2. Tekan Ctrl+F kemudian cari kode </head>.

3. Tambahkan Script JQuery berikut sebelum tag atau kode </head> tersebut.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>

catatan: Bagi sobat yang pernah menambahkan atau ditemplate sobat sudah terdapat script JQuery maka langkah ke-3 abaikan saja.

4. Kemudian tambahkan pula script berikut dibawah script JQuery tadi.

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type='text/javascript'>
$(function() {
$(&#39;#menusisi a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-50px&#39;},1000);
$(&#39;#menusisi &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-50px&#39;},200);
}
);
});
</script>

5. Tekan Ctrl+F lagi kemudian cari kode </body>.

6. Tambahkan Script JQuery berikut sebelum tag atau kode </body> tersebut.

<ul id='menusisi'>
<li class='beranda'><a href='YOUR LINK HERE' title='Beranda'/></li>
<li class='tentang'><a href='YOUR LINK HERE' title='Tentang'/></li>
<li class='cari'><a href='YOUR LINK HERE' title='Cari'/></li>
<li class='alat'><a href='YOUR LINK HERE' title='Alat'/></li>
<li class='rssfeed'><a href='YOUR LINK HERE' title='RSS Feed'/></li>
<li class='komentar'><a href='YOUR LINK HERE' title='Komentar'/></li>
<li class='kontak'><a href='YOUR LINK HERE' title='Kontak'/></li>
</ul>

6. Selesai.

Semoga bermanfaat ya sobat blogger sekalian :) jangan lupa follow blog saya, beri komentar sebagai masukan, dan tunggu  postingan tentang tutorial menghias blog dengan jquery berikutnya. 

Indahnya berbagi ilmu ;)

Lihat live demo di samping kiri tampilan blog saya ini. Oke, selamat mencoba !! :D, mohon maaf akan segala kekurangannya, kesalahan adalah milik kita, dan kesempurnaan hanya milik Allah SWT.