Minggu, 11 Oktober 2015

Iseng Dengan Widget Arsip blog Yuk

Baca Juga :

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
Previous Post
Next Post

post written by:

  • 0 Comment
  • Comment

Leave your comment

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