– ada banyak cara untuk membuat efek pada gambar di postingan blog, misalnya seperti
. Jika pada contoh kedua gambar tersebut adalah membuat efek gambar menjadi
, maka pada pada efek gambar yang akan saya bahas ini bukan efek zoom lagi melainkan efek gambar menggunakan JQuery.
Simak langkah2 dibawah ini:
1. Login ke akun blogger
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'/>Copy
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> Copy
Keterangan :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.
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:
Welcome to my blog 😊
Modal Kecil bisa mendapatkan hasil yg luar biasa...
My life is my message.
jangan lupo mampir ke blog saya ya gan di www.portalcoding.com
Cuma Slidernya tidak bisa jalan ya jika blogspot di alihkan ke dot.ID
Mohon infonya.
Tolong gan !!