Cara Membuat Efek Gambar Disentuh pada Blog

arahkan kesini

Berkreasi dalam dunia blogging memang sangat menyenangkan, sampai sampai tidak terasa lagi waktu yang telah berlalu. dalam dunia blogging, tampilan sebuah blog yang memiliki kreasi tinggi akan menambah pengunjung berminat untuk berkunjung ke blog tersebut, apalagi di tambah dengan artikel-artikel yang sangat menarik, akan semakin mendongkrak jumlah pengunjung. Betul tidak? (tanya A'a Gym).

Kali ini saya sedikit berbagi tentang cara membuat gambar dalam posting blog berputar dan membesar saat di sentung oleh cursor, untuk contohnya coba sobat arahkan cursor ke gambar di atas, maka gambar akan berputar dan membesar. Apabila sobat blogger sekalian berminat untuk mencoba silakan ikuti langkah-langkah berikut ini:

1. Seperti biasa sobat harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode </head>
5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>




<style>#kaka-jr 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;}#kaka-jr img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>


6. dan sobat klik save / simpan template.

Langkah selanjutnya untuk penenpatan gambar dalam postingan.

Sobat harus menambahkan kode  <div id="kaka-jr"> sebelum url gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:

<div id="kaka-jr"><a href="http://kaka-jr.blogspot.com/"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQP6vYmcUHGApwSjvG5YmjzxMbcVNKxi_zOjtMRgcHZXuk92C9FOg" /></a></div>

keterangan:
  1. kode berwarna merah adala kode pembuka dan penutup
  2. kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
  3. Setelah semuanya selesai klik publikasikan. 
Oke sekian dulu tips "Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse". Semoga bermanfaat ya...
Selamat berkreasi sob...


Jangan lupa comment & like, yaaa...(^^,)v

Share:

14 comments

  1. nice tips gan, saya coba ya,
    jangan lupa mampir ke blog saya http://erulsimplee.blogspot.com

    ReplyDelete
  2. @Erul Simpleokey sob...:d
    meluncur ke tkp deh...:y

    ReplyDelete
  3. gan, kalo cuman membesar aja gak pake berputar kayak mana ya??

    ReplyDelete
  4. balas nya di blog ane aja ya gan supaya bisa langsung ganti codenya :w

    ReplyDelete
  5. wah blognya mantap sob,,
    jgan lupa kunjungi balik ya
    zvelite.com
    topfivetop.blogspot.com
    tipseofriendly.blogspot.com
    rangkaian-biografi.blogspot.com

    ReplyDelete
  6. mantap informasinya,, saya akan coba pasng di blog saya...

    ReplyDelete
  7. ;p keren gan thanks jangan lupa kunjungan baliknya ya ... http://xps-hack.blogspot.com

    ReplyDelete