29 April 2013

Cara membuat slider gambar memudar / menghilang dengan CSS3 di blog

Posted at  03.52  |  in  tips dan triks blog



Hari ini saya akan share kepada Anda bagaimana membuat slider gambar yang bagus dan mulus menggunakan css3. Slider ini menggunakan efek fade (menghilang) untuk beralih ke slide berikutnya. Plus anda bisa menggunakan teks promo khusus di setiap slide. Kita tidak perlu mengklik untuk ganti slide, semuanya otomatis (animasi CSS3).



KODE HTML 
  • Tambahkan kode HTML berikut didalam postingan (HTML bukan compose) atau anda bisa meletaknnya di gadget HTML/Javascript
  • Klik Tata letak -> Tambahkan gadget -> masukan kode didalamnya -> Simpan gadget.
 <div class="slides">
    <ul> <!-- slides -->
        <li><img src="http://i1087.photobucket.com/albums/j479/jalupangna/pic1.jpg" alt="image01" />
            <div>Man jadda wa jada</div>
        </li>
        <li><img src="http://i1087.photobucket.com/albums/j479/jalupangna/pic2.jpg" alt="image02" />
            <div>Hidup sekali,hiduplah yang berarti</div>
        </li>
        <li><img src="http://i1087.photobucket.com/albums/j479/jalupangna/pic3.jpg" alt="image03" />
            <div>Hidup mulia atau mati syahid</div>
        </li>
        <li><img src="http://i1087.photobucket.com/albums/j479/jalupangna/pic4.jpg" alt="image04" />
            <div>Akhlaq jelek itu menular</div>
        </li>
    </ul>
</div> 

KETERANGAN: 
  • Silahkan ganti link gambar pada warna kuning diatas dengan link gambar anda.
  • Ganti teks promo dengan teks yang anda inginkan.

KODE CSS 

/* fade slider */
.slides {
    height:300px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:900px;
}
.slides ul {
    list-style:none;
    position:relative;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

.slides ul li {
    opacity:0;
    position:absolute;
    top:0;

    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}

/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}

.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;

    /* css3 animation */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}


  • Masuk ke akun blogger anda -> Klik Drop down menu
  • Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML
  • Cari tag / kode ]]></b:skin> kemudian pastekan kode CSS diatas tepat diatas kode ]]></b:skin>  
  • Simpan template...
 Semoga bermanfa'at.

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 03.52
Anda menyukai postingan di atas? Silahkan di share..!
Blogging dan wawasan spiritual Post Author

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

16 komentar:

  1. keren Kang slidernya,
    btw semakin hari blognya tambah maju dan updating sudah bayak sekali:)
    blog ane yg problogiz dpt sial kang, setelah lama tidak update saya cek webmaster banyak sekali hampir semua artikel saya kena duplikat description meta tag, wah pengaruhnya besar sekali kang terutama di SE trun banyak visitor...hehe terpaksa dihapus satu2.
    pernah ngalami ngga kang?

    BalasHapus
    Balasan
    1. Makasih master atas apresiasinya. Lagi semangat update postingan mas. hehe..saya lagi belajar banyak tutorial dari website luar kang hriza. Tadi saya cek juga ternyata cukup banyak sekitar 65 duplikasi deskripsi meta. Jadi, caranya dihapus satu-satu ya? wah, jadi nambah neh ilmu saya. Thank u master.. :)

      Hapus
  2. Apa bisa di tambahkan link targetnya pak pada gambar atau tulisan promonya?

    BalasHapus
    Balasan
    1. Untuk menambahkan link target pada deskripsi slider image tidak bisa, karena bawaan default tutorial yang saya dapatkan dari website luar seperti itu. Hanya sebatas deskripsi slider imagenya saja.

      Hapus
  3. Akhirnya dapat Juga... ;((

    makasih yahh... :D

    BalasHapus
    Balasan
    1. Sama-sama mas Ajiep dpdri, terima kasih banyak udah berkenan berkunjung...salam. :)

      Hapus
  4. waw,...... kalau yang ini keren om kapan2 saya minta izin untuk share ulang om...

    BalasHapus
    Balasan
    1. Wooww nya sambil koprol donk...gkgkgk.. :d silahkan mas imron dengan senang hati..

      Hapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  6. Gan, kan ini udah BErhasil tuh, tapi pas "Lihat Blog" Ko gambar nya kaga muncul? cuma teks promo nya doang yang mucul -___- Web nya di Flicker.com

    BalasHapus
  7. mas template nya kok bacgroundnya pada ilang ?

    BalasHapus
  8. mantab gan,,, infonya
    tanks banget,,,
    salam kenal dari : http://www.obatkuat-kamasutra.com/

    BalasHapus

About Us-Privacy Policy-Contact us
Copyright © 2013 Wawasan spiritual dan blogging. Blogger Template by BloggerTheme9
Proudly Powered by Blogger.
back to top