Animasi Link Widget Archive dg css3 TransitionClick here to get more tutorials!

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.

D E M O

Sekalipun tidak sama persis, namun jika anda melihat dan mencoba mengarajkan cursor di atas link arsip blog di halaman ini, maka kira-kira seperti itulah bentuk animasinya (tanpa tooltip & menggunakan list).

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. 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 :

#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, silahkan anda buka link di bawah ini:

Animasi Hover Link Widget Archive Blogger dg css3 AnimationDengan pilihan berbeda untuk animasi di widget archive blogger, anda bisa menentukan yang mana yang pas untuk blog anda. Silahkan klik dan ikuti tutorialnya dan dapatkan kodenya dengan klik di sini!.