Membuat menu navigation animasi CSS3 Blogger

 
  Menu navigation animasi CSS3 blogger ~ Widget yang akan saya bahas kali ini adalah menu navigation. Menu navigation ini menurut saya cukup keren. Karena bila mouse melewati salah satu menu, maka background menu tersebut akan bergerak dari atas kebawah (v1). Dan ada juga jika mouse lewat menu, maka background menu akan bergerak dari kanan atas ke kiri atas (v2). Mungkin jika saya jelaskan anda akan ling-lung. Maka, coba lihat live demo ini :
<!--

Demo widget animasi menu navigasi css3 ONLINETRICK

Example 1

• Home
• Products
• Services
• About
• Contact

Example 2

• Home
• Products
• Services
• About
• Contact

1. Login blog -> edit html -> Lanjutkan.
2. Cari kode ]]></bskin>.
3. Letakan kode dibawah ini diatasnya.

                                                         CSS Code for Example 1

 #menu li {                

display: inline;                

list-style: none;                

padding: 0;            

}                         

#menu li a {                                 

border: 1px solid #3d8bf2;               

padding: 15px 20px 15px 20px;                

text-decoration: none;                

font-family: arial;                

color:#fff;                

margin-left: -5px;                

background-image: url('http://onlinetrick-ot.googlecode.com/svn/image/menubg1.PNG');                 

background-position: left;                

-webkit-transition: all 0.7s ease-in-out;              

-moz-transition: all 0.7s ease-in-out;                

-o-transition: all 0.7s ease-in-out;            

}                         

#menu li a:hover {                

background-position:right;           

}

                                             CSS code for Example 2

 #menu li {

display: inline;

list-style: none;

padding: 0;

}

#menu li a {

border: 1px solid #3d8bf2;

padding: 15px 20px 15px 20px;

text-decoration: none;

font-family: 'Acme', sans-serif;

color:#fff;

margin-left: -5px;

background-image: url('http://onlinetrick-ot.googlecode.com/svn/image/menubg2.PNG');

background-position: bottom;

-webkit-transition: all 0.6s ease-in-out;

-moz-transition: all 0.6s ease-in-out;

-o-transition: all 0.6s ease-in-out;

}

#menu li a:hover {

background-position:top;

}

Notes : Terkadang, menu ini hanya bekerja jika anda memakai browser Mozila Firefox & opera. Namun, terkadang juga widget ini bisa bekerja menggunakan browser Chrome.

4. Save template.
5. Klik tata letak -> Add gadget/html javascript.
6. Copas kode berikut.

<ul id="menu">                

<li><a href="#">Home</a></li>                

<li><a href="#">Products</a></li>                

<li><a href="#">Services</a></li>               

<li><a href="#">About</a></li>                

<li><a href="#">Contact</a></li>            

</ul>

7. Save.

 Jelajahi Kode 
1. Jangan lupa mengganti # dengan url yang agan tuju.
2. Ganti juga tulisan berwarna hijau, dengan anchor text.
3. Jika ingin menambahkan tab, tambahkan kode dibawah ini :

<li><a href="#">Anchor text goes here</a></li>

4. Jika ingin menghapus tab, hapus kode diatas.

Semoga berhasil! :D