Resimlerinize Efekt-Animasyon Ekleyin (5 Farklı Efekt)

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.