Terwujud

Desain Gambar Berputar Plus Membesar Saat Tersentuh Kursor



Jika bermanfaat, Mohon di Share ya !, jika ada unek-unek komen aja
Entah kenapa belakangan ini saya suka menulis tema desain di blog Terwujud.com, soalnya selain hobi menulis Artikel di blog, saya juga sedikit aktif desain foto melalui corel draw dan Photoshop (susah dihilangkan kalau sudah hobi heehee). Jika artikel sebelumnya membahas Modifikasi Gambar Kamuflase di Blog Saat Tersentuh Kursor, maka kali ini saya akan memaparkan tentang Desain Gambar Berputar Plus Membesar Saat Tersentuh Kursor.

Melakukan desain ini merupakan salah satu cara untuk mempercantik tampilan artikel blog anda, hal ini juga bertujuan untuk menarik perhatian pengunjung (benar bukan!!), dengan begitu bisa jadi pengunjung blog anda betah dan akan mengingat ulang bahwa blog anda menjadi salah satu blog favorit mereka.

Jika biasanya gambar tampil secara default, maka untuk mempercantik tampilan gambar yang default tersebut menjadi menarik, anda cukup mengikuti step by step cara yang saya jelaskan. (Arahkan Kursor pada gambar di bawah ini untuk melihat Demo secara langsung). Berikut Penjelasan:
Terwujud.com
Desain Gambar Berputar Plus Membesar Saat Tersentuh Kursor
1. Log In ke www.blogger.com
2. Buat atau edit artikel blog anda
3. Buka menu HTML bukan Compose
4. Copy dan Paste kode di bawah ini

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

<div id="sundaboy">
<a href="http://www.terwujud.com/2014/01/antara-ovj-dan-yks.html" target="_blank"><img alt="Terwujud.com" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq23Cs41NI6RRprRXBuREkt4FKObFD2hr7bWBaid1dsZBwhU5ECCDza5aVikbkMsNshFr8dCMpZg81yBoZAw9vsS_mhzRmm5TvN_taTQwEHfl5ssE80nkEBoOoyKA7n0DQ5RD2A6Da2Bk4/s1600/OVJ+dan+YKS.jpg" height="200" title="Gimana gambarnya, berputar dan membesarkan!!!" width="184" /></a>
</div>

5. Publish atau Perbaharui
6. Lihat Hasilnya

Keterangan:
  • Tulisan  scale(1.5) untuk memperbesar gambar. Silahkan ganti sesuai keinginan anda
  • Warna Merah dapat anda sesuaikan dengan keinginan anda, mulai dari link gambar, url gambar, title gambar serta tinggi-lebar gambar.
  • Tulisan rotate(360deg) merupakan kecepatan berputarnya gambar, anda bisa gandakan jumlahnya dari 360 menjadi 720 atau sesuai dengan kehendak masing-masing.
Demikian artikel tentang Desain Gambar Berputar Plus Membesar Saat Tersentuh Kursor, jangan lupa untuk membaca Cara Desain Gambar dengan Efek Miring di Blog. Semoga Tutorial Desain ini bermanfaat untuk tampilan artikel anda. Terima Kasih!!.


Artikelnya sudah di share, makasih ya !

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF

You Might Also Like:

Previous
Next Post »

Sudah ada 23 komentar

Saya akan sangat senang jika ada komentar yang membangun, tetapi:

*Jangan komentar SPAM
*Jangan menanam link
*Jangan ada unsur sara, Fornografi dan memojokkan

Komentar yang melanggar akan dimasukkan kedalam daftar SPAM dan tidak akan diijinkan lagi.

Klik dan Copy Icon di bawah:
:) :( hihi :-) :D =D :-d ;( ;-( @-) :P :o -_- (o) :p :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (y) (f) x-) (k) (h) cheer lol rock angry @@ :ng pin poop :* :v 100

By: Terwujud.com
Terima Kasih!!

  1. pertamax.... nice info and artikel, sukses terus

    ReplyDelete
    Replies
    1. Yuuuupss, terima kasih saya ucapkan kepada mas ahmad atas dukungannya

      Delete
  2. Menarik mas, tapi bagaimana kalau hanya memperbesar saja tanpa ada efek berputar, bagian mana yang harus dihapus ?

    ReplyDelete
    Replies
    1. Rotasi pada kode rotate(0deg) dirubah menjadi nol mas, coba deh hanya besar aja tanpa berputar

      Delete
  3. Keren Mas, tapi kalau buka nya kelamaan bisa pusing juga hehehehe

    ReplyDelete
  4. wow keren, ijin copy kode dan mempraktekannya bos, hehehe..

    ReplyDelete
    Replies
    1. Laksanakan sesegera mungkin mas, dan saya ucapkan terima kasih!!

      Delete
  5. keren nih, tapi bikin berat gak mas....

    ReplyDelete
    Replies
    1. kalau diletakkan di postingan ndak mas, tapi kalau untuk keseluruhan blog sepertinya iya alias berat.

      Delete
  6. keren jadinya , lebih dinamis blog nya sob
    nicepost

    ReplyDelete
    Replies
    1. Terima kasih kepada mas ilham efendi, langsung diterapkan ya!!

      Delete
  7. jadi atraktif dan menarik, trimakasih triknya, manteb

    ReplyDelete
    Replies
    1. terima kasih mas, langsung bergerak untuk praktek langsung, heehee

      Delete
  8. mantap pak.. kalo yang ini baru bisa.. kalo yang kemaren ga ada efeknya.. :)

    ReplyDelete
    Replies
    1. iya mas, saat itu masih tahap percobaan, ni baru jadi. terima kasih!!

      Delete
  9. trimakasih pak, hehe,jadi tau deh gmn caranya :)

    ReplyDelete
  10. wah jadi tambah keren ya mas gambar nya kalau ada efek berputar dan zzom nya. Bisa dicoba nih untuk blog saya agar lebih jelas ya gambar image nya sehingga mudah dipahami oleh pembaca nya :)

    ReplyDelete
    Replies
    1. Betul sekali mbak, saya segera akan melihat praktek yang mbak lakukan, heehee

      Delete
  11. kalau berputar malah pusing nih...yang bergoyang ada gak ya :)

    ReplyDelete
Copyright © 2014 Terwujud.com - All Rights Reserved