Ekim 05, 2012

Blogger Resimlerinize 5 Farklı Efekt Vermek


Eklentinin Önizlemesi


Merhaba ; bloglamazamani ziyaretçileri.Bugün blogger resimlerinize nasıl efekt verilir ondan bahsedeceğim. Malum her geçen gün blogger eklentileri çıkıyor, var olan blogger eklentilerine bir yenisi daha ekleniyor. Şimdi ise blogger resimlerinize 5 farklı yöntemle efekt eklentisini paylaşıyorum. Blogger resimlerinizde kullanacağız bu 5 farklı efekt ile görselleri biraz daha çekici kılacaksınız. 
Şimdi gelelim ; Blogger'da Resimlere Efekt Nasıl Uygulanır ? Onu anlatmaya.
Önce var olan efektlerin özelliklerinden kısaca değiniyorum;

Blogger Resimlerine Efekt Yöntemi 1 : Resmin üzerine geldiğinizde resme yaklaşıyor ve arkada biraz gölge oluşuyor.
Blogger Resimlerine Efekt Yöntemi 2 : Bu yöntem resim üzeri siyahla kaplanmış, üzerine geldiğinizde resim aydınlanıp üzerindeki siyahlık soldan sağa kalkıyor.
Blogger Resimlerine Efekt Yöntemi 3 : Bu yöntem ise resmin üzeri beyaz renkle kaplı ve  üzerine geldiğinizde o beyaz bölüm parsel şeklinde kalkıyor.
Blogger Resimlerine Efekt Yöntemi 4 : Bu yöntem'de 2. yöntem aynı tek farkı sağdan sola doğru açılması
Blogger Resimlerine Efekt Yöntemi 5 : Son yöntemimiz ise yine resmin üzeri beyaz ile kaplı üzerine geldiğiniz de resim parsel şeklinde sağdan sola doğru net halini alıyor.
Ve geldik blogger resimlerine animasyonlu efekt nasıl kullanılır onu göstermeye.
Kumanda Paneli > Şablon > HTML'yi Düzenle > Devam Et yolunu izledikten hemen sonra 
Widget Şablonunu genişlet seçeneğini işaretliyoruz. Aşağıdaki kodu CTRL + F yardımı ile </ Head > kodunu bulun ve aşağıdaki </ Head > kodundan önce yapıştırın.
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/143237963/jquery.adipoli.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
jQuery(function($pice){
$pice('.effect1').adipoli({
'startEffect' : 'normal',
'hoverEffect' : 'popout'
});
$pice('.effect2').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'sliceDown'
});
$pice('.effect3').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRandom'
});
$pice('.effect4').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'foldLeft'
});
$pice('.effect5').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRainGrowReverse'
});

});
/*]]>*/

</script>
Şimdi devam ediyoruz. Yine CTRL + F yardımı ile  ]]> < /b:skin> kodunu bulun ve aşağıdaki kodu ]]> < /b:skin> kodunun üzerine yapıştırın.
.adipoli-wrapper{position:relative;display:inline-block;margin:auto}
.adipoli-slice{display:block;position:absolute;z-index:0;height:100%}
.adipoli-box{display:block;position:absolute;z-index:0}
.post img{border:0!important;margin:0!important;padding:0!important}
.adipoli-wrapper>img,.adipoli-before,.adipoli-after{position:absolute;z-index:0}
Bu işlemi de yaptıktan sonra Şablonu kaydedip çıkın.
Bloğunuza yeni bir konu açın hemen,  resimlere bu efektleri verebilmeniz için html olarak girmeniz lazım, aşağıdaki kod normal bir resmin html halidir.
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ZQK3cTlzioc/UG5zXFasyvI/AAAAAAAAGdI/QpkuVb_OnnI/s1600/blogger-resimlerine-animasyonlu-efekt-verme-bloglamazamani.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="" /></a></div>
Bu kodu olduğu gibi eklerseniz efekt çalışmaz. 
Aşağıdaki kodu kullanarak 5 farklı blogger resimlerine efekt yöntemlerinden herhangi birini kullanbilirsiniz.
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ZQK3cTlzioc/UG5zXFasyvI/AAAAAAAAGdI/QpkuVb_OnnI/s1600/blogger-resimlerine-animasyonlu-efekt-verme-bloglamazamani.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="effect1" src="http://2.bp.blogspot.com/-ZQK3cTlzioc/UG5zXFasyvI/AAAAAAAAGdI/QpkuVb_OnnI/s1600/blogger-resimlerine-animasyonlu-efekt-verme-bloglamazamani.jpg" /></a></div>
Yukarıda KIRMIZI ile işaretledim "effett1" kısmını siz orayı;
Blogger Resimlerine Efekt Yöntemi 2 için; effett2
Blogger Resimlerine Efekt Yöntemi 3 için; effett3
Blogger Resimlerine Efekt Yöntemi 4 için; effett4
Blogger Resimlerine Efekt Yöntemi 5 için; effett5 şeklinde değiştirebilirsiniz. İşlem bitti bir örneğini göstermek istiyorum sizlere;  
Aşağıdaki kod herhangi bir resmi blogger'a yüklediğinizde HTML bölümünde görebileceğiniz bir kod.
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ZQK3cTlzioc/UG5zXFasyvI/AAAAAAAAGdI/QpkuVb_OnnI/s1600/blogger-resimlerine-animasyonlu-efekt-verme-bloglamazamani.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="" /></a></div> 
Efekt yok. Ama ben şimdi buna 3. Efekti uygulamak istiyorum. 
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ZQK3cTlzioc/UG5zXFasyvI/AAAAAAAAGdI/QpkuVb_OnnI/s1600/blogger-resimlerine-animasyonlu-efekt-verme-bloglamazamani.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="effect3" src="http://2.bp.blogspot.com/-ZQK3cTlzioc/UG5zXFasyvI/AAAAAAAAGdI/QpkuVb_OnnI/s1600/blogger-resimlerine-animasyonlu-efekt-verme-bloglamazamani.jpg" /></a></div>
ve sonunda bitti. Konu biraz uzun ama sıkıcı değil. Bir kere şablonunuza kodu ekledikten sonra sürekli kullanacağız bir kod olacak. Resimlere efekt verirken onu kullanırsınız. 
Not: Tüm detayları ile anlattım örneğini de gösterdim. Eğer yapamadığınız bir şey olursa "Yorum" bölümünde hiç çekinmeden belirtebilirsiniz. Herkese kolay gelsin, iyi bloglamalar...

8 yorum :

keşke önizleme koysaydınız
okumakla anlaşılmyor :D

Konuyu iyi okumamışsınız zaten, en üstte ÖNİZLEMEsi mevcut bakabilirsiniz oradan

ha şimdi gördüm önceden görmemiştim orayı.
teşekkürler.
Çok güzel bir blogunuz var.

Ben teşekkür ederim, kolay gelsin.

bişey sorcam.
yorumların altındaki cevapla butonu nasıl konuluyor

Konmuyor, her temada bulunuyor bu özellik.

Yorum Gönder



Bloglama Zamanı'nda yayınlanacak yeni yazılar e-mail adresinize gelsin.


Google Arkadaşım Ol
Bloglama Zamanı
Bloglama Zamanı

Google+ paylaşımlarımı takip etmek için çevrelerinize ekleyin.