Membuat Efek Flux Slider Keren di Blog

Pada postingan kali ini saya akan membuat review (contoh implementasi) plugin slider segar dan sejuk. Kenapa saya sebut segar dan sejuk,..?? karena thema-nya saya pake green earth,..
Slider ini menggunakan CSS3 animasi dengan efek transisi yang besar (seperti: bar, zip, tirai, blok, konsentris, warp). Dan apa yang paling penting sekarang dapat mendukung transisi 3D juga
Seperti: (bars3D, kubus, tiles3D, efek blinds3D).
Tentu saja tidak semua browser mendukung transisi 3D, saya biasa uji efek-efek tersebut menggunakan Google Chrome dan pujituhan hasilnya maksimal, sedangkan kalau di browser lain seperti (internet explorer, mozilla, dan opera) saya belum bisa memastikannya.
Untuk Demo efek flux slider nya bisa Anda lihat gambar di bawah ini sedangkan Untuk Live Demo bisa Anda klik tombol dibawah :

• DEMO Klik disini!!!

Simak langkah-langkah di bawah ini :

1. Login ke akun blogger Anda.
2. Klik Template  Edit HTML
3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style>
4.Lalu tambahkan script CSS berikut ini tepat di atas kode ]]></b:skin> atau </style>

.example{width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

/*customization of slider*/

#slider {
    padding:15px 0;
}
#slider .pagination {
    list-style:none outside none;
    padding:15px !important;
}
#slider .pagination li {
    cursor:pointer;
    display:inline-block;
    margin-left:0;
    background-color:#888;
    border-radius:10px 10px 10px 10px;
    height:8px;
    text-indent:10000px;
    width:8px;
}
#slider .pagination li.current {
    background-color:#000;
}
#transitions {
    overflow:hidden;
}
#transitions ul {
    float:left;
    list-style:none outside none;
    padding:0;
    width:33%;
}
#transitions ul#trans2D {
    text-align:right;
}
#transitions ul li {
    margin:0 10px;
}

#warn {
    font-weight:bold;
    text-align:center;
}

5. Tekan CTRL+F cari kode </head> lalu masukkan kode script di bawah ini tepat di atas kode </head>

<script src="http://yourjavascript.com/2834231624/jquery-1-5-2-min.js"></script>
<script src="http://sites.google.com/site/vanzdy/script/flux.min.js"></script>
<script>$(function(){
    // if browser not support transitions at all - we will display some warn message
    if (! flux.browser.supportsTransitions) {
        $('#warn').text('Flux Slider requires a browser that supports CSS3 transitions').show();
    }

    window.mf = new flux.slider('#slider', {
        autoplay: true,
        pagination: true,
        delay: 5000
    });

    // binding onclick events for our transitions
    $('.transitions').bind('click', function(event) {
        event.preventDefault();

        // we will inform member is any 3D transform not supported by browser
        if ($(event.target).closest('ul').is('ul#trans3d') && ! flux.browser.supports3d) {
            $('#warn').text("The '"+event.target.innerHTML+"' transition requires a browser that supports 3D transforms");
            $('#warn').animate({ 
              opacity: 'show' 
            }, 1000, '', function() {
                $(this).animate({opacity: 'hide'}, 1000);
            });
            return;
        }

        // using custom transition effect
        window.mf.next(event.target.id);
    });

    $('#controls').bind('click', function(event) {
        event.preventDefault();

        var command = 'window.mf.'+event.target.id+'();';
        eval(command);
    });
});</script>

6. Kemudian simpan template Anda.

Penerapannya:

Supaya kode di atas muncul di posting blog Anda  Silahkan buat Entri baru gunakam mode HTML kemudian masukkan kode berikut ini kedalam halaman posting blog Anda.

