Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template

Membuat efek hitam putih pada gambar postingan

Hay gan,? Mau nulis apa juga binggung, Dari pada ini blog gag ada coret²an nya mending
aq coret²in wae lha. Syukur - syukur ada yang bisa baca tulisanku ini, Abis bahasanya campur aduk asal ketik aja nie tangan. :D wkwkkwk

Dino iki aku arep posting tutorial mengenai efek gambar,. :) lagi² epek gambar gak bosan apa,??? xD

Untuk melihat DEMO nya silahkan sobat arah kan cursor sobat ke gambar greget dibawah ini ^_^


Okey langsung wae lha ke tutorial nya ra usah banyak basi basa :D ckckckK

Simak langkah² dibawah ini :

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>
.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 */
}

jika sobat ingin menambahkan efect hover pada gambar agar kembali normal ketika terkena cursor tinggal sobat tambahkan kode script berikut ini

.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.

Ya sudahlah cukup sekian tutorial yang bisa saya sampaikan hari ini semoga bermanfaat,..
Terima kasih telah membaca artikel tentang Membuat efek hitam putih pada gambar postingan di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :

Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template