Simple Slideshow dengan sedikit Bumbu CSS & Javascript - Info Desain Web Terbaru!
Info Desain Web Terbaru!
4 Kang Rian 7/04/2013 12:41:00 AM Simple Slideshow dengan sedikit Bumbu CSS & Javascript Simple Slideshow dengan sedikit Bumbu CSS & Javascript

Simple Slideshow dengan sedikit Bumbu CSS & Javascript

Oleh. Kang Rian  •  35  •      Edit
Simple Slideshow dengan sedikit Bumbu CSS & Javascript
Simple Slideshow dengan sedikit Bumbu CSS & Javascript
Sent Pin it!
Slideshow Icon png
Slide show yang akan saya publish kali ini adalah Simple Slide show dengan gabungan sedikit CSS dan JavaScript yang mungkin bisa anda gunakan di halaman pertama / home page web dan blog anda ..

Lihat DEMO →

Cara Memasang nya :

1. Copy Code JavaScript & CSS di bawah ini , lalu simpan tepat di atas kode </head> :



<script type="text/javascript" src="http://static.tumblr.com/dxr7fsd/Wvmmpdd8c/jquery-1.2.6.min.js"></script>
<script type="text/javascript">

/*** 
    Membuat Slideshow mudah dengan sedikit Bumbu JavaScript & CSS 
 By : Jon Raasch (jonraasch.com) &  Modified by : Kang Rian (rian-nurherdian.blogspot.com)
***/

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000 /* << Atur Kecepatan lebih menurun lebih cepat !*/, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 2000 );
});

</script>

<style type="text/css">

/*** CSS nya Atur-atur sesuka hatimu yang penting cantik.. **/

#slideshow {
    position:relative;
    height:460px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

</style>

2. Cara Memasukan/Membuat Slideshow ke area HTML :


<div id="slideshow">
    <img src="alamat-gambar-1.jpg" alt="Keterangan Gambar" title="Judul Gambar" />
    <img src="alamat-gambar-2.jpg" alt="Keterangan Gambar" title="Judul Gambar" />
    <img src="alamat-gambar-3.jpg" alt="Keterangan Gambar" title="Judul Gambar" class="active" />
</div>
Sekian Tutorial tentang Cara Membuat Simple Slideshow dengan sedikit Bumbu CSS & Javascript .

Selamat Mencoba , Semoga Bermanfaat ! Happy Blogging sob .. ^_^
Sent Pin it!

Kang Rian Ikuti

Web & Graphic Designer - Berpengalaman sejak 2010, fokus membantu Perusahaan / UMKM agar dikenal secara Global melalui Website Profesional & Desain yg Menjual.

Cek. Jasa-Design.web.id

         

