Terwujud
KomTer,Komik Online
Smartphone Mainbitcoin

Desain Gambar Berputar Plus Membesar Saat Tersentuh Kursor


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="http://2.bp.blogspot.com/-QYV0USE-Yaw/Us19g4MOZ1I/AAAAAAAACWA/GO3aRDVVvu0/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!!.

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF
Next
« Prev Post
Previous
Next Post »

23 komentar

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

Balas

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

Balas

Yuuuupss, terima kasih saya ucapkan kepada mas ahmad atas dukungannya

Balas

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

Balas

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

Balas

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

Balas

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

Balas

keren jadinya , lebih dinamis blog nya sob
nicepost

Balas

jadi atraktif dan menarik, trimakasih triknya, manteb

Balas

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

Balas

trimakasih pak, hehe,jadi tau deh gmn caranya :)

Balas

iya mas, terima kasih!!!

Balas

Laksanakan sesegera mungkin mas, dan saya ucapkan terima kasih!!

Balas

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

Balas

Terima kasih kepada mas ilham efendi, langsung diterapkan ya!!

Balas

terima kasih mas, langsung bergerak untuk praktek langsung, heehee

Balas

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

Balas

sama-sama mbak ayu, terima kasih!!

Balas

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 :)

Balas

Betul sekali mbak, saya segera akan melihat praktek yang mbak lakukan, heehee

Balas

Ok mas, tak coba praktekkan ..

Balas

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

Balas

nanti saya buatkan ya mbak

Balas

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.

Icon:
:) ^_^ :D =D (smile dan tertawa)
:( =( (marah dan Bingung)
:-bd :-d (oke)
|o| (tepuk tangan)

By: Terwujud.com
Terima Kasih!!

Copyright © 2014. Terwujud.com | Sumber Informasi Terpercaya - All Rights Reserved | Template Created by Kompi Ajaib | Modified by Ibrahim Lubis