Terwujud

Cara Desain Gambar dengan Efek Miring di Blog



Jika bermanfaat, Mohon di Share ya !, jika ada unek-unek komen aja
Bagaimana jika ada gambar yang miring dari kanan ke kiri jika kursor mouse diarahkan pada gambar tersebut, tentunya akan membuat daya tarik tersendiri bukan. Nah,..untuk membuat Efek ini tidak memerlukan Ilmu yang cukup tinggi untuk menerapkannya.

Cara desain Gambar dengan efek miring pada postingan blog merupakan cara yang efektif diterapkan jika anda ingin membuat sensasi untuk menarik minat pengunjung, tidak sekedar menyajikan informasi penting saja, namun membuat gambar menjadi miring ketika disentuh kursor tentunya akan membuat betah pengunjung dan kemungkinan besar mereka ingin mencari artikel yang sejenis. Langsung saja berikut: (coba arahkan kursor pada Gambar di bawah)

Terwujud.com

Cara Desain Gambar dengan Efek Miring di Blog

1. Log In ke Blogger di www.blogger.com
2. Buat atau Edit Postingan Artikel
3. Buka Menu HTML dan Copy Paste kode Css di bawah ini
<style>
.miring {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.miring:hover {
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
}
</style>
4. Setelah itu persiapkan Gambar/Foto
5. Letakkan Kode/url Foto setelah kode Css di atas, Contoh:
<span class="miring"><img alt="Membuat Miring/Ganti kalimat" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAMKNYUcWI9DKvK08uk3bHbdBPV9gTi10_AJu9OGRBnMN33ayKDK9gc5wARzTxxeQPRdoYP-nEZiv94FiLcLNY84Vzyh7Eo5_zJywAnfKQzIpeZw4tpC0EWcPp0_WTkdXgjDWpXfJ-2iHd/s1600/Css-Terwujud.jpg" />
</span>

Atau Dengan Perubahan Posisi Kode

<div  style="text-align: center;">
<span class="miring"><img alt="Terwujud.com" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAMKNYUcWI9DKvK08uk3bHbdBPV9gTi10_AJu9OGRBnMN33ayKDK9gc5wARzTxxeQPRdoYP-nEZiv94FiLcLNY84Vzyh7Eo5_zJywAnfKQzIpeZw4tpC0EWcPp0_WTkdXgjDWpXfJ-2iHd/s1600/Css-Terwujud.jpg" /></span></div>
6. Untuk kode keseluruhannya adalah:
<style type="text/css">
.miring {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.miring:hover {
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
}
</style>
<span class="miring">
<div style="text-align: center;">
<img alt="Terwujud.com" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAMKNYUcWI9DKvK08uk3bHbdBPV9gTi10_AJu9OGRBnMN33ayKDK9gc5wARzTxxeQPRdoYP-nEZiv94FiLcLNY84Vzyh7Eo5_zJywAnfKQzIpeZw4tpC0EWcPp0_WTkdXgjDWpXfJ-2iHd/s1600/Css-Terwujud.jpg" />
</span>
</div>
7. Selesai dan Lihat Hasilnya

Keterangan:
  • (7deg) : Tingkat kemiringan, silahkan ganti sesuka anda
  • Kode Merah adalah alamaturl Gambar 
  • Height (adalah tinggi) dan width (adalah lebar) silahkan diganti sesuai keinginan anda
  • Center: Posisi Gambar 
  • Kode <style type="text/css"> bisa diganti <style> jika kode pertama tidak berfungsi

Anda bisa cek langsung pada gambar di atas, silahkan arahkan kursor anda dan lihat reaksinya. Demikian artikel tentang Cara Desain Gambar dengan Efek Miring di Blog, semoga memberi makna dan manfaat bagi saya dan kita semua. Salam Terwujud.com!!.


Artikelnya sudah di share, makasih ya !

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF

You Might Also Like:

Previous
Next Post »

Sudah ada 9 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. Pertamaxnya saya bawa pulang ya Mas buat oleh-oleh :D

    ReplyDelete
    Replies
    1. Silahkan mas, jangan lupa bagi-bagi oleh-olehnya ya :D

      Delete
  2. Selamat sore sobat. Salam hangat dari Admin Tersexy.com. Artikelnya sangat bermanfaat sekali untuk saya yang masih pemula ini. Izinkan saya memfollow blog anda untuk mengetahui artikel terbarunya. Kalau tidak keberatan, silahkan bisa follow balik ya. Terimakasih sobat

    ReplyDelete
    Replies
    1. Terima kasih mas wisma, segera akan saya laksanakan kunjungan baliknya.

      Delete
  3. Sudah saya arahkan kursornya ke gambar tapi ga terjadi apa-apa pak.. apa hanya ber efek pada browser tertentu.. saya pake mozzil...

    ReplyDelete
    Replies
    1. Bisa kok mas, saya sudah melihatnya melalui 3 browser, yaitu Opera, Mozilla dan Google Chrome dan gambarnya bergerak, coba deh di cek lagi

      Delete
  4. bang , gw kan pasang template nih yg semua gambarnya kalo di posting pada miring , terus gw pengen di satu postingan gw itu ada yg gak miring gambarnya gimana ya gan? tolong gan pemula :'(

    ReplyDelete
Copyright © 2014 Terwujud.com - All Rights Reserved