Cara Ini saya dapat dari salah satu blog, gak sengaja surfing di google, eh tau nya dapat begituan, hehhehe karena menurut saya keren, maka saya posting, kali aja bermanfaat bagi Sobat TKJ Comunity :)
jika Penasaran dengan Menu nya, ini dia menunya
jika Penasaran dengan Menu nya, ini dia menunya
cara membuat nya :
1. Login Ke blogger,
2. lalu masuk ke Edit HTML, cari code </head> dan copy code di bawah ini dan letakkan di atas code </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
jika code Jquery 1.3.2 sudah ada maka tidak perlu lagi paste code jquery 1.3.2 nya, yang anda lakukan adalah letakkan kode dibawah ini sesudah atau tepat dibawah
kode JQuery 1.3.2 tadi. jadi Scrip nya menjadi
ingat warna merah itu jangan ikut di copy ya klw uda ada :) itu scrip jQuery 1.3.2 nya... :)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script src='http://raihanun.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/>
<script src='http://raihanun.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/>
3. Selanjutnya copy kode CSS dibawah ini dan paste tepat 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;
-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;
}
4. Terakhir adalah tag HTML untuk memanggil menu navigasi Rocking Rolling Rounded nya, ini bisa di letakkan di mana saja, di gedget, di body, di Edit HTML boleh terserah kamu saja
jika Ingin membuat di bawah, maka letakkan di atas code </body> terserah kamu saja mau letakkan di mana
<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>
5. Silahkan diedit JUDUL MENU, NAMA MENU sesuai keinginan anda, lalu Save Template
