membuat efek zoom gambar pada blog


Dengan semakin berkembangnya cascading style sheet dan kompatibilitasnya dengan browser baru, desain blog dan website menjadi lebih kreatif.

Sobat mungkin pernah menggunakan Photoshop secara manual untuk menambahkan bayangan pada gambar, tapi sekarang berkat CSS3 Anda dapat menambahkan bayangan  untuk semua gambar sobat secara otomatis. Kita akan belajar bagaimana untuk memperkecil ukuran gambar besar dan bagaimana kita bisa membuat gambar tersebut zoom ke ukuran aslinya pada saat mouse diarahkan ke gambar. Semoga sobat akan menyukainya.

efek zoom pada gambar
arahkan mouse ke gambar untuk zoom


Caranya cukup mudah;
  1.     Masuk ke Blogger > Design > Edit HTML > centang Expland Template
  2.     Back up  template sobat
  3.     Cari kode ]]></b:skin>
  4.     Sebelum kode ]]></b:skin> paste kan kode di bawah ini
.julak-css img{ 
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/ 
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/ 
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/ 
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ 
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/ 
-o-transition-duration: 0.5s; /*Opera Animation duration*/ 
opacity: 0.5
margin: 0 10px 5px 0; 

.julak-css img:hover{ 
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/ 
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/ 
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/ 
box-shadow:0px 0px 30px gray; 
-webkit-box-shadow:0px 0px 30px gray; 
-moz-box-shadow:0px 0px 30px gray; 
opacity: 1; 
}


Sekarang jika Anda ingin gambar muncul dengan efek ini, cukup menggunakan kode di bawah ini pada posting blog, menu HTML.

<div class="julak-css">
<img src="URL Gambar Masukkan di sini " />
</div>



Upload gambar Anda ke editor Blogger ganti URL Gambar Masukkan di sini dengan link gambar Anda. Lalu lihat blog Anda untuk melihatnya. 

contoh penerapannya seperti ini
<div class="julak-css">
<img src="http://1.bp.blogspot.com/-SdqcCFtiLhQ/T1i-99TFuDI/AAAAAAAAAm0/TLbPS63QJO0/s1600/cara+menghilangkan+bau+badan+dan+ketiak.jpeg" /></div>

dan seperti ini 
<div class="julak-css"><a href="http://1.bp.blogspot.com/-SdqcCFtiLhQ/T1i-99TFuDI/AAAAAAAAAm0/TLbPS63QJO0/s1600/cara+menghilangkan+bau+badan+dan+ketiak.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-SdqcCFtiLhQ/T1i-99TFuDI/AAAAAAAAAm0/TLbPS63QJO0/s1600/cara+menghilangkan+bau+badan+dan+ketiak.jpeg" /></a><img src="http://1.bp.blogspot.com/-SdqcCFtiLhQ/T1i-99TFuDI/AAAAAAAAAm0/TLbPS63QJO0/s1600/cara+menghilangkan+bau+badan+dan+ketiak.jpeg" /></div>

Note ; Efek ini kompatibel dengan versi terbaru dari Mozilla, Safari, Opera, Chrome namun tidak efektif dengan IE. Selamat mencoba. Silakan hias gambar blog sobat dengan efek zoom dan berbayang.

No comments:

Post a Comment

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Bila Anda punya nama atau blog gunakan komentar sebagai "Name/ URL".

Sebelumnya vito minta maaf yg sebesar"nya jika komentar anda belum sempat dibales. ^^

Followers

Lagi Naik Daun