Bu efekt, görsellerinizin başlangıçta hafif saydam görünmesini sağlar, farenizi üzerine getirdiğinizde ise görselin tam netliğine kavuşmasını sağlar. Bu yöntem, sitenize daha modern ve etkileşimli bir hava katar.
Adım 1: CSS Kodunu Ekleyin
Blogger panelinize giriş yapın.
Tema (Theme) > Özelleştir yanındaki oka tıklayın ve HTML'yi Düzenle (Edit HTML) seçeneğine gidin.
Klavyenizden
Ctrl + Ftuşlarına basarak</head>etiketini aratın.Aşağıdaki kod bloğunu kopyalayın ve
</head>etiketinin tam üzerine yapıştırın:
<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>
Temayı Kaydet butonuna tıklayın.
Adım 2: Görselinizi Efektli Kullanın
Artık görsellerinize bu efekti uygulamak için, yazılarınızda görsel eklerken kullandığınız HTML koduna class="linkopacity" komutunu eklemeniz yeterlidir.
Örnek kullanım:
<a class="linkopacity" href="gorselinizin-gidecegi-adres" target="_blank" alt="Gorsel Aciklamasi">
<img src="gorselinizin-kaynak-adresi"/>
</a>
Bu küçük düzenleme ile blogunuzun görsel kalitesini basit ve etkili bir şekilde artırabilirsiniz. Başka sorularınız olursa yorumlarda bizimle paylaşmayı unutmayın!
blogger egitimi, css ipuclari, blog gelistirme,
Hiç yorum yok: