Animasi Hover Link Widget Archive Blogger dg css3 Animation

Animasi link di widget archive bisa dibuat dengan beberapa cara dan dalam berbagai bentuk yang berbeda (dg kode css atau javascript). kita akan membuat animasi yang jauh lebih menarik dengan kode css3 animation. Sedikit yang membedakan terutama pada animasi gerak link. Jika di posting sebelumnya saat cursor menyentuh link di widget archive animasi yang terjadi berupa pergeseran link ke kiri, maka melalui kode css3 animation bentuk animasinya berupa pergerakan link ke arah kanan yang dibarengi dengan perubahan teks link dalam bentuk transparan, baru kemudian link akan terlihat kembali bersamaan dengan pergeseran ke kiri.

Kode CSS untuk membuat Animasi Hover LInk di Widget Archive Blogger

@keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-o-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-ms-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-moz-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-webkit-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
#BlogArchive1_ArchiveList ul.posts li{
    list-style-type:circle; /* circle bisa diganti dg square, disc, georgian, decimal */ 
    width:97%;  /* max width 100% */
    color: brown; /* brown bisa diganti dengan warna lain */
}
#BlogArchive1_ArchiveList ul.posts li:hover{
    animation:list_archive_anima 0.4s forwards; /* 0.4s merupakan durasi animasi */
    -o-animation:list_archive_anima 0.4s forwards; /* semakin kecil semakin cepat */
    -ms-animation:list_archive_anima 0.4s forwards; /* semakin besar maka akan semakin lambat */
    -moz-animation:list_archive_anima 0.4s forwards; /* nilai dapat dirubah - dalam s atau ms */
    -webkit-animation:list_archive_anima 0.4s forwards;
    color:red; /* red bisa diganti dengan warna lain */
}
#BlogArchive1_ArchiveList ul.posts li a{
    text-decoration:none; /* by: http://gubhugreyot.blogspot.com - 12 juli 2012 */
    transition:color 1.5s; /* transisi animasi warna teks link */
    -o-transition:color 1.5s; /* 1.5s bisa diperbesar atau diperkecil */
    -ms-transition:color 1.5s; /* semakin besar maka perubahan warna semakin lama  */
    -moz-transition:color 1.5s; /* tsemakin kecil akan semakin cepat */
    -webkit-transition:color 1.5s; /* nilai dalam s atau ms */
}
#BlogArchive1_ArchiveList ul.posts li:hover a{
    color:red; /* red bisa diganti dengan warna lain */
}

Cara menggunakan kode CSS animasi widget archive blogger

1. Login ke Blogger
2. Dasbor (Dasboard)
3. Template
4. Backup/Restore Template.
5. Edit HTML
6. Template › Edit HTML
   • Procced (Lanjutkan)
   • Cari Kode : ]]></b:skin>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Copy & paste-kan kode css tepat di atas kode tersebut.
   • Simpan Template/Save Template
7. Selesai...
8. Buka blog dan lihat penampilan Animasi Widget Archive blogger anda!

Posisi kode css di template :

@keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-o-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-ms-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-moz-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-webkit-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
#BlogArchive1_ArchiveList ul.posts li{
    list-style-type:circle; /* circle bisa diganti dg square, disc, georgian, decimal */ 
    width:97%;  /* max width 100% */
    color: brown; /* brown bisa diganti dengan warna lain */
}
#BlogArchive1_ArchiveList ul.posts li:hover{
    animation:list_archive_anima 0.4s forwards; /* 0.4s merupakan durasi animasi */
    -o-animation:list_archive_anima 0.4s forwards; /* semakin kecil semakin cepat */
    -ms-animation:list_archive_anima 0.4s forwards; /* semakin besar maka akan semakin lambat */
    -moz-animation:list_archive_anima 0.4s forwards; /* nilai dapat dirubah - dalam s atau ms */
    -webkit-animation:list_archive_anima 0.4s forwards;
    color:red; /* red bisa diganti dengan warna lain */
}
#BlogArchive1_ArchiveList ul.posts li a{
    text-decoration:none; /* by: http://gubhugreyot.blogspot.com - 12 juli 2012 */
    transition:color 1.5s; /* transisi animasi warna teks link */
    -o-transition:color 1.5s; /* 1.5s bisa diperbesar atau diperkecil */
    -ms-transition:color 1.5s; /* semakin besar maka perubahan warna semakin lama  */
    -moz-transition:color 1.5s; /* tsemakin kecil akan semakin cepat */
    -webkit-transition:color 1.5s; /* nilai dalam s atau ms */
}
#BlogArchive1_ArchiveList ul.posts li:hover a{
    color:red; /* red bisa diganti dengan warna lain */
}
]]></b:skin>

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit