Cara Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3

Menambahkan Rocking Rolling Rounded Menu dengan JQuery dan CSS3 adalah salah satu cara untuk mepercantik menu navigasi pada blog kamu, dengan memasang jQuery ini maka akan mempermudah juga bagi para pengunjungmu untuk bisa memilih menu yang diinginkan. saya sendiri sebenarnya suka dengan menu ini dan setelah saya praktikkan scriptnya berjalan kok akan tetapi saya tak memasangnya di blog ini karena belum ada space-nya yang. Sama halnya dengan membuat daftar isi dengan jQuery Accordion widget ini tidak membuat jadi lelet. nah bagi kamu yang ingin memasangnya saya persilahkan saja kok.

Berikut asalah cara membuat Rolling Rounded Menu dengan JQuery dan CSS3.

1. Masuk ke akun blogger kalian terlebih dahulu
2. Pilih Rancangan > Edit HTML
3. Pastikan kalian memberikan centang pada Expand Template Widget
4. Cari kode </head>, gunakan bantuan CTRL+F untuk mempermudah pencarian.
5. Letakkan script JQuery di bawah ini tepat sebelum kode di atas

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

6. Letakkan script berikut persis di bawah script JQuery di atas

<script src='http://infonetmu.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/><script src='http://sabarmuanas.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/>

7. Cari kode ]]></b:skin> dengan bantuan CTRL+F.
8. Letakkan scrip CSS di bawah ini sebelum kode di atas ya.

#rocking-rolling{width:auto;height:52px;text-align:left;font-family:"Trebuchet MS",sans-serif;font-size:16px;font-style:normal;font-weight:bold;text-transform:uppercase;}#rocking-rolling h2,#rocking-rolling p, #rocking-rolling form{/* netralisasi tampilan elemen heading, paragraf dan formulir */margin:0 0 0 0;pading:0 0 0 0;border:none;background:transparent;}#rocking-rolling .item{position:relative;background-color:#f0f0f0;float:right;width:52px;margin:0px 5px; height:52px;border:2px solid #ddd;-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;-moz-box-shadow:1px 1px 3px #555;-webkit-box-shadow:1px 1px 3px #555;box-shadow:1px 1px 3px #555;cursor:pointer;overflow:hidden;}#rocking-rolling .link{left:2px; top:2px;position:absolute;width:48px;height:48px;}#rocking-rolling .icon_home{background:transparent url(http://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;}#rocking-rolling .icon_mail{background:transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;}#rocking-rolling .icon_help{background:transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;}#rocking-rolling .icon_find{background:transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;}#rocking-rolling .icon_photos{background:transparent url(http://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.png) no-repeat top left;}#rocking-rolling .item_content{position:absolute;height:52px;width:220px;overflow:hidden;left:56px;top:7px; background:transparent; display:none;}#rocking-rolling .item_content h2{color:#aaa;text-shadow:1px 1px 1px #fff;background-color:transparent;font-size:14px;}#rocking-rolling .item_content a{background-color:transparent;float:left;margin-right:7px;margin-top:3px;color:#bbb;text-shadow:1px 1px 1px #fff;text-decoration:none;font-size:12px;}#rocking-rolling .item_content a:hover{color:#0b965b;}
#rocking-rolling .item_content p{background-color:transparent;text-transform:none;font-weight:normal !important;display:none;}#rocking-rolling .item_content p input{border:1px solid #ccc;padding:1px;width:155px; float:left;margin-right:5px;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}

9. Nah, jika script JQuery dan CSS3nya sudah terpasang, maka kita tinggal memasukkan script HTMLnya. Silahkan cari script berikut :

<div id='header-wrapper'>

10. Letakkan script di bawah ini tepat setelah script pada nomor 9.

<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 + &quot;search/&quot;' 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>

11. Simpan


Catatan : Silahkan ganti text yang berwarna merah dengan judul dan warna biru untuk menu-menunya. Kemudain untuk tanda # adalah link URL yang akan kalian tuju nantinya.

Demikian dari saya semoga bermanfaat ya buat kawan-kawan semua.