Membuat efek kubus berputar pada gambar dengan JQuery ~ blog sepot

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.

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari 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

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.

Langkah yang sangat mudah dan tidak memakan banyak waktu, maka hasil dari Membuat efek Kubus Berputar pada gambar dengan JQuery sudah melengkapi blog anda dengan sempurna.

DEMO nya seperti ini:

Terima kasih telah membaca artikel tentang Membuat efek kubus berputar pada gambar dengan JQuery di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.