Iseng Dengan Widget Arsip blog Yuk

Iseng Dengan Widget Arsip blog Yuk

Iseng Dengan Widget Arsip blog Yuk

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:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

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

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×