Animated Blue Navigation

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> 
Untuk efect dari atas kebawah 
#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://4.bp.blogspot.com/-3dmkJ9C5BLk/T3LwtdClWyI/AAAAAAAAA3g/tdgl1Z_1Id8/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('http://2.bp.blogspot.com/-7T2FPhDGkNA/T3LwuTcfTOI/AAAAAAAAA3o/XS6ojR50ZKw/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

Artikel Menarik Lainnya :