Blogger Resimlerinize Animasyon ve Başlık Efekti Ekleme
Java kodlarına gerek duymadan tamamen CSS kodlarını kullanarak Blogger Resimlerinize Animasyon ve Başlık Efekti Ekleme yöntemini silerle payaaşacağız. Bahsettiğimiz eklenti sayesinde ziyaretçiler maus ile resimlerinizin üzerine geldiğinde resimde hafif bir kararma olacak ve soldan bir şerit çıkacak bu şeritte de resim başlığınız yazacak, bu sayede ziyaretçi resminizin başlığını güzel bir efektle görmüş olacak. Üstelik kod olarak sadece CSS kullanılması sitenizde hız bakımından ve kod yoğunluğu olarak hiçbir yük getirmeyecek, sitenize açılırken yüklenen resimler herzamanki hızında yüklenecek, bu yönüyle eklenti gerçekten çok kullanışlı geldi bana.
Sizde Blogger Resimlerinize Animasyon ve Başlık Efekti Eklemek istiyorsanız aşağıdaki resmin üzerine maus ile gelip efektin nasıl olduğuna bir göz atın derim.
Nasıl? Blogger Resimlerinize Animasyon ve Başlık Efektini beğendiniz mi? Eğer beğendiyseniz çok basit bir kaç işlem ile bunu sizde sitenize veya blogunuza uygulayabilirsiniz.
1-Blogger hesabınızla giriş yapın.
2-Blogunuzun kodlarını her ihtimale karşı yedekleyin.(Blogger yedek alma)
3-Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edin.
4-Html kodları içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun.
5-Aşağıdaki kodu kopyalayıp 4.adımda bulduğumuz ]]></b:skin> kodunun hemen üst satırına yapıştırıyoruz.
/*---- Blog Okulu Blogger Bildirim Kutusu Ekleme ---*/
.blogokuluzoom{display:inline-block;overflow:hidden;position:relative;text-decoration:none}
.blogokuluzoom:before{display:block;background-color:#000;content:"";height:100%;opacity:0;position:absolute;width:100%;z-index:2}
.blogokuluzoom:after{display:block;background-color:rgba(255,255,255,0.8);color:#000;content:attr(title);left:-100%;position:absolute;text-align:center;text-transform:uppercase;top:5%;width:94%;z-index:3;padding:2% 3%}
.blogokuluzoom img{border:none;display:block;z-index:1}
.blogokuluzoom:before,.titlezoom:after,.titlezoom img{-webkit-transition:all 200ms ease;-moz-transition:all 200ms ease;-o-transition:all 200ms ease;transition:all 200ms ease}
.blogokuluzoom:hover img{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}
.blogokuluzoom:hover:before{opacity:0.3}
.blogokuluzoom:hover:after{left:0}
6-Normalde blogunuza eklediğiniz bir resmin html kodları aşağıdaki gibidir:
<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Ulx1Hf9RTH_wwCAzeYVfaYB2Wh2e0vF4fXA0bB2onOQvnlymW5CsVUphFuQKFFwyxm29o3OXlNZfN_N2vFup69y-RvUKmhoQTMXPCzbGKs3WaJ7a2K31IMAgbLOcdjEThP08Y02Sro3h/s540/blogger-resimlere-animasyon-ekleme.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Ulx1Hf9RTH_wwCAzeYVfaYB2Wh2e0vF4fXA0bB2onOQvnlymW5CsVUphFuQKFFwyxm29o3OXlNZfN_N2vFup69y-RvUKmhoQTMXPCzbGKs3WaJ7a2K31IMAgbLOcdjEThP08Y02Sro3h/s540/blogger-resimlere-animasyon-ekleme.png" /></a></div>
Blogger Resimlerinize Animasyon ve Başlık Efekti Eklemek istediğiniz resmin kodu içerisine sadece class="blogokuluzoom" kısmını değiştireceğiz.
Eklediğiniz zaman, resim html kodumuz aşağıdaki gibi olacak.Ayrıca başlık için aşağıda yeşil renkle verdiğimiz title="Resimde Çıkan Başlık Kısmı için Buraya" kısmını eklemeniz gerekiyor.
<div class="seperator" style="clear: both; text-align: center;"> <a class="blogokuluzoom" title="Resimde Çıkan Başlık Kısmı için Buraya" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Ulx1Hf9RTH_wwCAzeYVfaYB2Wh2e0vF4fXA0bB2onOQvnlymW5CsVUphFuQKFFwyxm29o3OXlNZfN_N2vFup69y-RvUKmhoQTMXPCzbGKs3WaJ7a2K31IMAgbLOcdjEThP08Y02Sro3h/s540/blogger-resimlere-animasyon-ekleme.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Ulx1Hf9RTH_wwCAzeYVfaYB2Wh2e0vF4fXA0bB2onOQvnlymW5CsVUphFuQKFFwyxm29o3OXlNZfN_N2vFup69y-RvUKmhoQTMXPCzbGKs3WaJ7a2K31IMAgbLOcdjEThP08Y02Sro3h/s540/blogger-resimlere-animasyon-ekleme.png" /></a></div>