Image Post Shadow Hover

Cara mudah membuat Image Post Shadow Hover. Atau dengan kata lain cara mudah membuat gambat di postingan jika disorot dengan mouse maka gambar akan menjadi berbayang-bayang alias gambarnya ada bayangannya. Seperti ini :

• Masuk ke akun blogger Anda
• Pilih Design atau Rancangan
• Pilih Edit HTML
• Cari kode ]]></b:skin>
• Letakkan kode berikut ini di atas kode ]]></b:skin>
  
  <style type='text/css'>.post img:hover{-webkit-box-shadow:0px 0px 35px black;-moz-box-shadow:0px 0px 25px black;)</style>

• Note : Anda bisa sesuaikan warna shadow nya denan mengganti kata "black" dengan yang lain.
• Selamat mencoba

Read More......

Image Post Shadow Hover

Cara mudah membuat Image Post Shadow Hover. Atau dengan kata lain cara mudah membuat gambat di postingan jika disorot dengan mouse maka gambar akan menjadi berbayang-bayang alias gambarnya ada bayangannya. Seperti ini :

• Masuk ke akun blogger Anda
• Pilih Design atau Rancangan
• Pilih Edit HTML
• Cari kode ]]></b:skin>
• Letakkan kode berikut ini di atas kode ]]></b:skin>
  
  <style type='text/css'>.post img:hover{-webkit-box-shadow:0px 0px 35px black;-moz-box-shadow:0px 0px 25px black;)</style>

• Note : Anda bisa sesuaikan warna shadow nya denan mengganti kata "black" dengan yang lain.
• Selamat mencoba

Read More......

Membuat Image Rollover ( Berubah ketika Disorot Mouse )

Kembali lagi untuk berbagi tips. Kali ini tentang Membuat Image Rollover. Image Rollover adalah gambar yang akan Berubah ketika Disorot Mouse .Jadi kesannya seperi animasi. Caranya sangat mudah, tinggal menyiapkan 2 gambar atau foto. 2 foto tersebut harus sama alias berasal dari satu foto, jadi foto yang kedua cuman diedit sedikit. Untuk membuat effek rollover atau animasi saat disorot mouse atau kursor, kita tinggal memasukkan kode - kode saja kok, mudah (^^)


Cara membuat text shadow animation, cara kedua, Macam - macam efek kursor mouse
Permulaan : Siapkan 2 gambar atau foto 

kodenya untuk membuat image rollover adalah :

<style type="text/css">
a.pic .image2{display:none}
a.pic:hover .image1 {display:none}
a.pic:hover .image2 {display:inline}
</style>


<center><a class="pic" href="LINK TUJUAN JIKA GAMBAR DIKLIK">
<img class="image1" src="URL GAMBAR 1" /> 
<img class="image2" src="URL GAMBAR 2" /></a></center>

Kode tersebut bisa dimasukkan ke dalam postingan atau widget. Demikian tutorial singkat tentang " Membuat Image Rollover ( Berubah ketika Disorot Mouse ) " semoga bermanfaat, sekali lagi saya ingin mengucapkan " Selamat hari Raya Idul Fotri 1431 H Mohon Maaf Lahir Batin "

Read More......