Jumat, 12 Juli 2013

Membuat Gambar Berputar Tersentuh Cursor

DEMO


Mungkin Sobat Afta ingin menerapkan gambar berputar seperti diatas poda blog anda,Sebenarnya Membuat Gambar Berputar Tersentuh Cursor pada blog cukup lah mudah bila kita tau Ilmunya,Oleh karena itu Ilmu Sangatlah penting dan mahal Bahkan diperlukan biaya dan waktu untuk mendapatkan ilmu itu,,,Hait namun jangan kwatir Dunia Afta Berbagi dengan gratis ,cuma diperlukan ketelitian dan kesabaran,
Sebenarnya selain membuat gambar berputar tersentuh cursor Dunia Afta juga berbagi postingan
Membuat Gambar Membesar Tersentuh Cursor,
Bila sobat Afta ingin menerapkan pada blog sobat atau sekedar ingin melihat silahkan klik "DISINI" 
Dan langsung aja pada topik Membuat Gambar Berputar Tersentuh Cursor pada blog
ikuti langkah lankah berikut

1.Login Blogger sobat


2.Pilih Template di dasbor blog
3. Klik Edit HTML
4. Selanjut nya cari code </head> dan tambahkan code script di bawah ini di atas / sebelum code </head>  (Gunakan CTRL + F untuk memudahkan pencarian)


CODE SCRIPT 
<style>#Hengky img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;} #Hengky img:hover{ -o-transform: scale(1.3) rotate(360deg); -moz-transform: scale(1.3) rotate(360deg); -webkit-transform: scale(1.3) rotate(360deg);}</style>

5.Simpan/Save Templete

6. Untuk selanjut nya memasang gambar nya di postingan blog 
     Dan COPY PASTE code dibawah ini pada halaman HTML


<div id="Hengky">
<a href="http://1.bp.blogspot.com/-RA8yZSAKQSA/Ud_csl3sBcI/AAAAAAAABBA/a2IE8BeJQRk/s1600/AL+ANBYAA%27+33.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://1.bp.blogspot.com/-RA8yZSAKQSA/Ud_csl3sBcI/AAAAAAAABBA/a2IE8BeJQRk/s320/AL+ANBYAA%27+33.jpg" width="320" /></a></div>

Keterangan Code
#Ganti warna biru dan merah dengan alamat url gambar anda#

7.Terahir Post entri atau Pubikasikan postingan>>SELESAI >>dan lihat hasilnya

NAMUN
Code diatas digunakan untuk satu tujuan gambar,bila anda inginkan tujuan gambar lain dan akan muncul gambar lain maka ganti yang warna biru dengan url alamat gambar anda

Seperti contoh dibawah ini


<div id="Hengky">
<a href=" https://lh5.googleusercontent.com/-UMVTEQCgXq4/Ud_ozYPYZuI/AAAAAAAABBY/BgefJLs0BmY/w1043-h364-no/a2.jpg " imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://1.bp.blogspot.com/-RA8yZSAKQSA/Ud_csl3sBcI/AAAAAAAABBA/a2IE8BeJQRk/s320/AL+ANBYAA%27+33.jpg" width="320" /></a></div>

MAKA hasilnya silahkan ada klik gambar dibawah ini


Gambar Berputar Tersentuh Cursor ini juga bisa diterapkan untuk membuka halaman baru dengan cara memasuk kan LINK tujuan halaman,
Seperti contoh dibawah ini CODE diatas yang berwarna biru ganti dengan LINK halaman yang ingin anda tuju


<div id="Hengky">
<a href=" http://duniaafta.blogspot.com/2013/07/rcti-tv-streaming.html  " imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://1.bp.blogspot.com/-RA8yZSAKQSA/Ud_csl3sBcI/AAAAAAAABBA/a2IE8BeJQRk/s320/AL+ANBYAA%27+33.jpg" width="320" /></a></div>

Utuk melihat hasilnya silahkan Sobat Afta klik gambar maka sobat akan di bawa masuk kehalaman baru

Sekian dulu ya saya rasa Postingan Cara Membuat Gambar Berputar Tersentuh Cursor Pada Blog
Sudah selesai dan malam mulai larut mata pun mulai ngantuk,,saya ucapkan sampai jumpa lagi dan
selamat mencoba semoga berhasil

Tidak ada komentar:

Posting Komentar