12 Mart 2013 Salı

Sayfanızda ki Fotoğrafları Zoomlama

Bir kaç haftadır bloguma yüklediğim fotoğraflarıma zoomlama efekti ekliyorum. Bu da oldukça dikkat çekti. Herkes nasıl yaptığımı soruyor. Bende tesadüfen bu sayfadan öğrendim, emeği geçenlere teşekkür ediyorum.
Oradan öğrendiklerimi bir de ben anlatayım, ister misiniz?


Zoomlama efektinin eklenmiş hali

♥♥♥♥♥♥♥

Nasıl Yapıyoruz ?

1. Bloggera girişi yapıp Şablon' a tıklıyoruz. Oradan Html'yi Düzenleyi açıyoruz.




2. Açtığımız pencereden geriye kalan işlemlerimizi yapacağız ama öncelikle Widget Şablonlarını Genişlet' i işaretliyoruz. Daha sonra ]]></b:skin> kodunu buluyoruz ve hemen üzerine aşağıda ki kodu yapıştırıyoruz.

#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:50%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}

3. Yine aynı pencereden </head> kodunu bulup, hemen üzerine aşağıda ki kodu yapıştırıyoruz. Sonrada Şablonu Kaydet ve çık.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'> 
$().ready(function() { 
$(&#39;a.zoom&#39;).each(function(i) { 
$(this).easyZoom();
}); 
}); 
</script>

♥♥♥♥♥
Arka planda yapacağımız işler bu kadar. Uzun gibi gelip gözünüzü korkutabilir ama uygulayınca oldukça basit olduğunu göreceksiniz.

Son adımımız yazımızı yazarken zoom efektini koyacağımızda gerçekleşiyor. Yazımıza görselimizi ekliyoruz ve  HTML' ye geliyoruz (Yayın başlığının hemen altında Oluşturun yanında) class="zoom" kodunu a href kodunun arasına yapıştırıyoruz. Aşağıda ki görselde eklenmiş ve eklenmemiş halini göreceksiniz.

NOT: Ben yazımı yazmadan önce görselimi ekliyorum ve HTML'den gerekli değişikliği yapıyorum ki uzun kodlar arasında gerekli kısmı bulmakta zorlanmayayım diye, sizde bu şekilde yaparsanız işiniz daha kolay olacaktır.
Kolay gelsin☻

5 yorum:

Mirayın annesi dedi ki...

bencede görsellere ayrı bir hoşluk katıyor ama çok meşakatliymiş yaahuu..

♥pemb€sinti♥ dedi ki...

Bilgisayar danışmanım emeğine bilgine sağlık..

Bucanni dedi ki...

Denedim, sevdim, teşekkürler ;)

ÖRGÜÇANTAM-Hatice yazıcı dedi ki...

canm benimm ellerine sağlık şimdi oğluşun evindeyim yarın daha detaylı bakacağım öptüm,teşekkürler

fiamma dedi ki...

Enfes , canım benim sen yap ben seyredeyim çok zor geldi bana ama sonuç harika:))