Membuat Efek Gelap Terang Di Setiap Gambar Blog,mempunyai ciri khas tersendiri karena tampilan ini sedikit menarik dibandingkan dengan tampilan gambar sebelumnya itu yg saya alami karena pada gambar akan nampak terang ketika mouse di arahkan dan akan kembali gelap ketika mouse menjauh.
Dengan semakin berkembangnya kode CSS dalam merubah tampilan blog seperti halnya membuat label dengan css,menu dropdown dengan css dan banyak lagi yang lainnya.Maka dari itu pada kesempatan ini dalam pembahasan Membuat Efek Gelap Terang Di Setiap Gambar saya akan menggunakan kode CSS supaya kelihatan lebih indah,untuk lebih jelasnya silahkan kalian perhatikan langkah langkahnya di bawah ini.
Cara Membuat Efek Gelap Terang Pada Gambar
1. Login dulu ke akun blog kalian.
2. Pilih menu Template --> Edit HTML ( Centang Expand Widget Templates ).
3. Cari kode ]]></b:skin> ( Gunakan CTRL+F untuk mempermudah pencarian ).
4. Copy kode di bawah dan letakan tepat di atas kode ]]></b:skin>.
Disini saya akan memberikan 2 kode, jadi silahkan pilih salah satu kode yang di inginkan :
4. Copy kode di bawah dan letakan tepat di atas kode ]]></b:skin>.
Disini saya akan memberikan 2 kode, jadi silahkan pilih salah satu kode yang di inginkan :
Efek Terang Ke Gelap
img {
filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;
}
img:hover { filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;
}
filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;
}
img:hover { filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;
}
Efek Gelap Ke Terang
img {
filter:alpha(opacity=70); -moz-opacity:0.7; opacity: 0.7;
}
img:hover { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity 1.0;
}
5. Kemudian save sekarang silahkan lihat hasilnya.