Bazı sitelerde görmüşsünüzdür konu içeriğindeki veya reklam alanlarındaki resimler soluk sadece imlec üzerine geldiklerinde orjinal renk tonuna döner. İşte bu bugün bu efekti paylaşıyorum buyrun.
1. Adım: Kodları Şablona Ekleyin
Kumanda paneli ➜ Şablon ➜ HTML'yi düzenle yolunu takip ederek blog kodlarımızın açık halde bulunduğu modüle gidin, hemen ardından Widget Şablonlarını Genişlet seçeneğini seçip Ctrl ve F tuşlarına aynı anda basarak, açılan arama formunda </head> ifadesini aratın. Bulunan kodumuzun üzerine aşağıdaki kodlarımızı ekleyin.
<style type="text/css"> a.linkopacity img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5;} a.linkopacity:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; } </style>
Şablon ile işimiz bitti. Şimdi ise soldurma efektini resimlere nasıl uygulayabileceğiz onu sizlere anlatacağız.
Yapmanız gereken, efekti uygulamak istediğiniz resmin URL ve yönlendirmek istediğiniz adresini, yukarıda ki efekt koduna eklemek ve efekt kodunu olduğu gibi yayınınıza eklemek
<a class="linkopacity" href="Yönlendirilecek adres linkiniz" target="_blank" alt="Resim açıklaması">
<img src="Resim URL adresi" /> </a>
0 yorum:
Yorum Gönder