Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara Menambahkan Efek Zoom Dengan Efek Bayangan

by Irsyad Aslam , at 3/18/2013 , has 0 komentar
Efek Zoom Dan Bayangan ini Efek Zoom yang kedua yang telah saya buat setelah saya menuliskan posting Cara Menambahkan Efek Zoom Dan Berputar. Efek Ini Juga Lebih Stylish Dari Pada Efek Sebelumnya. Efek Ini Dilengkapi Dengan Efek Zoom, Dan Efek Bayangan yang muncul bila kursor diarahkan pada gambar. Efek ini juga ukurannya tidak terlalu besar. Efek ini dibuat dengan menggunakan CSS3. Dengan Menambahkan Efek ini Blog Anda Terlihat Lebih Bergerak, Dan Lebih Menarik untuk dilihat. Efek ini perlu banyak Cara, hanya dengan menambahkan Kode CSS3 pada Template anda, otomatis akan terpasang pada setiap Gambar yang ada pada posting, Dan tidak perlu untuk menambahkan HTML Pihak Kedua atau Menambahkan HTML pada Posting. Untuk Cara Menambahkan Efek ini, Ikuti Cara Berikut ini:


  • Silahkan Login Ke Blogger Anda.
  • Setelah itu, Klik Menu Template, --> Klik Tombol Edit HTML.
  • Lalu, Cari Kode ]]></b:skin> dengan menekan CTRL+F atau dengan F3.
  • Masukan Kode berikut ini diatas kode ]]></b:skin> :
.post 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;
}
.post 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;
}

  • Setelah itu, Klik Tombol Simpan Template.


Selamat Mencoba,
Salam Sukses,



Your-BelajarBLOG
Irsyad Aslam
About
Cara Menambahkan Efek Zoom Dengan Efek Bayangan - written by Irsyad Aslam , published at 3/18/2013, categorized as Efek . And has 0 komentar
0 komentar Add a comment

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger