Halo sobat!! Pada kesempatan ini seocips akan membagikan lagi tentang efek gambar pada postingan blog dan berikut adalah bagaimana cara membuat gambar yang ada di postingan blog menjadi putih hitam. Berbicara soal efek gambar di artikel sebelumnya juga seocips.com telah membagikan tentang membuat efek hover + shadow dan efek fliping content gambar postingan, jika sobat tertarik silahkan kunjungi link tersebut.

Tujuan memberikan efek seperti ini sepertinya hanya untuk mempercantik tampilan blog, kalau untuk tujuan lain saya belum tahu. Dengan tutorial ini gambar pada postingan anda akan berubah menjadi putih hitam, kayak kembali ke zaman dulu, dimana foto-foto tidak berwarna. Efeknya langsung terlihat di gambar dan akan kelihatan warna aslinya jika kursor mouse di arahkan pada gambar itu. Untuk Demonya / Tampilannya silahkan lihat pada gambar dibawah ini.

Live Demo Efek Gambar:

Membuat Efek Hitam Putih Pada Gambar

1. Seperti Biasa, Login ke akun Blogger sobat ( Bukan milik orang lain )
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+ F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan CSS berikut ini diatas kode ]]></b:skin> atau </style>
 .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"); -webkit-filter:grayscale(1); filter:gray; padding:15px; box-shadow:0 0 15px #000; }
.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"); }
5. Kemudian simpan template sobat.
Note : sebelum melakukan tutorial perbiasakan mem backup tamplate anda agar mudah di kembalikan seperti semula jika terjadi kesalahan atau tidak sesuai dengan keinginan ( Cara backup tamplate yang paling gampang adalah menyimpan semua kode template anda ke Notepad ).

Sekian tutorial untuk saat ini dan semoga saja yang mempraktekan blognya makin keren. Dan jika blog anda blog berita dan lain-lain saya rasa tidak cocok menggunakan efek gambar ini, mungkin cocok untuk Blog bertema mistery biar makin kelihatan seram blognya.
0 Komentar untuk "Membuat Efek Hitam Putih Pada Gambar Postingan Blog"