Animated Blue Navigation

Animated Blue Navigation - Setelah Postingan Animated CSS Metro UI kali ini [OBC] masih membahas seputar tutorial blogger dalam membuat menu navigasi . Animated Blue Navigation mempunyai dua pilihan gaya yang bisa menjadi pilihan untuk disesuaikan dengan template brada . Bagi brada yang tertarik untuk memasangnya silahkan ikuti tutorial lengkapnya. Tapi sebelumnya silahkan barada lihat dulu demonya.



Kustomisasi

• Masuk pada Tataletak 
• Add Gadget / HTML Javascript 
• Masukan Kode dibawah ini 

<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>

Untuk menambah link baru silahkan brada membuat  kode  <li><a href="#">Link</a></li> dan tempatkan sebelum kode </ul> 

Untuk memasang kode CSS nya

• Masuk Edit HTML 
• Cari kode ]]</b:skin> 
• Masukan kode dibawah ini sebelum kode ]]</b:skin> 

#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(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp9Jd9B0o_aUbOoF6WDZ5pW5jJEWrLYMRgn_Xe9k-hxmpt8_dAKwYcSxp9IanjbVzZa-LDavw08d8RqaM7vWMEx0aLNHP8mkm7bofJSG7Pdln4_fn-Vf-zzpzyA1NTriJJEg7f-ichDpk/s1600/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;
}

Untuk efect dari kiri ke kanan 

#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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjDa1M_MaBu_WABuDecCir1FPBKolQIMNt83TC_MuZ8MB1EBi4j3vRXufbts6Rs4x6B-776hBVSsxkZcCRH8vJL8npl5JIKejwcvTQhA9s4N4stYLJeLcOgEABYiF1B84C680wFDxtpv4/s1600/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;        
} 

Save dan lihat hasilnya.
Selamat berpuasa brada !!! Semoga Lancar