Kali ini Abe Nik akan membuat tutorial bagaimana untuk membuat effect hitam putih dan gambarnya akan kembali kepada normal apabila mengarahkan cursor pada gambar tersebut.Untuk lebih lanjut bolehlah melihat contoh dibawah dan sekiranya ingin mencuba bolehlah ikuti langkah2 dibawah.

Pasang Slide Out Butang Follower

Bagaimana Untuk Tambah jQuery kesan kabur pada gambar


Langkah 1) Dari Blogger Dashboard, pergi Templates and klik pada Edit HTML
                     (Jangan lupa Download Copy of your template dahulu )



Langkah  2) Cari kode dibawah ini .
                      (Klik Ctrl dan F untuk bar carian untuk membantu mencari kode)

]]></b:skin>

Langkah 3) Selepas itu copy kode dibawah dan pastekan di atas kode yang anda cari tadi .



.post img:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.post img{
 filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
 -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
 filter: gray; /* IE6-9 */
 }


Langkah 4) Klik Save templates

Semoga berjaya.....