Iseng Dengan Widget Arsip blog Yuk

- October 11, 2015

infoalya.com

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

Share this with short URL:
Blogger
Disqus
Tinggalkan Komentar

No comments

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

 

ketik dan enter untuk mencari