Animasi Hover Link Widget Archive Blogger dg css3 AnimationAnimasi 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). Setelah di posting sebelumnya "Animasi Link Widget Archive dg css3 TransitionKlik disini untuk mengikuti panduan cara membuat animasi hover link dg css3 transition di widget archive blogger ", 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.

D E M O

Silahkan lihat widget arsip melalui link di bawah ini, kemudian arahkan cursor diatas setiap link widget arsip.
Demo Animasi Link Widget Archive Blogger dg css3 AnimationSilahkan klik di link ini untuk melihat bagaimana bentuk animasi link di widget archive blogger yang diciptakan dengan css3 animation.

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. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan 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>

Animasi Link Widget Archive dg css3 TransitionAnimasi Link Widget Archive dg css3 Transition

CSS3 animation menjadi sebuah pilihan yang sangat menarik untuk pengembangan desain blog. Disamping mudah dipelajari, perkembangan yang terjadi pada css3 transition, transform dan css3 animation memungkinkan banyak fungsi yang sebelumnya hanya bisa dibangun dengan javascript, kini cukup dilakukan dengan kode css. Salah satu yang akan kita buat adalah animasi link di widget archive blogger. Dengan css3 transition sebuah link di widget archive bisa bergerak ke arah kanan atau kiri dalam bentuk animasi. Gerakan pergeseran dapat diatur dengan durasi kecepatan tertentu dalam hitungan detik (second atau milisecond).

Membuat List di Widget Archive/Arsip BloggerMembuat List di Widget Archive/Arsip Blogger

Membuat list di widget arsip blogger sangat bermanfaat karena memudahkan pembaca membedakan setiap item dari deret judul posting yang ditampilkan. List menjadi sebuah penanda setiap judul posting, dimana bentuk list dapat kita pilih dari beberapa yang tersedia, seperti misalnya circle, decimal, square, disc dan georgian. Untuk list dalam bentuk icon/gambar lebih banyak pilihan yang dapat dilakukan. Anda bisa membuatnya atau browsing untuk mendapatkan berbagai macam image/icon list. Kode CSS pembentuk list sangat simpel karena hanya menggunakan satu deret kecil kode css. Kode ini bisa disimpan di atas kode ]]></b:skin>.