<div class="example">
      <div id="slider">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZumBAmoSTj08ovYslseFET4V5ldwwz2R9icz0Gsxor67T5oZKIINMnKdlFdc1Oq8LMpTBj_Fi4E4_2tP85aLoa6ZzkOfmwX-Gu7R1vUtRzTfDnAQQJiyYPWfPt2iaY66drVqOJ-jDXsl8/s1600/BIE_Green+Earth1.jpg" alt="" />
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYIzysu3sWjwJivCfawDZWhQxF9FdbUtlXLX8D3z0dvzzNe8FIAzKCPHziT_8mTyBfFXj0lZv3Gnm2ffitFCF1An9ibPh5YO8RhEqivN7f1RZ5_iQVMhIoDLUOV_sv3g67k6MKmI-m-y24/s1600/BIE_Green+Earth2.jpg" alt="" />
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0j18ajch95kTy9z7YUSh2I0dIQcuQRUPf9vqjPN_Pht3sjRdUeEMy2-n3WMAhYs1NaklO7TnCxA6VSoiSa97RcZnNLxHhEga9U7lqTH6E4PlWEH6hFWX2jf-nwbUsojZosy5jyidUvn8/s1600/BIE_Green+Earth3.jpg" alt="" />
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXiiBeSQzfLiTErTD2TSlMPfj3zs7JVfLv90I9svTvXEyimyanU7dFsQ8NSCtigjjF7GV0LIupPBWM-O9B36FwQvaWTNQX6Oq_CR9vbZzekULtuvpC2RR3L5a4pfk0TBAdA3G3gfJjvbJL/s1600/BIE_Green+Earth4.jpg" alt="" />
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijBhJSD6-lbqYJmLmev8zh2l1yzSyIwNdiZP4KF2xI4SGthnIsZDZuEPVO9UoOR1coUBVfAZmTVqCNarDe4yJZs11-0rllrfCca44wKmM-ad8O5BklzC0UEVZXuG0BNucbCDKZ8Y-isVpf/s1600/BIE_Green+Earth5.jpg" alt="" />
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ENq_RkKQoh6PIpRCNgu9IMO0pKsHWTt4hfi_5rs2TXUxGdbQHA-m5ZjCM5poasLqEmz6J0bQ1dubce0j9zMUuaCFO_npjzlqC2cMEeIKRT4gLcnaMiB5XX8HZ_WIxITBkcUMBySv0Sme/s1600/BIE_Green+Earth6.jpg" alt="" />
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFvRGHrxrNqbMPM1NHiNT4HY6ZUp_NECzhBtcXjvgMFDSG7ohcognd_z_s5K05o_aVenVwgwx-pi1ZaKeaPxjjNcU1_6uas5vBdS906SVSyYlIK3VdDWi0U9S-tLHNni3UdHsfVB5Au15v/s1600/BIE_Earth+Digital7.jpg" alt="" />
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEims7Lrif_UVf68AApANptWKyiVgsYa31Hoz8veEODsnK1p1vm-enCpnbsSSRHldcUA097PcaklB88qBAZ0bUXpxpgZiQs4_IjLEIBq_xb8IP99998jft5UP7glSBSHkzFnQ4bprepRwGT2/s1600/BIE_Earth+Digital8.jpg" alt="" />
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKPMVdwpSh0JHZnJX4LkSkT5MTYUe1IYtrpiub79qAxJ-yMW0mm6CUWw9Gqpzhtym9lhSrHHtD_WPK1TqjHf5q4cksavwDFLNJdyOwWv4SLh7W7hobC6Al01BzM8mKPGYOjY5ro0QE5rr6/s1600/BIE_Earth+Digital9.jpg" alt="" />
   </div>

 <hr />
   <div id="transitions">
  <ul id="trans2D" class="transitions">
       <li><b>2D Transitions</b></li>
       <li><a href="#" id="bars">Bars</a></li>
       <li><a href="#" id="zip">Zip</a></li>
       <li><a href="#" id="blinds">Blinds</a></li>
       <li><a href="#" id="blocks">Blocks</a></li>
       <li><a href="#" id="concentric">Concentric</a></li>
       <li><a href="#" id="warp">Warp</a></li>
    </ul>
  <ul id="trans3d" class="transitions">
       <li><b>3D Transitions</b></li>
       <li><a href="#" id="bars3d">Bars3D</a></li>
       <li><a href="#" id="cube">Cube</a></li>
       <li><a href="#" id="tiles3d">Tiles3D</a></li>
       <li><a href="#" id="blinds3d">Blinds3D</a></li>
    </ul>
  <ul id="controls">
       <li><b>Controls</b></li>
       <li><a href="#" id="start">Play</a></li>
       <li><a href="#" id="stop">Pause</a></li>
       <li><a href="#" id="next">Next</a></li>
       <li><a href="#" id="prev">Prev</a></li>
     </ul>
  </div>
<div id="warn" style="display:none"></div>
   </div>

Sekian dulu tutorial dari saya,.. semoga bermanfaat.

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250