Blogger Saydam Resim Efekti

Blogger Dersleri - Blogger Saydam Resim Efekti

Blogger Dersleri ile bloglarınızda üzerine gelince saydamlaşan şık bir resim efekti ekleyebilir ve bu resim ile kullanıcılarınızı farklı bir linke yönlendirebilirsiniz.

Blogger Dersleri - Blogger Saydam Resim Efekti Demo

Blogger Dersleri - Blogger Saydam Resim Efekti Kurulumu 

Şablonlar >HTML'yi düzenle adımını takip ederek blogumuzun kodlarını açıyoruz ve ctrl+f kombinasyonu ile ]></b:skin> kodunu bulup aşağıdaki kodu hemen üstüne ekliyoruz.

.blur img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.blur:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}

İşlemi tamamlamamız ardından gelelim resmi yayınlarımızda yada Gadget Ekle >Html/Javascript sayfası oluşturarak anasayfada kullanabilirsiniz.

<div style="text-align: center;">
<a class="blur" href="http://www.bloggerdersleri.com/2012/08/blogger-saydam-resim-efekti.html"> <img alt="Blogger Saydam Resim Efekti" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWJs-Y1igedWDt3hdJskiLJbCxGa8XSzlSm7x5QBp1-zgX_i_YChALam5pfMVB5M1BF1wjc-WDrWjG4SPaXt_6X5zT7bugl4DtnlLoMJ6E48daJMheP7KvyzWHhwDesc1KG-xs2Z6lyr-J/s320/blogger-resim-efekti.png" /></a>
</div>

Blogger Dersleri - Blogger Saydam Resim Efekti Düzenlemesi 

• Kodlar içerisinde kırmızı yazılan bölgeleri kendinize göre değiştirmelisiniz. href= kodunun devamına resme tıklayınca gidilecek olan linki , img alt kısmına ise resim açıklamasını giriyoruz Son olarak src=" bölümüne kullanacağınız resmin linkini eklemelisiniz.

Tweet