Membuat menu animasi CSS3 di blogger

Yang perlu disiapkan adalah kode CSS3 dan HTML seperti di bawah ini.

<style type="text/css">
.menuqu ul li{display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff; list-style: none;
-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(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #BFDCFF; border: 2px solid #fff; list-style: none;
-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(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu1:hover, .menuqu2:hover{ background: #F0BFFF; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
</style>

<div class="menuqu">
<ul>
<li class="menuqu1"><a href='http://www.androidevsrom.blogspot.com'>Home</a></li>
<li class="menuqu2"><a href='URL 1'>Menu1</a></li>
<li class="menuqu1"><a href='URL 2'>Menu2</a></li>
<li class="menuqu1"><a href='URL 3'>Menu3</a></li>
<li class="menuqu2"><a href='URL 4'>Menu4</a></li>
<li class="menuqu1"><a href='URL 5'>Menu5</a></li>
</ul>
</div>

Langsung saja copy kode diatas di add widget blogger anda.

Yang perlu diperhatikan dari kode diatas adalah kode yang berwarna merah, dan angka yang ada di antaranya.

• angka 0.5s disini menandakan waktu perubahan dari animasi
• angka 25deg disini menandakan rotasi perputaran dari area menu
• angka 0deg disini menandakan bentuk akhir dari rotasi perputaran dari area menu
• untuk huruf menuqu1 dan menuqu2 merupakan kode untuk kondisi dari properti yang telah di tentukan pada kode CSS3-nya
  

Untuk melihat hasil dari perubahan kode yang dilakukan, coba Copy Kode diatas, kemudian klik halaman Bermain Dengan Kode HTML dan pastekan kodenya, kemudian lakukan perubahan kode terutama untuk kode yang diwarnai, dan lihat hasilnya.