MINTA DO'ANYA BIAR LANGGENG ~Mi*El~


Home » » Cara Membuat Gambar Berputar dan Membesar Saat Tersentuh Cursor

Cara Membuat Gambar Berputar dan Membesar Saat Tersentuh Cursor

Assalamu'alaikum,,,

Met malem sobat, sekarang akan saya kasih bagaimana caranya membuat gambar yang ada di dalam blog bisa berputar maupun membesar saat tersentuh sama cursor.

Cara Membuat Gambar Berputar Tersentuh Cursor :
  • Login Blogger.com
  • Klik Template
  • Edit HTML => expand template widget => Cari kode  ]]></b:skin>
  • Letakkan kode di bawah ini di tepat atas kode  ]]></b:skin> :
Gambar berputar di posting blog :
.post img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}.post img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
Gambar berputar dan membesar di posting blog :
.post img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}.post img:hover{-o-transform: scale(1.2) rotate(360deg) translate(0px);-moz-transform: scale(1.2) rotate(360deg) translate(0px);-webkit-transform: scale(1.2) rotate(360deg) translate(0px);-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}
Gambar Post dan Komentar :
.img{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out}.img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
Hanya Gambar comment :
.comment img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}.comment img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
Hanya Gambar Header saja :
.header img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}.header img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
  • Save template
Catatan : Kode-kode diatas sebenarnya sama, yang membedakan hanyalah perintah yang telah aq beri warna hijau pada fontnya.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BLOG*ISLAM

Enter your email address:

Delivered by FeedBurner

2 komentar:

 
Support : KANG WEB
Copyright © 2013. BLOG*ISLAM - All Rights Reserved
Proudly powered by Blogger