Terwujud
KomTer,Komik Online
Smartphone Mainbitcoin

Cara Desain Gambar dengan Efek Miring di Blog


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="http://2.bp.blogspot.com/-FH80CNcepkc/Uwg4T0PFKcI/AAAAAAAAAZ0/6Cf4px2eqAY/s1600/Css-Terwujud.jpg" />
</span>

Atau Dengan Perubahan Posisi Kode

<div  style="text-align: center;">
<span class="miring"><img alt="Terwujud.com" src="http://2.bp.blogspot.com/-FH80CNcepkc/Uwg4T0PFKcI/AAAAAAAAAZ0/6Cf4px2eqAY/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="http://2.bp.blogspot.com/-FH80CNcepkc/Uwg4T0PFKcI/AAAAAAAAAZ0/6Cf4px2eqAY/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!!.

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

9 komentar

Pertamaxnya saya bawa pulang ya Mas buat oleh-oleh :D

Balas

Silahkan mas, jangan lupa bagi-bagi oleh-olehnya ya :D

Balas

Silahkan mas ahmad, laksanakan segera

Balas

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

Balas

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

Balas

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

Balas

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

Balas

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 :'(

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