Buat Animasi Menu Blogger

Home » Blogging » Buat Animasi Menu Blogger

   Menu animasi ini saya dapat dari jalan-jalan di google, dan pengen berbagi saja untuk pemilik blog lain yang mungkin masih pemula seperti saya, berminat untuk mempercantik blognya dengan menu animasi bergerak.

  Saya juga minta maaf karena tidak menampilkan sumbernya karena saya sudah lupa alamatnya.

 Langsung ke pokoknya, tampilan sebenarnya menu ini dahulunya kecil kotaknya dan pergerakannya juga berbeda lalu saya utak atik menjadi seperti ini, hampir mirip juga ama yang disebelah kiri blog ini.

English Post
Health
Self Improvement
Unbelieveable
Tips
Christian Articles
Psychology
Dating
Motivation
Men Issue
Relationship
S.U.V
Tutorial

Menu ini kalo dipasang jadi widget vertikal akan bersusun satu per satu contohnya pada sebelah kiri blog saya.
Langsung kodenya berikut:








<style type="text/css">
.menuqu ul li{list-style: none; display: inline;}
.menuqu1 { padding: 10px 3.3em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 5px solid #fff;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-0deg);-moz-transform:rotate(-0deg);-o-transform:rotate(-0deg);
}
.menuqu2 { padding: 10px 3.3em; text-decoration: none; float: left; color: black; background: #808080; border: 5px solid #fff;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);
}
.menuqu1:hover, .menuqu2:hover{ background: #778899; color:#ccc;
-webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg)
}
</style>

<div class="menuqu">
<ul><div style="font-family: 'Comic sans ms', 'Comic sans ms'; font-size: 18px; line-height: 16px; text-align: center; font-color: #FF0000">



<li class="menuqu1"><a href='http://makantudosa.blogspot.com/search/label/english%20post?&max-results=7'>English Post</a></li>


<li class="menuqu2"><a href='http://makantudosa.blogspot.com/search/label/health?&max-results=7'>Health</a></li>


<li class="menuqu1"><a href='http://makantudosa.blogspot.com/search/label/self%20improvement?&max-results=7'>Self Improvement</a></li>


<li class="menuqu1"><a href='http://makantudosa.blogspot.com/search/label/unbelieveable?&max-results=7'>Unbelieveable</a></li>


<li class="menuqu2"><a href='http://makantudosa.blogspot.com/search/label/tips?&max-results=7'>Tips</a></li>


<li class="menuqu1"><a href='http://makantudosa.blogspot.com/search/label/christian%20articles?&max-results=7'>Christian Articles</a></li>


<li class="menuqu2"><a href='http://makantudosa.blogspot.com/search/label/psychology?&max-results=7'>Psychology</a></li>


<li class="menuqu2"><a href='http://makantudosa.blogspot.com/search/label/dating?&max-results=7'>Dating</a></li>


<li class="menuqu1"><a href='http://makantudosa.blogspot.com/search/label/motivation?&max-results=7'>Motivation</a></li>


<li class="menuqu2"><a href='http://makantudosa.blogspot.com/search/label/men%20issue?&max-results=7'>Men Issue</a></li>



</div></ul>
</div>




Keterangan nya:

• Kalo padding yang warna merah tuh ukuran lebar kotak nya bisa diganti dengan angka sesukanya. Trus yang warna biru sesudah padding itu ukuran panjang kotak nya.
• Ada dua macam kotak. menuqu1 ama yang kedua.
• Kalo jarak masing masing kotak bisa diatur mungkin pada angka border.
• Kalo yang ijo ijo itu adalah kode latar belakang
• Kalo angka 0.5 itu waktu pergerakannya.
• Kalo warna ungu tuh kode warna ama angka pengaturan derajat perputarannya kalo di sentuh.
• Sesudah warna ungu ada angka rotasi perputarannya kalo disentuh.
• Trus disitu ada kode bentul  tulisan comic sans nya bisa diganti dengan yang anda inginkan.
• Bagian Akhir  Kuning kuning itu diganti ama alamat anda.

Tinggal ditambah di Page Elementnya. Mungkin apabila ada saran menu manimasi yang lain ato tambahan supaya lebih keren, kalo bisa di share disini. THnks......