• Latest New

    Friday, March 3, 2017

    Cara Modifikasi Widget Archive Dengan CSS

    - - Advertisement - -


    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>
    /* Modifikasi widget Arsip */
    @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 */
    2. Simpan template.
    BlogArchive1 bisa berbeda-beda seperti BlogArchive2, BlogArchive3 sesuaikan dengan widget Archive anda.
    Selamat Mencoba.

    Cara Download : Klik link download tunggu 5 detik, selanjutnya klik lewati
    • Comments

    0 komentar:

    Post a Comment

    Bagaimana pendapat kalian soal artikel ini. . .

    Berikan komentar terbaikmu guys...😂😂😂

    1. Kalau link mati/error laporkan disini.
    2. dilarang promosi/jualan.
    3. No Spam
    4. Kalau mau request Comment aja...
    5. Kalau jatuh cinta dengan admin, Commentnya di bawah ya 😊😊😊

    Item Reviewed: Cara Modifikasi Widget Archive Dengan CSS Rating: 5 Reviewed By: Unknown
    Scroll to Top