Cara membuat menu berputar-putar

Posted by : ahman " creativ" Sabtu, 06 Oktober 2012

Kali ini saya akan share sesuatu yang berputar-putar.. ini juga ada hubungannya dengan postingan saya yang berjudul Cara membuat gambar berputar ketika disentuh cursor

Untuk Demonya trik ini, Lihat saja menu melayang saya diatas, jika disorot cursor, maka akan berputar-putar..

Berikut langkah - langkahnya
1. Login ke Akun Blogger anda masing-masing
2. Klik Rancangan
3. Pilih Edit HTML lalu Centang Expand Widget
4. Cari kode : <div id='outer-wrapper'>
5. Copy kode berikut ini, lalu paste kode berikut ini di bawah kode tadi

<style type='text/css'>#menuputar:hover{-o-transform: scale(1.2) rotate(360deg) translate(0px);-moz-transform: scale(1.2) rotate(360deg) translate(0px);-webkit-transform: scale(1.2) rotate(360deg) translate(0px);-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}#menuputar{-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}#menubar {position: fixed;top:0px;z-index: 1000;background:-moz-linear-gradient(top,#14710A,#000);background: -webkit-gradient(linear, left top, left bottom, from(#14710A), to(#000));box-shadow:-2px -2px 8px #14710A, 2px 2px 20px #14710A;-moz-box-shadow:-2px -2px 8px #14710A, 2px 2px 20px #14710A;-webkit-box-shadow:-2px -2px 8px #14710A, 2px 2px 20px #14710A;-moz-border-radius:5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;width:988px;margin: 0;padding: 0;height:30px;}#menu {width:5000px;height:30px;position:relative}#menu ul {padding:0;margin:0;list-style:none;position:absolute;left:0;top:0;width:5000px;height:30px;z-index:10}#menu ul li {float:left;padding-bottom:4px}#menu ul li#li1 {padding:0}#menu li a {display:block;text-transform:capitalize;height:20px;float:left;color:#fff;text-decoration:none;line-height:20px;padding:0 10px;font-family:kristen itc;font-size:13px;border-right:1px solid #14710A;margin:3px 0 0;}#menu li a:hover {color:#14710A;white-space:nowrap;}#menu li a.current {color:#ffffff;}#menu li a:hover.current {color:#ffffff;}#menu li a:hover b {display:block;width:988px;height:30px;position:absolute;left:0; top:0;z-index:-1;-moz-border-radius:5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;}#menu li#li1 a:hover b {background: #D11717 -moz-linear-gradient(top,#000,#D11717);background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#D11717));}#menu li#li2 a:hover b {background-image: -moz-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 50px, rgb(255,0,0) 100px);background: -o-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 50px, rgb(255,0,0) 100px);background: -webkit-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 50px, rgb(255,0,0) 100px);}#menu li#li3 a:hover b {background: -moz-linear-gradient(top,#AF0000,#6B0000);background: -webkit-gradient(linear, left top, left bottom, from(#AF0000), to(#6B0000));}#menu li#li4 a:hover b {background: #D11717 -moz-linear-gradient(top,#D11717,#000);background: -webkit-gradient(linear, left top, left bottom, from(#D11717), to(#000));}#menu li#li5 a:hover b {background:-moz-linear-gradient(top,#001C5A,#000);background: -webkit-gradient(linear, left top, left bottom, from(#001C5A), to(#000));}#menu li#li6 a:hover b {background: #244007 -moz-linear-gradient(top,#244007,#000);background: -webkit-gradient(linear, left top, left bottom, from(#244007), to(#000));}#menu li#li7 a:hover b {background: #51A104 -moz-linear-gradient(top,#51A104,#000);background: -webkit-gradient(linear, left top, left bottom, from(#51A104), to(#000));}#menu li#li9 a:hover b {background:-moz-linear-gradient(top,#029BC5,#000);background: -webkit-gradient(linear, left top, left bottom, from(#029BC5), to(#000));}#menu li#li8 a:hover b {background: #40071F -moz-linear-gradient(top,#40071F,#000);background: -webkit-gradient(linear, left top, left bottom, from(#40071F), to(#000));}</style>
<div id='menubar'><div id='menu'><ul><li id='li7'><a href='Url tujuan anda'><b/>Menu1</a></li><li id=' menuputar '><a href='Url tujuan anda'><b/>Menu2</a></li><li id=' menuputar '><a href='Url tujuan anda'><b/>Menu3</a></li>
<li id=' menuputar '><a href='Url tujuan anda'><b/>Menu4</a></li>
<li id= menuputar '><a href='Url tujuan anda'><b/>Menu5</a></li>
<li id=' menuputar' ><a href='Url tujuan anda'><b/>Menu6</a></li>
<li id=' menuputar '><a href='Url tujuan anda'><b/>Menu7</a></li>
</ul></div></div>

6. Klik Save Template

Tambahan :
Untuk Kode Berwarna Merah, Ganti dengan URL tujuan yang anda inginkan
Untuk Kode Berwarna Hijau, Ganti dengan Nama menu yang anda inginkan