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 efek2 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 :
Simak langkah2 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.
Sekian dulu tutorial dari saya,.. Semoga bemanfaat.
Welcome to my blog 😊
