Cara Membuat Gambar Dengan Efek Miring di Blog

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP3jyjA5PpPS-3pKZC1ZTEcOC0K34JiXDHGvhe21rCH44K1mpq62ZfRGpiM4ULxImagrxjf3KAIUGdZ3VdyPoorzIXRYNFWYQ1KDOJJ5_zW6a7aTt0EHCwZvGb5HJfxgCKawSlk9EutZi9/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/AVvXsEiP3jyjA5PpPS-3pKZC1ZTEcOC0K34JiXDHGvhe21rCH44K1mpq62ZfRGpiM4ULxImagrxjf3KAIUGdZ3VdyPoorzIXRYNFWYQ1KDOJJ5_zW6a7aTt0EHCwZvGb5HJfxgCKawSlk9EutZi9/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/AVvXsEiP3jyjA5PpPS-3pKZC1ZTEcOC0K34JiXDHGvhe21rCH44K1mpq62ZfRGpiM4ULxImagrxjf3KAIUGdZ3VdyPoorzIXRYNFWYQ1KDOJJ5_zW6a7aTt0EHCwZvGb5HJfxgCKawSlk9EutZi9/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!!.

http://www.terwujud.com/2014/02/cara-desain-gambar-dengan-efek-miring.html

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: