Cara membuat efek Rotasi dengan bayangan di Blogger. Tutorial blog kali ini adalah tentang memberikan efek Rotasi pada gambar blog.
Sobat tentunya ingin membuat blog sobat terlihat menarik di mata
pengunjung blog. Untuk membuat blog menarik dan terlihat keren tentu
saja ada macam-macam cara yang sobat dapat gunakan, salahsatunya adalah
dengan memberikan efek di gambar blog sobat misalnya efek rotasi.
Efek berikut ini anda tidak perlu menambahkan script jquery pada
template blog anda, efek berikut ini cukup sederhana yaitu hanya
menggunakan CSS. Untuk demonya sobat dapat melihat langsung live demonya
di gambar di postingan ini. Ok berikut adalah...
LIVE DEMO :
Membuat Efek Rotasi pada Gambar Blog
1) Masuk ke dashboard blogger lalu klik Template
2) Cari tag penutup ]]></b:skin>
3) Pastekan CSS di bawah ini tepat di atas tag penutup ]]></b:skin>.
.post-body img{
border-radius: 2%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover{ transition: all 2s ease-in-out;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
z-index: 999;
box-shadow: 8px -6px 5px rgba(50, 50, 50, 0.75);
}
Untuk menerapkannya pada postingan blog sobat tinggal mengupload gambar yang sobat inginkan.
Bagaimana sobat? keren gak? ok sekian artikel seocips untuk saat ini dan jangan lupa lihat artikel terbaru tentang tutorial blog lainnya. sekian dan selamat mencoba.