Cara Membuat Efek Image Shadow Hover

Maksud dari tutorial ini adalah membuat efek bayangan
pada image atau gambar yang ada di dalam area posting-
an maupun di sidebar. Efek tersebut akan bekerja mana-
kala cursor anda diletakkan di atas gambarnya.
Contohnya seperti pada gambar di bawah ini :



Apabila anda ingin membuatnya, ikuti langkahcaranya seperti berikut ini :

CARA PERTAMA :

1.   Rancangan -> Tambah Gadget ->
      Pilih HTML/JavaScript

2.   Letakkan kode berikut di dalam kontennya :

3.   Atau masukkan langsung dalam area posting anda.

<style type='text/css'>.syam img:hover{-webkit-box-shadow:3px 3px 5px 5px; -moz-box-shadow:3px 3px 5px 5px red;)</style>

<a class="syam" href="#syam"><img src="URL image disini" /></a>

KETERANGAN =

Ganti warna shadownya ( red ) dengan
warna yang anda inginkan.

Aturlah ukuran lebar shadownya pada kode
3px 3px 5px 5px & 3px 3px 5px 5px

Masukkan URL image anda pada kode

URL image disini

CARA KEDUA :

1.   Masuk -> Edit HTML

2.   Carilah kode </b:skin>

3.   Copy kode berikut dan letakkan kode
      tersebut di atas kode </b:skin> ini.

.syam:hover img {-webkit-box-shadow:3px 3px 5px 5px; -moz-box-shadow:3px 3px 5px 5px red;}

KETERANGAN =

Ganti warna shadownya ( red ) dengan
warna yang anda inginkan.

Aturlah ukuran lebarnya shadow pada kode
3px 3px 5px 5px & 3px 3px 5px 5px

Kode penggunaan di postingan / di sidebarnya :

<a class="syam" href="#syam"><img src="URL image disini" /></a>

KETERANGAN =

Masukkan URL image anda pada kode

URL image disini

Selamat mencoba, good luck!