Membuat efek flux slider keren di blog

Hallo,.. brother n sister,.. :)
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² tersebut menggunakan Google Chrome dan alhamdulillah hasil nya maksimal, sedangkan kalau di browser lain seperti (Internet Explorer, Mozilla, dan Opera) saya belum bisa memastikan nya.
Untuk Demo efek flux slider nya bisa sobat lihat gambar di bawah ini sedangkan Untuk Live Demo bisa sobat klik tombol dibawah :

DEMO Klik disini!!!

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas 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 masukan 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 sobat. 

Penerapannya:

Supaya kode di atas muncul di posting blog sobat » Silahkan buat Entri baru gunakan mode HTML kemudian masukan kode berikut ini kedalam halaman posting blog sobat.

<div class="example">
      <div id="slider">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqh1FO3lJlrMfzUwlmdKYA6n4eVXCJjKXrBT3V77aACNV6vZlH8oJd6U4W8ybqCKtYkcOfGoamDWzojiG1DQDFEGsBnTXUNDhRAotdnypNNFPa-HjN1uJr3oHdsoj_CHi7qFZX7VDA17pc/s1600/BIE_Green+Earth1.jpg" alt="" />
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdhJAhc3fQ_a8IfM30CdNASsTv0JZ4MX60ikgquvPWucSvcPFhaoTku8hwj9u1qRTW5GLu7OiXgQaI7pIoPxHnwTDSEP-JjxpNPBGO_98dQYb-Mt5bC3CguW5GLGIMu5T3p5H1jhebQL7F/s1600/BIE_Green+Earth2.jpg" alt="" />
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheE8FuxaO31swC_94Rp3-YFQIkecuaoLMKwdFaiDFTnmud1g-pERt1UljXXIoyJzkQaO7766KEUFIAra-qlzLF_E0mIDFgX8dTmPMRASUDBHQYLHzUKC8ZSLnAoCeFSFNnDM0Btw3A9eya/s1600/BIE_Green+Earth3.jpg" alt="" />
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCS5bxy-eG4VkcASQHPQ5qytuDuS6HLe-uJoH2MZaNaZwK7YuaP3P67-FkVkS0zesq59VO6xhd6NoDlLA7tq-I25nhA3RqBQz4qiTUGmitn5xGzPzwSASyYYj-VbLB_3tQdjyGQ0vClSVG/s1600/BIE_Green+Earth4.jpg" alt="" />
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqQu95nZ8Ad1NBzcNKprAZkQ7b6kgr-cJYeaiyHHEgsVbm0JHUGSWfGtJCGCWXgGaw_F41Di26LIuw9kR__OqhdcOdOby21-VLjUATyUJ_4JznPfq8bz1sOd2NIuM6FhNKnMZXhrzlFW-I/s1600/BIE_Green+Earth5.jpg" alt="" />
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP1cAxvQ619Xnwk1oGRVbvGWWX5kfLkwQIqmo-rrhvcMLAoS_ru0dkBehmPYrDtFH6W9DppsASmEub0KEiuuBJOSxKCMQmu6EKYIBo6bTHdf7vpQSh0ZFqOEMsqI4ZD_wVDegU4ae7yvsF/s1600/BIE_Green+Earth6.jpg" alt="" />
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4NvMDkBU2rR_W3A0sBgBKOjjukYHDlHxw_QE3Bxgr6b4qtHGwoVWgtQZ6ZQmPiVnZ5ljf7F9a4j53LFwdCD0x2IiKv4PfrehO1dTyP4B90Dno1YDasVpbNdzhi5WikgUCPdLVsZhr5yjY/s1600/BIE_Earth+Digital7.jpg" alt="" />
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDtm3vBeaDSqt_SRpyawZgABw5nFSE5hyUXe0groSa1iUI6AC9GJ87_JJnob-mqupFuUgLkucj-JRbI2nwCjhKqtxF0I1kMnR-R80GYVBe4GC55InHwVh1eNzpeXHLEnCy0a8Rv6a17Pfm/s1600/BIE_Earth+Digital8.jpg" alt="" />
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL91HO88x5Bjy0pde07vjxZyl93k4nrsKY8yX9VeLpmawfMnaMLixX1ZyBnKcZiQFPEkEokc58vdJQ88sEsGtDzy8G7aWgzphOA-I9Pltxk7GBFEHskyXi8imn2CJCre6crB2DetpTS9MU/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 bemanfaat.

Membuat efek flux slider keren di blog 2014-06-06T04:44:00-07:00 Rating: 4.5 Diposkan Oleh: Unknown