RESİMLERİNİZE ANİMASYON EFEKT KODU ( 5 FARKLI EFFEKT )

RESİMLERİNİZE ANİMASYON EFEKT KODU

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:

 Blogger Resim Efekti 1:Maus üzerine geldiğinde resim büyüyerek öne 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. 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 giris yapıyoruz. 2-Kumanda Panali>Şablon>Htmlyi Düzenle>Devam Et yolunu takip edip kodlarımızın bulunduğu alana geliyoruz.Blogumuzun yedegine 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/AVvXsEhUCkmB4L7slKVo5aLz-r0G0GR5Za5rNHhq1ZKcfydO-cYsI9ahj5tzRUcO5oRekOfJoi52c1-K4mLH5wgCLhejtsjGPee0AUj4tIymlpNVYw7b9UsLJyMq9oI6ZWd8Ho41w410OfCyG8YS/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/AVvXsEhUCkmB4L7slKVo5aLz-r0G0GR5Za5rNHhq1ZKcfydO-cYsI9ahj5tzRUcO5oRekOfJoi52c1-K4mLH5wgCLhejtsjGPee0AUj4tIymlpNVYw7b9UsLJyMq9oI6ZWd8Ho41w410OfCyG8YS/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/AVvXsEhUCkmB4L7slKVo5aLz-r0G0GR5Za5rNHhq1ZKcfydO-cYsI9ahj5tzRUcO5oRekOfJoi52c1-K4mLH5wgCLhejtsjGPee0AUj4tIymlpNVYw7b9UsLJyMq9oI6ZWd8Ho41w410OfCyG8YS/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/AVvXsEhUCkmB4L7slKVo5aLz-r0G0GR5Za5rNHhq1ZKcfydO-cYsI9ahj5tzRUcO5oRekOfJoi52c1-K4mLH5wgCLhejtsjGPee0AUj4tIymlpNVYw7b9UsLJyMq9oI6ZWd8Ho41w410OfCyG8YS/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/AVvXsEhUCkmB4L7slKVo5aLz-r0G0GR5Za5rNHhq1ZKcfydO-cYsI9ahj5tzRUcO5oRekOfJoi52c1-K4mLH5wgCLhejtsjGPee0AUj4tIymlpNVYw7b9UsLJyMq9oI6ZWd8Ho41w410OfCyG8YS/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/AVvXsEhUCkmB4L7slKVo5aLz-r0G0GR5Za5rNHhq1ZKcfydO-cYsI9ahj5tzRUcO5oRekOfJoi52c1-K4mLH5wgCLhejtsjGPee0AUj4tIymlpNVYw7b9UsLJyMq9oI6ZWd8Ho41w410OfCyG8YS/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/AVvXsEhUCkmB4L7slKVo5aLz-r0G0GR5Za5rNHhq1ZKcfydO-cYsI9ahj5tzRUcO5oRekOfJoi52c1-K4mLH5wgCLhejtsjGPee0AUj4tIymlpNVYw7b9UsLJyMq9oI6ZWd8Ho41w410OfCyG8YS/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/AVvXsEhUCkmB4L7slKVo5aLz-r0G0GR5Za5rNHhq1ZKcfydO-cYsI9ahj5tzRUcO5oRekOfJoi52c1-K4mLH5wgCLhejtsjGPee0AUj4tIymlpNVYw7b9UsLJyMq9oI6ZWd8Ho41w410OfCyG8YS/s1600/image-effects-image-2.png" /></a></div>
Bu işlemden sonrra Blogger Resim Efekti Ekleme işlemimiz tamamlanmış oluyor.Güle güle kullanınız.

Tweet