Membuat Menu halikopter

Assalamualaikum ....
siang ini pengen share lagi neh. knapa saya harus share , karna share itu sexy tapi bingung mau kasih judul apa yah ??? ... berhubung ini untuk menu, dan menunnya muter muter ketika di sorot mos, saya namakan menu helikopter aja dah
Lihat dimana kang demonya ??

demo Bisa dilihat DISINI
trus gimana kan cara buat menu helikopternya ??

Berikut langkah - langkah nya
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : <div id='outer-wrapper'>
5. paste kode di bawah ini di bawahnnya

kode: 

<style type='text/css'>#japarusimgfb: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;}
#japarusimgfb{-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='http://www.japarus.com'><b/>Home</a></li>
<li id='japarusimgfb'><a href='http://www.japarus.com/search/label/facebook'><b/>tips facebook</a></li>
<li id='japarusimgfb'><a href='http://www.japarus.com/search/label/jQuery'><b/>jQuery</a></li>
<li id='japarusimgfb'><a href='http://www.japarus.com/search/label/software'><b/>software</a></li>
<li id='japarusimgfb'><a href='http://www.japarus.com/search/label/tips%20blogspot'><b/>tips blogspot</a></li>
<li id='japarusimgfb'><a href='http://www.japarus.com/search/label/tips%20n%20trik'><b/>tips n trik</a></li>
<li id='japarusimgfb'><a href='http://www.japarus.com/search/label/hacking'><b/>hacking</a></li>
<li id='japarusimgfb'><a href='http://japarus.com/2011/04/kode-warna-html-bagian-2.html'><b/>Kode Warna</a></li>
<li id='japarusimgfb'><a href='http://www.japarus.com/search/label/coretanku'><b/>coretanku</a></li>
<li id='japarusimgfb'><a href='http://www.japarus.com/search/label/Dong%20Yi'><b/>drama korea</a></li>
<li id='japarusimgfb'><a href='http://japarus.com/2011/05/daftar-isi-blog-lengkap.html'><b/>daftar isi</a></li>
</ul>
</div>
</div>

kemudian simpan

NB: ganti URL dan nama tujuan URL dengan punya mas bro

Membuat Menu halikopter 10out of 10 based on 99989 ratings. 10 user reviews.

Share This Article :

Posted by : Hasan

Sabtu, 05 Mei 2012