Modifikasi Widget Archive dengan CSS
Memodifikasi widget archive dengan css, itulah ayang akan kita bahas sekarang, memang mudah memodifikasi widget archive seperti membuat scroll down, menambahkan background, menjadikan archive seperti kalender dan lain-lain. Dan sekarang saya menambahkan tips memodifikasi widget archive denagn CSS @-keyframes, CSS dari gubhugreyot.blogspot.com. Lihat DEMO.
Pemasangan ikuti langkah berikut:
1. Masuk ke Template » Edit HTML
Letakkan kode berikut ini atas kode ]]></b:skin>
Letakkan kode berikut ini atas kode ]]></b:skin>
/* Modifikasi widget Arsip */2. Simpan 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 */
}
/* Modifikasi widget Arsip */
BlogArchive1 bisa berbeda-beda seperti BlogArchive2, BlogArchive3 sesuaikan dengan widget Archive anda.
Selamat Mencoba.
Posting Komentar
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>
Link aktif akan dimatikan secara otomatis.
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.