Iseng Dengan Widget Arsip blog Yuk

Arsip blog, sebuah widget yang wajib ada pada sebuah blog atau website untuk memudahkan pengunjung mnelusuri seluruh isi blog. Ini sekedar iseng saja hiasi widget arsip blog dengan sedikit CSS, walau sebenarnya diluar sana banyak yang sudah memberi tutorialnya dan lebih keren, setidaknya ini bisa menjadi catatan pribadi untuk admin, heheheheee

Langkahnya cukup mudah sahabat infoalya.com hanya copy paste kode dibawah ini dan letakkan diatas tag
]]></b:skin>   atau  </style>

@keyframes list_archive_anima {
  0% {
  opacity:1;
  margin-left:0;
  color:brown;
}
60% {
  opacity:0;
  margin-left:20px;
  color:red;
}
100% {
  opacity:1;
  margin-left:-30px;
  color:orange;
}
}

@-o-keyframes list_archive_anima {
  0% {
    opacity:1;
    margin-left:0;
    color:brown;
  }
  60% {
    opacity:0;
    margin-left:20px;
    color:red;
  }
  100% {
    opacity:1;
    margin-left:-30px;
    color:orange;
  }
}

@-ms-keyframes list_archive_anima {
  0%,
  100% {
    opacity:1;
  }
  0% {
    margin-left:0;
    color:brown;
  }
  60% {
    opacity:0;
    margin-left:20px;
    color:red;
  }
  100% {
    margin-left:-30px;
    color:orange;
  }
}

@-moz-keyframes list_archive_anima {
  0% {
    opacity:1;
    margin-left:0;
    color:brown;
  }
  60% {
    opacity:0;
    margin-left:20px;
    color:red;
  }
  100% {
    opacity:1;
    margin-left:-30px;
    color:orange;
  }
}

@-webkit-keyframes list_archive_anima {
  0% {
    opacity:1;
    margin-left:0;
    color:brown;
  }
  60% {
    opacity:0;
    margin-left:20px;
    color:red;
  }
  100% {
    opacity:1;
    margin-left:-30px;
    color:orange;
  }
}

#BlogArchive1_ArchiveList ul.posts li {
  list-style-type:circle;
  width:97%;
  color:brown;
}

#BlogArchive1_ArchiveList ul.posts li:hover {
  animation:list_archive_anima .4s forwards;
  -o-animation:list_archive_anima .4s forwards;
  -ms-animation:list_archive_anima .4s forwards;
  -moz-animation:list_archive_anima .4s forwards;
  -webkit-animation:list_archive_anima .4s forwards;
  color:red;
}

#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;
}

Jika selesai simpan template dan lihat hasilnya.

Untuk demo bisa dilihat animasi yang ada diatas