Blogger da Resimlerinize Saydamlık Efekti Verin

Son zamanlarda bir çok blog yazarı blogunda bu özelliği kullanıyor. Görmüşsünüzdür belki, resimlerin üstüne gelince saydam haldeyse aydınlanıyor veya tam tersi normal haldeyse saydamlaşıyor. İşte bunlar saydamlık ayarlarıyla yapılıyor. Blogunuzdaki resimleri saydamlaştırarak daha iyi görünümler elde edebilirsiniz. Kullanım ve görsellik yönünden bloga ayrı bir hava katıyor ve ziyaretçiye yönelik bir zararı olmuyor.
Şimdi resim saydamlık ayarlarını yapmayı öğrenelim. Öncelikle Kumanda Paneli ➜ Blog İsmi ➜ Şablon ➜ HTML'yi Düzenle yolunu izleyin. Ardından CTRL+F yaparak aşağıdaki kodu bulun:
]]></b:skin>



Daha sonra bu kodun hemen üzerine aşağıdaki kodları ekleyin:



/* Resim Saydamlık Ayarları */

a.saydam img{

filter:alpha(opacity=50);

-moz-opacity: 0.5;

opacity: 0.5;}

a.saydam:hover img{filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;}

a.opacity img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

-khtml-opacity: 1.0;}

a.opacity:hover img {

filter:alpha(opacity=75);

-moz-opacity: 0.7;

opacity: 0.7;

-khtml-opacity: 0.7; }



Kullanacağımız saydam ve opacity efektlerinin CSS kodlarını ekledik. Şimdi bunları kullanmayı öğrenelim. Aşağıdaki kodları saydamlık veya opacity efekti vereceğiniz resim üzerinde uygulayın.



<a class="saydam" href="Resimin linki buraya gelecek!" target="_blank" alt="Resimin açıklaması buraya gelecek!">

<img src="Resim" />

</a>



Kırmızı olarak belirttiğim yerleri kendinize göre düzenleyebilirsiniz. Saydam yazan yere dilerseniz opacity yazarak opacity efektini kullanabilirsiniz. Örnek olarak blogumda kullandığım saydamlık efektini göstereyim. Gördüğünüz gibi blogumda sağ sidebarda yer alan reklam ve sponsorluk alanında saydamlık efekti kullanıyorum. Resimdeki sağ üst köşede bulunan 125x125 boyutundaki resmin üzerine geldiğim zaman gördüğünüz gibi aydınlandı. Diğer resimler üzerlerine gelmediğimiz için soluk olarak duruyor. Saydamlık ayarlarını kendinize göre değiştirebilmeniz mümkün. Örneğin resimin daha fazla saydamlaşmasını veya üzerine gelince daha fazla aydınlanmasını sağlamak mümkün. Biraz CSS bilginiz varsa skin kodundan önce eklediğimiz resim saydamlık ayarlarıyla oynayarak kendinize göre ayarlayabilirsiniz.


Yazar Hakkında: Bu yazı Web Günlüğü tarafından Ehli Blog için yazılmıştır.

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

Hiç yorum yok:

Yorum Gönder

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.