Animasi 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).

Agar animasi link wiget archive tak hanya terjadi dalam bentuk gerakan, kita akan menambahkan beberapa variael css lain yang berkaitan dengan color, baik pada link ataupun list archive. Penggabungan yang akhirnya tidak hanya menciptakan animasi gerak pergeseran link, namun juga menganimasikan warna ketika cursor diarahkan di atas teks link widget arsip.

Kode CSS Animasi Link Widget Profil

#BlogArchive1_ArchiveList ul.posts li{
    list-style-type:circle; /* circle bisa diganti square, decimal, disc, gergorian */
 width:96%; /* width max 100% */
    color: blue; /* warna bisa diganti */
    transition:margin-left 0.3s,color 2.5s;
    -o-transition:margin-left 0.3s,color 2.5s;
    -ms-transition:margin-left 0.3s,color 2.5s;
    -moz-transition:margin-left 0.3s,color 2.5s;
    -webkit-transition:margin-left 0.3s,color 2.5s; 
}
#BlogArchive1_ArchiveList ul.posts li:hover{
    color: red; /* warna bisa diganti */
    margin-left:-30px; /* margin bisa dirubah */
}
#BlogArchive1_ArchiveList ul.posts li a{
    text-decoration:none;
    transition:color 1.5s;
    -o-transition:color 1.5s;
    -ms-transition:color 1.5s;
    -moz-transition:color 1.5s;
    -webkit-transition:color 1.5s;
}
#BlogArchive1_ArchiveList ul.posts li:hover a{
    color:red; /* warna bisa diganti */
}

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 :

#BlogArchive1_ArchiveList ul.posts li{
    list-style-type:circle; /* circle bisa diganti square, decimal, disc, gergorian */
    width:96%; /* width max 100% */
    color: blue; /* warna bisa diganti */
    transition:margin-left 0.3s,color 2.5s;
    -o-transition:margin-left 0.3s,color 2.5s;
    -ms-transition:margin-left 0.3s,color 2.5s;
    -moz-transition:margin-left 0.3s,color 2.5s;
    -webkit-transition:margin-left 0.3s,color 2.5s; 
}
#BlogArchive1_ArchiveList ul.posts li:hover{
    color: red; /* warna bisa diganti */
    margin-left:-30px; /* margin bisa dirubah */
}
#BlogArchive1_ArchiveList ul.posts li a{
    text-decoration:none;
    transition:color 1.5s;
    -o-transition:color 1.5s;
    -ms-transition:color 1.5s;
    -moz-transition:color 1.5s;
    -webkit-transition:color 1.5s;
}
#BlogArchive1_ArchiveList ul.posts li:hover a{
    color:red; /* warna bisa diganti */
}
]]></b:skin>

Jika anda tertarik untuk mengikuti panduan membuat animasi hover link di widget archive blogger yang dibuat menggunakan css3 animation,

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit