Jquery Image Efek Kubus Berputar

Jquery Image Efek Kubus Berputar – ada banyak cara untuk membuat efek pada gambar di postingan blog, misalnya seperti pada Jquery gambar efek zoom bergeser dan membuat efek zoom pada gambar. 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 pada gambar menggunakan JQuery memungkinkan Anda untuk menyajikan urutan gambar dalam tampilan tiga dimensi dan dapat berputar untuk menampilan gambar dalam rentang waktu yang sudah ditentukan. Untuk melihat seperti apa gambar tersebut? Silahkan lihat, klik pada demo dibawah ini:
Fungsi Jquery image efek kubus berputar dengan mudah dapat ditambahkan ke postingan blog dengan pengaturan standar yang sesuai. Ini kemudian menampilkan gambar yang terkandung dalam divisi yang ditargetkan dalam siklus setiap dua detik. Sebuah rotasi acak memilih setiap kali untuk pindah ke gambar berikutnya. Highlight dan bayangan yang digunakan untuk meningkatkan efek 3D. Gambar dengan efek yang siap terpampang manis dan dapat membuat slideshow gambar yang indah dengan script jquery. Kubus sepenuhnya disesuaikan dan interaktif efek 3D foto slideshow serta sederhana dan mudah untuk mengkonfigurasikannya. Untuk memasangnya kedalam blog anda, berikut tutorial lengkapnya tentang Jquery Image Efek Kubus Berputar:

1. Login ke akun Blogger anda.
2. Kemudian pada Dashboard blog anda klik Template > Edit Html > Lanjutkan > centang Expand Template Widget.
3. Cari kode <head> gunakan CTRL+F untuk mempermudah pencarian.
4. Jika sudah ketemu, Copy kode berikut ini kemudian letakan tepat dibawah kode <head>.

5. Simpan Template.

Oke, sampai tahap sini sudah selesai dan gambar siap digunakan kedalam postingan atau bagian blog lainnya. Cara selanjutnya sekarang adalah memunculkan gambar tersebut supaya menjadi 3 dimensi saat diposting, caranya 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://mas-andes.blogspot.com/" id="dum" style="color: #dadada; color: #dadada; font-size: 10px; text-decoration: none;">Jquery</a></div>

<script src="http://faceblog-evolutions.googlecode.com/files/scriptjquery.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:

Ganti tulisan yang berwarna merah dengan URL Gambar milik anda.

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:

1. Login kemudian klik Tata Letak > Tambah Widget > pilih Javascript/HTML, kemudian paste kode script yang diatas tersebut kedalam kolom HTML yang tersedia.

2. Langkah terakhir, Save dan selesai lihat hasilnya.

Langkah yang sangat mudah dan tidak memakan banyak waktu, maka hasil dari Jquery Image Efek Kubus Berputar sudah melengkapi blog anda dengan sempurna.

6 Response to "Jquery Image Efek Kubus Berputar"

Unknown

2/14/13, 5:56 AM

Nice tutorial sobat! Tapi kalau saya gak salah, saya pernah pakai yang seperti ini di blog lain (dalam hal ini digunakan untuk widget popular post), berat nya gak ketulungan sob! Alhasil cukup memperlambat loading blog.. :)

Balas

Mas Andes

2/14/13, 2:17 PM

kalo soal loading blog pasti ada pengaruhnya juga sob, tapi gak berat2 amat kok.. :D
thanks kunjungannya sobat..

dedetea66

5/27/13, 7:40 PM

wiihh keren nih mas Andes,,

7/4/13, 9:24 AM

keren gang thanks

Muhammad Hasan

1/14/14, 5:46 PM

salam kenal gan tutor ea bagus
BTW ada tutor buat yg head ea ada di link ini gx http://demofaceblog.blogspot.com/2013/02/demo-jquery-image-efek-kubus-berputar.html

tu head ea bagus
ada tutor ea gx

makasih info ea (Y)

8/17/14, 8:10 AM

thanks bgt,, sangatt membantu .......

Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
Apabila artikel yang berjudul "Jquery Image Efek Kubus Berputar" ini bermanfaat, share ke jejaring sosial.

Konversi Kode

Blog Mas Andes

Jquery Image Efek Kubus Berputar

Berlangganan artikel via email

6 Response to "Jquery Image Efek Kubus Berputar"

Jquery Image Efek Kubus Berputar

Next

Newer Post

Previous

Older Post

Berlangganan artikel via email

6 Response to "Jquery Image Efek Kubus Berputar"