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

10 komentar

asik nih setelah baca .. langsung mau coba dipraktekan ... kalau bisa sayahnya

sok mang lah salah saalit mah moal neon-neon atuh hehe

lumayan sob .. karya newbie hehe

mantap dan keren banget ternyata memang okey juga hasilnya
terima kasih sudah berbagi

Keren banget nih ilmu tentang css.
Mau nyoba ah ntar hehehe

jadi cantik banget navigasinya, tadi saya dah liat demo nya lho. ^_^

wah kang tutorial Animated Blue Navigationnya keren juga nih, kalau warnanya apa bisa diganti kang, makasih udah berbagi :)

thanks bro :)

www.ferhatbayram.blogspot.com

whie keren sob, kreatif....ane coba dl, makasih