Cara Membuat Menu Bar Animasi Di Blog

1. Buka Blogger
2. Klik Tata Letak
3. Klik Tambahkan Gadget
4. Pilih HTML/javascript
5. Copy Kode Di Bawah Ini
6. <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://variasiblogger.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>
7. Jika Sudah Klik Simpan
8. Lihat Perubahannya
9. Terima Kasih

• Tweet
• Share
• Share
• Share
• Share