Cara Membuat Navigation Menu Animated dengan CSS3

Bagi pecintai blogger kayaknya gak asing lagi sama cara membuat Navigation Menu Animated dengan CSS3, mungkin kebanyakan para blogger sudah mengetahui cara membuat Navigation Menu Animated dengan CSS3 ini, nah bagi yang belum tau cara membuat menu tersebut yukzz ikuti langkah-langkah berikut....

1. Login Ke Blogger dengan ID and Password Kamu
2. Pilih Rancangan----> Elemen laman
3. Edit HTML
4. Cari Kode ]]></b:skin> 
untuk mempermudah pencarian tekan C+F, setelah ketemu, silahkan Copy kode berikut letakan di atas kode ]]></b:skin> tersebut.

Kode CSS
Spoiler: :
.GRsuperAnima{
        position:relative;
        margin:15px 0 0 10px;
        overflow:hidden; 
        margin:0; 
        float:left;
        padding:0;
        background:#1d1d1d url();
}
ul#superAnima{ 
        width:1000px;
        margin:10px 0 20px; 
        padding:0; 
        margin:3px 4px 3px 4px;
        clear:both;
        float:left;
}
ul#superAnima li{
        margin:0; 
        padding:0; 
        overflow:hidden; 
        float:left; 
        height:40px; 
}
ul#superAnima li a.anima{
        padding:10px 10px;
        font:10.3px Arial; 
        float:left; 
        color:white;
        text-decoration:none;
        text-transform:uppercase;
        text-shadow:1px 1px 1px #000;
        clear:both;
        height:18px;
        line-height:20px; 
        background:black url() top left repeat-x; 
        text-align:center;
        transition:all 1.2s ease-in-out;
        -o-transition:all 1.2s ease-in-out;
        -moz-transition:all 1.2s ease-in-out;
        -webkit-transition:all 1.2s ease-in-out; 
        -ms-transition:all 1.2s ease-in-out; 
        font-weight:bold; 
        border:1px solid #999;
}   
ul#superAnima li a.anima:hover{
        transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -o-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -moz-transform:scale(1.0) rotate(0deg) translate(0, -40px); 
        -webkit-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -ms-transform:scale(1.0) rotate(0deg) translate(0, -40px);
}  
ul#superAnima li a.anima span{
        padding:10px 9px; 
        color:transparent; 
        opacity:0.2;
        filter:alpha(opacity=20);
        border:2px solid transparent;
        transition:all 1.6s ease-out;
        -o-transition:all 1.6s ease-out; 
        -moz-transition:all 1.6s ease-out;
        -webkit-transition:all 1.6s ease-out; 
        -ms-transition:all 1.6s ease-out; 
        transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -o-transform:scale(8.0) rotate(0deg) translate(0,-10px); 
        -moz-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -webkit-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -ms-transform:scale(8.0) rotate(0deg) translate(0,-10px);
}  
ul#superAnima li a.anima span:hover{ 
        opacity:1.0;
        filter:alpha(opacity=100);
        padding:4px 9px; 
        height:18px;
        transform:scale(1.0) rotate(0deg) translate(0,0);
        -o-transform:scale(1.0) rotate(0deg) translate(0,0);
        -moz-transform:scale(1.0) rotate(0deg) translate(0,0);
        -webkit-transform:scale(1.0) rotate(0deg) translate(0,0);
        -ms-transform:scale(1.0) rotate(0deg) translate(0,0);
        color:#FF0; 
        border:4px double #000;
        background:#555; 
        text-shadow:1px 1px 1px #000;
        box-shadow:1px 2px 15px #000, 0px -1px 3px red, -2px -2px 2px orange, -3px 3px 3px yellow;
        border-radius:4px; 
}
ul#superAnima li{
        border:1px solid transparent;
        background:#990000 url();
}   
ul#superAnima li:hover{ 
        background:#fff url(); 
        border:1px solid #777;
}

5. Save Template kamu

Opss Belum selesai, masih ada 1 langkah lagi..
kamu tambahkan  Gadget  baru di Elemen laman kamu, caranya :
1. Tambah Gadget
2. Pilih HTML/JavaScript
3. Pastekan Kode Berikut kedalam kolom tersebut (Judul gak perlu)

Kode xHTML
Spoiler: :

<div class="GRsuperAnima">
<ul id="superAnima">
<li><a class="anima" href="http://full-colection12.blogspot.com/">HOME<br /><br /><span>HOME</span></a></li>
<li><a class="anima" href="Link Kamu">COLLEXTION SOFTWARE MF<br /><br /><span>COLLEXTION SOFTWARE MF</span></a></li>
<li><a class="anima" href=" Link Kamu ">KENCANA BLOG<br /><br /><span>KENCANA BLOG</span></a></li>
<li><a class="anima" href=" Link Kamu ">FREE BF FILM<br /><br /><span>FREE BF FILM</span></a></li>
<li><a class="anima" href=" Link Kamu ">TV ONLINE<br /><br /><span>TV ONLINE</span></a></li>
<li><a class="anima" href=" Link Kamu ">Video 3GP<br /><br /><span>VIDEO 3GP</span></a></li>
<li><a class="anima" href=" Link Kamu ">KODE WARNA HTML<br /><br /><span>KODE WARNA HTML</span></a></li>
<li><a class="anima" href=" Link Kamu ">FACEBOOK SAYA<br /><br /><span>FACEBOOK SAYA</span></a></li>
</ul>
</div>


Untuk Kode CSS kamu juga bisa letekan kode tersebut di perancang template kamu
1. Rancangan
2. Elemen laman
3. Perancang Template
4. Tingkat Lanjut
5. Tambahkan CSS

Selamat Mecoba :D
semoga artikel Cara Membuat Navigation Menu Animated dengan CSS3 ini bermanfaat bagi Sobat semua :)
jika ada yang kurang mengerti silahkan tinggalkan pesan.

Artikel Terkait Lainnya:



Leave a Reply

Designer: FThemes.com | Converter: Blogger Themes & Blogger Templates
Flippa