Baiklah sobat pada kesempatan ini seocips akan membagikan tentang cara membuat efect hover dengan bayangan / shadow pada gambar atau postingan blog, dan untuk efek kali ini kerenlah menurut kami. Dengan memberikan efek pada gambar merupakan salah satu cara blogger untuk mendesain dan mempercantik tampilan halaman mereka.
Tujuan membuat efek seperti ini biasanya untuk menarik perhatian pengunjung blog supaya lebih betah dan sering mampir ke blog kita. Dengan cara menambahkan efek Hover + bayangan tersebut di blog anda akan memungkinkan untuk anda mempunyai pengunjung tetap karena tidak jenuh dengan tampilan blog anda.
Efek ini akan terlihat lebih jelas dan lebih cantik lagi jika kursor mouse di arahkan ke gambar pada postingan anda.
Tujuan membuat efek seperti ini biasanya untuk menarik perhatian pengunjung blog supaya lebih betah dan sering mampir ke blog kita. Dengan cara menambahkan efek Hover + bayangan tersebut di blog anda akan memungkinkan untuk anda mempunyai pengunjung tetap karena tidak jenuh dengan tampilan blog anda.
Efek ini akan terlihat lebih jelas dan lebih cantik lagi jika kursor mouse di arahkan ke gambar pada postingan anda.
Live Demo Efek Hover + Shadow Pada Gambar
Nah untuk demonya adalah gambar dibawah ini, silahkan arahkan kursor mouse ke gambarnya.
Cara membuat efek Hover + Shadow di post blog.
1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>
.post-body img{background:#FFF;/* background color around the image */5. Kemudian simpan template sobat.
padding:15px;/* The Space Between Border and Image */
border-radius:50% 0;/* Rounded border */
box-shadow:0 0 15px #000;/* Shadow */
-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s}
.post-body img:hover{border-radius:0;/* This removes the border roundness (value 0) */
-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;cursor:pointer}
Cara yang di bagikan ini untuk membuat semua gambar yang berada di dalam postingan blog dengan otomatis mempunyai efek shadow, jadi sobat tak perlu lagi untuk memasukkan satu persatu kode pada tag div gambar dengan manual.
Ok sobat sekian tentang cara menambahkan efek hover + shadow pada gambar dan selamat mencoba dan semoga bermanfaat
Thank's to : SEOCIPS
0 komentar:
Post a Comment