22 Nisan 2009

Sıradan görünümlü bloglardan sıkıldınız mı? Blogunuzu sıradan görünümlü bloglardan farklı olmasını mı istiyorsunuz? Blogunuzda değişiklik mi yapmak istiyorsunuz?...

İşte tam size göre bir "Resim Efekti", bu efekt yardımı ile yazılarınızda kullanacağınız resimler daha şık görünecek.

Yapmanız gerekenler çok basit, sadece 2 adımda "Blogger Resimlerinizi Efektler ile Senlendirin"

Bu efekt yardımı ile resimlerinizin üzerine farenizi sürüklediğinizde daha önce üzerinde hafif bir sis bulutu var gibi görünen resminiz daha net görünecek. Bunun efekti blogunuzda kullanmak için yapmanız gerekenler;

1) Yerleşim > HTML'yi Düzenle > Widget Şablonlarını Genişlet' e tıklayın. Ve "Ctrl+F" yardımı ile </head> kodunu aratarak, bulun.

2) Hemen üzerine aşağıdaki kodu yerleştirin ve Şablonunuzu kaydedin.

<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>
Böylece, efekt için gerekli olan kodları temamıza yerleştirmiş olduk. Bundan sonraki yazılarınızdaki resimler için şu kodu kullanmanız gerekiyor;

Normal Resimlerde kullanılan kod:

<a href="http://takipteyiz.blogspot.com" target="_blank" alt="Takipteyiz"><img src="http://i620.photobucket.com/albums/tt289/bobokous/futursuzca2.jpg"/></a>

Bu efekti kullanabilmek için gereken kod:

<a class="linkopacity" href="http://takipteyiz.blogspot.com" target="_blank" alt="Takipteyiz"><img src="http://i620.photobucket.com/albums/tt289/bobokous/futursuzca2.jpg" /></a>
Sizlerinde dikkat edeceği gibi iki kod arasında sadece ikinci kodda yer alan kırmızı ile renklendirilmiş class="linkopacity" kısmı farklı. Temaya eklediğimiz kod ve bu ufak farklılık sayesinde blogunuzda kullanacağınız resimler artık daha ilgi çekici ve diğerlerinden farklı olacak. Denemeye değer diye düşünüyorum.

Örnek görüntü için: Bu adresi ziyaret edebilirsiniz. Kolay gelsin.

UYARI: Herhangi bir aksi durumdan temanızı koruma amaçlı olarak, yukarıdaki işlemleri yapmadan önce;
1. Blogger'a kullanıcı adınız ve şifreniz ile giriş yaptıktan sonra "Kumanda Paneli"nden (dashboard), temayı uygulamak istediğiniz blogunuzun "Yerleşim" (layout) kısmına tıklayın.
2. Yerleşime tıkladıktan sonra açılan sayfada, "HTML'yi Düzenle" (Edit HTML) kısmına tıklayın.
3. "Tam Şablonu Yükle" (download full template template) 'e tıklayarak var olan temanızı bilgisayarınıza kaydedin.

NOT: Daha önceki 'Blogger Header yerine Gadget Ekleyenler' isimli yazımda anlattığım adımları takip ettiyseniz; bu başlık altında anlattıklarım ile birleştirirseniz, Efektli bir Başlık alanına sahipsiniz demektir.
Yorum