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)

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>
.rotreys {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.rotreys: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="rotreys">

 <img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3hJEjIrUrSwG-xP6tWR_ANsOXRgLp0fRLnL2IgEesKBY_YKGeRC-P3Y9aGpVj3Ago79BNIdT2cRttO0trZBcXXdNiZHVyxo177pBmkRLTo03dJnGDIKJahr_q3G1iVHvdug2GUscf-NhL/s1600/Css-Terwujud.jpg" alt="Membuat Miring/Ganti kalimat" width="320" />

</span>

Atau Dengan Perubahan Posisi Kode

<div class="separator" style="clear: both; text-align: center;">
<span class="rotreys"><img alt="Terwujud.com" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3hJEjIrUrSwG-xP6tWR_ANsOXRgLp0fRLnL2IgEesKBY_YKGeRC-P3Y9aGpVj3Ago79BNIdT2cRttO0trZBcXXdNiZHVyxo177pBmkRLTo03dJnGDIKJahr_q3G1iVHvdug2GUscf-NhL/s1600/Css-Terwujud.jpg" height="240" width="320" /></span></div>

6. Untuk kode keseluruhannya adalah:

<style type="text/css">
.rotreys {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.rotreys:hover {
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
}
</style>
<span class="rotreys">
<div class="separator" style="clear: both; text-align: center;">
<img alt="Terwujud.com" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3hJEjIrUrSwG-xP6tWR_ANsOXRgLp0fRLnL2IgEesKBY_YKGeRC-P3Y9aGpVj3Ago79BNIdT2cRttO0trZBcXXdNiZHVyxo177pBmkRLTo03dJnGDIKJahr_q3G1iVHvdug2GUscf-NhL/s1600/Css-Terwujud.jpg" height="240" width="320" />
</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!!.