Membuat efek kubus berputar pada gambar dengan JQuery – ada banyak cara untuk membuat efek pada gambar di postingan blog, misalnya seperti Efek zoom dengan CSS dan Efek zoom dengan JQuery. Jika pada contoh kedua gambar tersebut adalah membuat efek gambar menjadi membesar, maka pada pada efek gambar yang akan saya bahas ini bukan efek zoom lagi melainkan efek gambar menggunakan JQuery.
5. Simpan Template.
Simak langkah2 dibawah ini:
1. Login ke akun blogger sobat2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode
4. Lalu masukan script di bawah ini tepat di bawah kode
<head>4. Lalu masukan script di bawah ini tepat di bawah kode
<head> <script src='https://sites.google.com/site/vanzdy/script/jquery.js' type='text/javascript'/>5. Simpan Template.
Cara selanjutnya sekarang adalah memunculkan gambar tersebut supaya menjadi 3 dimensi saat diposting, caranya sobat cukup masukan kode script dibawah ini pada kolom posting mode HTML:
<div id="defaultCube" style="height: 300px; width: 500px;">
<img alt="Jquery Image Efek Kubus Berputar" src="URL GAMBAR 1" />
<img alt="Jquery Image Efek Kubus Berputar" src="URL GAMBAR 2" />
<img alt="Jquery Image Efek Kubus Berputar" src="URL GAMBAR 3" />
<img alt="Jquery Image Efek Kubus Berputar" src="URL GAMBAR 4" />
<img alt="Jquery Image Efek Kubus Berputar" src="URL GAMBAR 5" />
</div>
<div align="center" id="dumdiv" style="color: #dadada; font-size: 10px;" valign="top">
<a href="http://irvan-efendy.blogspot.com/" id="dum" style="color: #dadada; color: #dadada; font-size: 10px; text-decoration: none;">Jquery</a></div>
<script src="https://sites.google.com/site/vanzdy/script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var sds = document.getElementById("dum");
if(sds == null){
alert("You are using a free package.\n You are not allowed to remove the tag.\n");
}
var sdss = document.getElementById("dumdiv");
if(sdss == null){
alert("You are using a free package.\n You are not allowed to remove the tag.\n");
}
if(sds!=null){
$('#defaultCube').imagecube({
direction: 'random', // Direction of rotation: random|up|down|left|right
randomSelection: ['up', 'down', 'left', 'right'], // If direction is random, select one of these
speed: 2000 // Time taken (milliseconds) to transition
});
}
$(function(){
var alt = 0;
$("#left").live(function(){
alt%2 == 0?
$("#flipMe")
.css("background-color", "#000")
.animate({height:200+"px", width: 0+"px",marginLeft: 250+"px"},590)
.css("background-color", "#555")
.animate({height:200+"px", width: 500+"px",marginLeft:0+"px"},820):
$("#flipMe")
.css("background-color", "#555")
.animate({height:200+"px", width: 0+"px", marginLeft: 250+"px"},590)
.css("background-color", "#000")
.animate({height:200+"px", width: 500+"px",marginLeft: 0+"px"},820);
alt++;
})
$("#top").live(function(){
alt%2 == 0?
$("#flipMe")
.css("background-color", "#000")
.animate({width:500+"px", height: 0+"px", marginTop: 100+"px"},590)
.css("background-color", "#555")
.animate({width:500+"px", height: 200+"px", marginTop: 0+"px"},820):
$("#flipMe")
.css("background-color", "#555")
.animate({width:500+"px", height: 0+"px", marginTop: 100+"px"},590)
.css("background-color", "#000")
.animate({width:500+"px", height: 200+"px", marginTop: 0+"px"},820);
alt++;
})
$("#right").live(function(){
alt%2 == 0?
$("#flipMe")
.css("background-color", "#000")
.animate({height:200+"px", width: 0+"px",marginLeft: 250+"px", marginRight: 250+"px"},590)
.css("background-color", "#555")
.animate({height:200+"px", width: 500+"px",marginLeft:0+"px",marginRight: 0+"px"},820):
$("#flipMe")
.css("background-color", "#555")
.animate({height:200+"px", width: 0+"px", marginLeft: 250+"px",marginRight: 250+"px"},590)
.css("background-color", "#000")
.animate({height:200+"px", width: 500+"px",marginLeft: 0+"px", marginRight: 0+"px"},820);
alt++;
})
$("#bottom").live(function(){
alt%2 == 0?
$("#flipMe")
.css("background-color", "#000")
.animate({height:200+"px", width: 0+"px",marginLeft: 250+"px", marginRight: 250+"px"},590)
.css("background-color", "#555")
.animate({height:200+"px", width: 500+"px",marginLeft:0+"px",marginRight: 0+"px"},820):
$("#flipMe")
.css("background-color", "#555")
.animate({height:200+"px", width: 0+"px", marginLeft: 250+"px",marginRight: 250+"px"},590)
.css("background-color", "#000")
.animate({height:200+"px", width: 500+"px",marginLeft: 0+"px", marginRight: 0+"px"},820);
alt++;
})
});
</script>
Keterangan:
Untuk URL Gambar nya sobat ubah sendiri sesuai kesukaan sobat
Untuk URL Gambar nya sobat ubah sendiri sesuai kesukaan sobat
6. Selesai dan lihat hasilnya.
Kode script di atas bisa di letakkan dimana saja terserah keinginan anda, jika anda ingin menaruh gambar tersebut pada sidebar blog maka caranya:
- Login kemudian klik Tata Letak > Tambah Widget > pilih Javascript/HTML.
Kemudian paste kode script yang diatas tersebut kedalam kolom HTML yang tersedia - Langkah terakhir, Save dan selesai lihat hasilnya.
DEMO nya seperti ini:
Tags:
#Efeck Gambar
#JQuery
