Cara Membuat Rolling Menu Mirip Goyang Inul di Blog


Kancil-Sharing : Cara membuat rolling menu mirip goyang Inul - Kagi ini mau berbagi dikit mengenai pembuatan menu di blog. Menu merupakan salah satu bagian vital pada sebuah blog, kenapa? karena dengan adanya menu di blog, pengunjung dapat mengetahui isi dari blog kita, info dari penulis blog tersebut, dll. Berbagai model menu pun sudah menjamur, sehingga sobat blogger nggak usah bingung-bingung buat bikin yang namanya menu. Nah kali ini KS mau share tentang rolling menu mirip goyang Inul. Wah kenapa nih kok pake goyang Inul segala??? hehehe.. iya soalnya saat kursor kita nyentuh menu itu maka ikon pada menu tersebut akan berputar-putar layaknya goyang si Inul, hehehe.... Ini nih previewnya :


Gimana mau terapin di blog kalian??? simak langkah-langkah berikut :

  • Login terlebih dahulu ke akun blogger sobat,, kalo udah ya langsung ke step 2
  • Pilih tab Template --> edit HTML --> Proceed --> beri tanda centang pada Expand Widget Template
  • Cari kode </head>, 'gunakan kombinasi tombol Ctrl+F untuk memudahkan pencarian.
  • Copy kode di bawah ini dan letakkan di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://kc-kumpulancara.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'></script> 
<script src='http://kc-kumpulancara.googlecode.com/files/jquery-css-transform.js' type='text/javascript'></script>

  • Selanjutnya copy kode di bawah ini dan letakkan di atas kode ]]></b:skin>
#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;
-webkit-border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px; 
-webkit-box-shadow:1px 1px 3px #555;
-moz-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; 
-webkit-box-shadow:none; 
-moz-box-shadow:none; 
box-shadow:none; 
}

  • Setelah proses tersebut selesai, Simpan template sobat.
Eitss... jangan preview dulu karena ada proses tambahan lagi....
  • Pindah ke tab Tata Letak
  • Pilih Add Gadget --> HTML/Javascript, maka akan muncul jendela baru HTML/Javascript
  • Copy kode di bawah ini dan letakkan di jendela HTML/Javascript yang muncul tadi
<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>

  • Silahkan ganti nama menu di atas sesuai dengan keinginan sobat
  • Kalo udah ya tinggal di-Save dan lihat hasilnya
Note : 
sobat bisa ganti ikon di menu tersebut dengan gambar yang sobat inginkan, caranya mengganti url yang berwarna kuning dengan url gambar yang sobat inginkan.

Oke... tutorial cara membuat rolling menu mirip goyang Inul di blog cukup sampai di sini. Semoga bermanfaat dan sampai jumpa di post selanjutnya.

Tidak ada komentar:

Diberdayakan oleh Blogger.