CSS ile hazırlanmış resim efektlerinden blogunuza uygulaması oldukça basit olan toplam onbir adet blogger image hover effectini blogunuza uygulamayı anlatacağız. Kodlama CSS ile yapıldığından site açılış hızında negatif yönde etki kesinlikle yok. Görsellik olarak blogunuza yada sitenize uyguladığınızda farklı ve güzel bir görünüm kazandıracak blogger resim efekti eklentisi ile blogunuz daha hoş bir görünüme kavuşacak.Blogger resim efekti kodları için aşağıda verdiğimiz kodlardan istediğinizi blogunuza ekleyerek daha önce eklediğiniz bütün resimler dahil olmak üzere bundan sonra ekliyeceğiniz resimlerde blogger resim efekti ile görünecektir.İşlem çok basit bir kaç satırlık kodu blogunuza ekliyorsunuz ve resimlerinizbundan sonra efektli oluyor.
Blogger CSS Resim Efektini Blogunuza eklemek için;
1-Blogger Hesabınızla giriş yapın.
2-Şablon>HTML'yi Düzenle yolunu takip edip,HTML kodları içerisinde ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun ve aşağıda uygulamak istediğiniz efekte ait kodları bulduğunuz ]]></b:skin> kodunun hemen üst satırına yapıştırmanız gerekiyor.

1-Blogger CSS Resim Efekti Ekleme (Grow)
Grow css resim efektinini demo görünümü için maus ile resmin üzerine geliniz.
Blogger sayfanızdaki bütün resimlerde bu efekti kullnmak isterseniz, aşağıdaki kodu kopyalayıp 2. maddede bahsettiğimiz yere yapıştırın.