35 komentar

  1. Kang Ismet7/04/2013 9:10 AM

    Beuh.... kasep pisan blogna :2thumbup :2thumbup :2thumbup

    BalasHapus
    Balasan
    1. Kang Rian7/04/2013 2:23 PM

      :malu janten isin di puji ku master .. hehe hatur nuhun kang tutorial na ! , berkat kang ismet yeuh ..

      Hapus
  2. Anonim7/04/2013 7:31 PM

    Lumayan jadi referensi mah Kang :)

    BalasHapus
    Balasan
    1. Kang Rian7/04/2013 8:23 PM

      hehe muhun , hatur nuhun kang tos ameng ka blog saya ! :shakehand

      Hapus
  3. Download Patch 4.1 Pes 20137/05/2013 2:55 PM

    thanks infonya sob
    komen back ya

    BalasHapus
    Balasan
    1. Kang Rian7/05/2013 10:50 PM

      baik , terima kasih telah berkomentar ..

      Hapus
  4. Kang Ismet7/05/2013 10:54 PM

    satu lagi masukan kang, jangan pake CDN jquery, mending dari google... lambat saya ngakses blog ini. mungkin ada yang terlewat artikel ini :
    http://blog.kangismet.net/2013/06/memilih-lokasi-cdn-jquery.html

    BalasHapus
  5. Ridho Muhammad Firdaus7/06/2013 6:11 PM

    Mantap Kang Blognya, kasep pisan. . . :2thumbup

    BalasHapus
    Balasan
    1. Kang Rian7/06/2013 7:38 PM

      blog nya matikanlogika.blogspot.com juga bagus kaang ! :D simple banget

      Hapus
  6. mauLaNaa uTamaa7/10/2013 3:20 PM

    kereeenn broww..
    thnks infonya brow..
    coment back yaa

    BalasHapus
  7. Ichsan Mujahid7/10/2013 7:34 PM

    Nice share sob...
    Keep moving !!! :)

    BalasHapus
    Balasan
    1. Kang Rian7/12/2013 9:43 AM

      oke sobb , i am moving !! :ngacir :sup2:

      Hapus
  8. gagat dwiyoko7/16/2013 1:12 PM

    mantep :D

    BalasHapus
  9. Saud Karrysta7/21/2013 5:34 PM

    woow keren Kang... sae yeh artikel salam sukses we nya ...Kanggo Kang Rian.

    BalasHapus
    Balasan
    1. Rian Nurherdian7/22/2013 3:10 AM

      okey, makasih kang :) salam sukses juga buat kang saud :D

      Hapus
  10. kuandika win10/05/2013 12:17 AM

    Sae pisan akang, ngiring diajar kang

    BalasHapus
  11. reizya aza10/19/2013 10:09 AM

    Mator Tengkyu.. :-D

    BalasHapus
  12. muhammad yusuf syaifullah5/13/2014 9:15 AM

    mthank yuo mastah.kunjungan perdana ke blog ini..
    http://rumput-kebar-papua.blogspot.com

    BalasHapus
  13. Cindy Novianty9/13/2014 6:28 AM

    gan mau nanya gimana caranya buat slide show pas kita munculin htmlnya yg keluar gambar full gt selama 2 detik lalu baru muncul home page web nya. mohon pencerahannya gan

    BalasHapus
  14. achmad anima10/22/2014 1:30 AM

    mantap kang. membantu sekali

    BalasHapus
  15. muhammad hasan11/21/2014 6:07 PM

    kang
    cara buat slide kayak ini (SS di bawah)macam mana ?
    http://prntscr.com/58kaqw
    ana mw buat di php(website)
    gx di blog

    please bantuan ya

    BalasHapus
  16. Yoshua Bryant12/08/2014 11:15 PM

    Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  17. jung kribo1/12/2015 1:16 PM

    sip kang..makasih atas infonya :D

    BalasHapus
  18. jung kribo1/12/2015 1:20 PM

    kang biar rata tengah diapakan ya ?

    BalasHapus
  19. vito tasmal8/01/2015 8:26 PM

    ada demonya kang ?

    BalasHapus
  20. Naufal Farma8/09/2015 1:43 AM

    Your Article Is This Very Helpful Thanks For Sharing...:)

    BalasHapus
  21. Zona Bioskop8/19/2015 5:39 PM

    ZONABIOSKOP.COM | Nonton Movie : Hollywood, China, Thailand, India, Korea, Japan Cartoon, & Semi Movie Subtitle Indonesia

    NONTONCINTA.COM | FILM CINTA | FILM ROMANTIS | FILM SEDIH | FILM MENGHARUKAN

    NONTONSEMI.COM | Kumpulan Nonton Film Semi, Bokep Jepang Full Hd, Red Hot, Sky Hot, Tokyo Hot, Jav Movie

    LONTEJEPANG.COM | Film bokep, Film Dewasa, Film Porno, Porn Video, Sex Movie, Porn Movie, Bokep Online, Film Online, Porno Online, Film Bokep Online, Film Porno Online

    KILAU POKER | Poker Online,Judi Online, Domino Online, Qiuqiu Online, Agen Poker dan Qiuqiu Terpecaya

    BalasHapus
  22. jual obat10/19/2015 9:41 AM

    ● Pelangsing Badan Lida
    ● Penggemuk Badan GINSENG
    ● Peninggi Badan GROW-UP
    ● Pemerah Bibir dan Puting
    ● Pemutih Wajah/Badan
    ● Alat Pembesar Payudara
    ● obat Pembesar penis
    ● obat Perangsang wanita

    BalasHapus
  23. Gho Far12/09/2015 9:23 PM

    bagus gan triknya.
    ane coba berkali kali di blog ane. tpi kok gk muncul ya.
    dan malah berefek recent post ane jdi gak muncul juga .
    mohon solusinya gan.
    di http://ghofar1.blogspot.com/

    BalasHapus
  24. Nana Poker12/11/2015 7:12 PM

    Nanapoker :Poker Online Terpercaya | Judi Poker Online | Poker Online | Dewa Poker | Situs Poker Online Terpercaya

    BalasHapus
  25. As Shop12/14/2015 9:28 AM

    Terimakasih, tutorialnya bermanfaat banget nanti di coba deh…

    Sekarang ini hampir setiap pekerjaan menuntut kita untuk menggunakan komputer dan berbagai software penunjang. Mulai dari software pengolah kata, angka, program, dan desain grafis. Bingung cara belajarnya? Kunjungi Kumpulan Tutorial Gratis , berbagai konten tutorial gratis yang bisa membantu kamu

    BalasHapus
Utama Blogger CSS Informasi JavaScript Plugin Simple Slideshow dengan sedikit Bumbu CSS & Javascript

Terpopular! Minggu ini..

×

Konversi Bersihkan