Cara membuat efek Rotasi dengan bayangan di Blogger. Tutorial blog seocips 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, salah satunya adalah dengan memberikan efek di gambar blog sobat, misalnya efek rotasi plus shadow seperti di artikel kami ini.

Berbicara mengenai efek gambar blog, Sebelumnya juga seocips telah membagikan artikel tentang membuat animasi hover dengan deskripsi pada gambar di blog, dan juga jquery crousel slider pada gambar dan efek Quake pada gambar blog. Efek Blog lainnya dapat sobat lihat di artikel seocips yang lain. Nah berikut ini adalah...

Live Demo  Efek Rotasi+Shadow

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 gambar di postingan ini. ( arahkan kursor mouse ke gambar ).

Membuat efek Rotasi+Shadow pada Gambar Blog

Cara 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 seocips terbaru tentang tutorial blog lainnya. sekian dan selamat mencoba.
6 Komentar untuk "Cara membuat efek Rotasi+Shadow pada Gambar Blog"

tutorialnya cakep cakep..... jadi pengen ngerasain semuanya jurus jurus nya.....

hehe iya gan kebetulan saya juga lagi belajar jurus seperti :-b dan :-t tapi susah juga belajarnya sampai sampai jadi laper =p~

seocips .... keren2 tutorialnya, salut banget !!! so thanks for input !!!!! good job !

Wah thanks gan..terimakasih juga telah berkunjung..

heh... rotasi gambarnya mantep bro:)

Oh ya maaf gan Brando Mewo, OOT :P ane mau nanya cara agar meta description dan meta keywordsnya biar fleksibel kaya template agan ini gimana ya...?

meta content='Cara membuat efek Rotasi Shadow pada Gambar Blog, Cara membuat efek Rotasi pada Gambar Blog, Cara membuat efek Shadow di Blog, membuat efek Rotasi dengan bayangan pada Gambar di Blog Blogger Blogspot' name='description'/>
meta content='Cara membuat efek Rotasi+Shadow pada Gambar Blog, SEOCIPS Tentang Cara membuat efek Rotasi+Shadow pada Gambar Blog' name='keywords'/>

Maklum, saya masih newbie di pemograman html5 & css3 hehehe... :)

Salam kenal... idman-99.blogspot.com

Itu karena saya memakai meta deskripsi dan meta keyword otomatis ( bukan meta deskripsi/keyword yang diisi secara manual ) kebanyakan template blog yang dibagikan sekarang sudah memakai yang otomatis kayak gini dan saya lihat sobat juga sudah menerapkan di blognya sobat.