.post-body img {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover {
width: 400px;
height: 400px;
} 

2-Blogger CSS Resim Efekti Ekleme (Shrink)
shrink için css kodları:

.post-body img {
  height: 400px;
  width: 400px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.post-body img:hover {
  width: 300px;
  height: 300px;
}

3-Blogger CSS Resim Efekti Ekleme (Sidepan)

sidepan için css kodları:

.post-body img {
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
.post-body img:hover {
  margin-left: -200px;
}

4-Blogger CSS Resim Efekti Ekleme (Vertical pan)
Vertical Pan için css kodları:

.post-body img {
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
.post-body img:hover {
  margin-top: -200px;
}

5-Blogger CSS Resim Efekti Ekleme (Tilt)
Tilt Pan için css kodları:

.post-body img {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.post-body img:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

6-Blogger CSS Resim Efekti Ekleme (Morph)
Morph için css kodları:

.post-body img {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.post-body img:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

7-Blogger CSS Resim Efekti Ekleme (Focus)
Focus için css kodları:

.post-body img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.post-body img:hover {
  border: 70px solid #000;
  border-radius: 50%;
}

8-Blogger CSS Resim Efekti Ekleme (Grayscale)


Grayscale için css kodları:

.post-body img{
filter: url("data:image/svg+xml;utf8,grayscale"); /* Firefox 3.5+ */filter: gray; /* IE6-9 */-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */;}
.post-body img:hover {filter: none;-webkit-filter: grayscale(0%);} 

Blogger için hazırlanmış CSS Resim Efektlerinden istediğinizi blogunuza uygulayın ve güle güle kullanın.

Bloggerde artık nerdeyse yapamıyacağınız şey yok, uçsuz bucaksız bir web dünyası, yeter ki kafayı biraz çalıştırıp neyaptığının farkında olup amaca giden yolda doğru araçları seçebielim.Bugünde size resimlerinize efekt katacak animasyonlandıracak bir eklntiyi araç olarak size vereceğiz, sizde amacınız doğrultusunda kullanın.Blogger resimlerinize efekt yada animasyon olarak 5 ayrı şekilde ve istediğiniz resme uygulayıp istediğinize uygulamama insiyatifini tamamen kullanıcıya bırakarak blogger resim efekti eklentisini sizlere sunuyoruz:
DEMO GÖRÜNÜM
 Blogger Resim Efekti 1:Maus üzerine geldiğinde resim büyüyerek öen doğru çıkıyor.

Blogger Resim Efekti 2:Resim başlangıçta hafif gölgeli görünüyor,maus ile resmin üzerine geldiğinizde dilim dilim ve sırayla animasyonlu bir şekilde resim açılarak netleşecek. Blogger Resim Efekti 3:Resim başlangıçta hafif puslu görünüyor,maus ile resmin üzerine geldiğinizde kare kare kutular rastgele animasyonlu bir şekilde açılarak resim netleşecek. Blogger Resim Efekti 4:Resim başlangıçta hafif gölgeli görünüyor,maus ile resmin üzerine geldiğinizde dilim dilim katlanmış kağıt yelpazesi gibi akordiyonlu bir şekilde animasyonla resim üzerindeki perde kalkacak.

...............................Reklam...............................

Blogger Resim Efekti 5:Resim başlangıçta hafif puslu görünüyor,maus ile resmin üzerine geldiğinizde kare kare puslar animasyonlu olarak çaprazlamasına açılacak
Blogger Resim Efektini-Animasyonunu Katma:
1-Blogger hesabımızla giriş yapıyoruz.
2-Kumanda Panali>Şablon>Htmlyi Düzenle>Devam Et yolunu takip edip kodlarımızın bulunduğu alana geliyoruz.Blogumuzun yedeğini alıyoruz.
3-Widget Şablonlarını genişlet kutucuğunu işaretliyoruz.
4-Kodlar içerisinde Ctrl+F yardımı ile </head> kodunu aratıp buluyoruz.
5-Aşağıdaki kodu kopyalayıp bulduğumuz </head> kodundan önceki kısma yapıştırıyoruz.

<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>

6-Yine kodlar içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp buluyoruz ve aşağıdaki kodu kopyalayıp bulduğumuz ]]></b:skin> kodundan önceki kısma yapıştırıyoruz.

.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}

7-Şablonumuzu kaydedip çıkıyoruz.
Blogumuza Resim Eklerken:
Yukardaki 7 maddeyi uyguladıktan sonra yapmanız gereken hangi resme hangi efekti uygulayacağınıza karar vermek.Aşağıda verdiğimiz efekt kodlarından uygulamak istediğinize kodu uygulamanız yeterli.
Normalde blogunuza eklediğiniz bir resmin html kodu aşağıdaki gibidir.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC3TKJPOsirx7TWxeC9GN1XUDE2skZ-qZtJFEXUzzAO2hKEceg061OUNI5-BIZazhCXaIyBwLHLnzeMG4hmnikVm1TnFoMWszOMULxmbht2ApfjpbphGku1oqwWUEksQlOU6GvGbOf6Rbi/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC3TKJPOsirx7TWxeC9GN1XUDE2skZ-qZtJFEXUzzAO2hKEceg061OUNI5-BIZazhCXaIyBwLHLnzeMG4hmnikVm1TnFoMWszOMULxmbht2ApfjpbphGku1oqwWUEksQlOU6GvGbOf6Rbi/s1600/image-effects-image-2.png" /></a></div>

Eğer eklediğiniz resme efekt vermek istiyorsanız bu resim koduna aşağıda gösterdiğimiz yere class="effect1" kodunu eklemeniz yeterli olacaktır.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC3TKJPOsirx7TWxeC9GN1XUDE2skZ-qZtJFEXUzzAO2hKEceg061OUNI5-BIZazhCXaIyBwLHLnzeMG4hmnikVm1TnFoMWszOMULxmbht2ApfjpbphGku1oqwWUEksQlOU6GvGbOf6Rbi/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="effect1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC3TKJPOsirx7TWxeC9GN1XUDE2skZ-qZtJFEXUzzAO2hKEceg061OUNI5-BIZazhCXaIyBwLHLnzeMG4hmnikVm1TnFoMWszOMULxmbht2ApfjpbphGku1oqwWUEksQlOU6GvGbOf6Rbi/s1600/image-effects-image-2.png" /></a></div>

Yukarıda verdiğimiz 5 adet efekt türünden hangisini uygulamak istiyorsanız ona göre kırmızıyla belirttiğimiz class="effect1"kodunu düzenliyoruz.
Blogger Resim Efekti 1 için: class="effect1"
Blogger Resim Efekti 1 için: class="effect2"
Blogger Resim Efekti 1 için: class="effect3"
Blogger Resim Efekti 1 için: class="effect4"
Blogger Resim Efekti 1 için: class="effect5" kodlarını kullanıyoruz.
Örnek olarak eklediğimiz resme 4 numaralı blogger resim efektini uygulamak istiyoruz.
Normalde eklediğimiz resmin kodu aşağıdaki gibidir.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC3TKJPOsirx7TWxeC9GN1XUDE2skZ-qZtJFEXUzzAO2hKEceg061OUNI5-BIZazhCXaIyBwLHLnzeMG4hmnikVm1TnFoMWszOMULxmbht2ApfjpbphGku1oqwWUEksQlOU6GvGbOf6Rbi/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC3TKJPOsirx7TWxeC9GN1XUDE2skZ-qZtJFEXUzzAO2hKEceg061OUNI5-BIZazhCXaIyBwLHLnzeMG4hmnikVm1TnFoMWszOMULxmbht2ApfjpbphGku1oqwWUEksQlOU6GvGbOf6Rbi/s1600/image-effects-image-2.png" /></a></div>

Resmimizi efektli hale getirmek için koda aşağıda renkli olarak gösterdiğim class="effect4"kodunu ekliyoruz.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC3TKJPOsirx7TWxeC9GN1XUDE2skZ-qZtJFEXUzzAO2hKEceg061OUNI5-BIZazhCXaIyBwLHLnzeMG4hmnikVm1TnFoMWszOMULxmbht2ApfjpbphGku1oqwWUEksQlOU6GvGbOf6Rbi/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="effect4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC3TKJPOsirx7TWxeC9GN1XUDE2skZ-qZtJFEXUzzAO2hKEceg061OUNI5-BIZazhCXaIyBwLHLnzeMG4hmnikVm1TnFoMWszOMULxmbht2ApfjpbphGku1oqwWUEksQlOU6GvGbOf6Rbi/s1600/image-effects-image-2.png" /></a></div>

Bu işlemden sonrra Blogger Resim Efekti Ekleme işlemimiz tamamlanmış oluyor.