MEMBUAT ANIMASI MENU CSS3 DI BLOGGER

Setelah seminggu istirahat dan ga bisa megang komputer karena kesenggol angkot, akhirnya sekarang bisa bikin postingan lagi... Alhamdulillah....

Kali ini aku ingin membuat posting mengenai Cara Membuat Menu CSS3 di Blogger, yang hasilnya akan terlihat seperti gambar disamping, sebelumnya aku pernah membuat postingan mengenai Online Generator CSS3 dimana dalam postingan tersebut, kita bisa langsung mengenerate kode CSS3 dari bentuk yang kita inginkan.

Akan tetapi yang patut diingat, tidak semua browser support Menu CSS3 ini, untuk melihat tabel browser mana saja yang support CSS3, bisa dilihat di www.findmebyip.com.

Apabila browser anda support dengan CSS3, maka cobalah bermain dengan DEMO disini.

Nach lalu bagaimana proses diatas bisa sampai terjadi... 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.karsono.co.cc'>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.