 |
| Blogger Dersleri - Üzerine Gelince Genişleyen ve Gölgelenen Resim Efekti |
Blogger Dersleri kuşağında sizler için için üzerine gelince genişleyen ve gölgelenen resimler paylaşma konusunda yardımcı olmaya çalışacağım.
Blogger Dersleri Genişleyen Resim Efekti Kodları
1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz.
2 ) Ctrl + F yardımı ile ]]></b:skin> dizinini buluyoruz.
3 ) ]]></b:skin> kodunun tam üzerine aşağıdaki kod dizinini ekliyoruz.
]]></b:skin> Öncesi Eklenecek Blogger Resim Efekti Kodlar :
.MBT-CSS3 img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.MBT-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}
- Resim genişlikleri ile oynamak isterseniz. Kırmızı ile yazılmış 0.7 alanını değiştirebilirsiniz. ( Azaltın yada Artırın )
- Gölgelik alanın büyüklüğünü genişletmek isterseniz mavi yazılmış 0.5 alanını değiştirebilirsiniz. ( Azaltın yada Artırın )
Blogger Dersleri - Genişleyen Resim Efekti Kullanımı
Resim efektini kullanmak için Şablon >> Gadget Ekle >> HTML/Java Script kutucuğunu kullanarak aşağıda ki kodları ekleyin .
Eğer yazı içerisinde kullanmak istiyorsanız HTML bölümüne geçerek aşağıda ki kodları ekleyin .
<div class="MBT-CSS3">
<img src="Resim Urlsi" />
</div>
Efekt vermek istediğiniz resmin linlkini kırmızı ile belirlenmiş alana eklemeniz yeterli.
Yorum Gönder