Pastikan dalam template sobat sudah dilengkapi dengan JQuery 1.3.2 ya. Kalau belum pasang aja script dibawah ini dan letakkan diatas kode
Terakhir adalah tag HTML untuk memanggil menu navigasi Rocking Rolling Rounded yang dapat diletakkan dimana sobat menginginkan menu ini tampil, misalnya dibawah header atau di atas header. Posisi header dalam template biasanya ditandai dengan kode
<div id='rocking-rolling'>
<div class='item'>
<a class='link icon_mail'></a>
<div class='item_content'>
<h2>
KONTAK SAYA</h2>
<p>
<a href='
#'>
Email</a>
<a href='
#'>
Twitter</a>
<a href='
#'>
Facebook</a>
</p>
</div>
</div>
<div class='item'>
<a class='link icon_help'></a>
<div class='item_content'>
<h2>
BANTUAN</h2>
<p>
<a href='
#'>
Buku Tamu</a>
<a href='
#'>
Lapor</a>
<a href='#'>Kritik dan Saran</a>
</p>
</div>
</div>
<div class='item'>
<a class='link icon_find'></a>
<div class='item_content'>
<h2>
TELUSURI</h2>
<p>
<form expr:action='data:blog.homepageUrl + "search/"' method='get'><input name='q' type='text'/></form>
</p>
</div>
</div>
<div class='item'>
<a class='link icon_photos'></a>
<div class='item_content'>
<h2>
GALERI FOTO</h2>
<p>
<a href='
#'>
Kategori</a>
<a href='
#'>
Arsip</a>
<a href='#'>Daftar Isi</a>
</p>
</div>
</div>
<div class='item'>
<a class='link icon_home'></a>
<div class='item_content'>
<h2>
MULAI DARI SINI</h2>
<p>
<a href='
#'>
Pelayanan</a>
<a href='
#'>
Portfolio</a>
<a href='
#'>
Pembayaran</a>
</p>
</div>
</div>
<div style='clear:both;'></div>
</div>
<script type='text/javascript'> function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({width:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)}) </script>
sesuai keinginan sobat.
Save template anda.
