Blogger Resimlerinize Zoom Efekti Ekleyin.

2 dakika


53
10 Paylaşım, 53 Beğeni

Kaliteli resimler yayınlıyorsunuz blogunuzda. Bu kaliteli resimlere zoomlama yani üzerine gelince imlecin olduğu yerin yakınlaşmasını istemez misiniz ? Zoomlama sayesinde resimlerinizdeki ayrıntılar daha kolay ve iyi bir şekilde görünecektir. Bu şekilde profesyonel blogger anlayışınız pekişecek, kaliteli blogların sahipleri olacaksınız.

zoom, image zoom

Eğer sizde profesyonel bloglar yazıyorsanız bu eklentiyi kulanmanız yararınıza olacaktır. O zaman hikaye kısmını geçelim, bu eklentiyi nasıl kullanacaksınız ? Nasıl uygulayacaksınız ?

İlk olarak : Kumanda Paneli>Tasarım>Htmlyi Düzenle bu yolu izleyin daha sonrasında sağ üst kısımda bulunan widget şablonlarını genişlet kutucuğunu işaretleyin. Ctrl+F yardımı ile kodlar içerisinde ]]></b:skin> kodunu bulun. Bu kodu bulduktan sonra aşağıdaki kodu kopylayıp bulduğumuz ]]></b:skin>kodundan önceki kısma 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;
}



2.Adım:Bu sefer yine aynı şeilde Ctrl+F yardımı ile </head> kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz </head> kodundan önceki kısma yapıştırıyoruz.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='https://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>

şablonumuzu kaydedip çıkıyoruz.
3.Adım: Şimdi geldik en son kısma.. Son olarak da blogunuza eklediğiniz resimlerden zoom eklentisinin aktif halde olmasını istediğiniz resme bazı kodlar eklememiz gerekiyor.
resminizin HTML kodu normalde aşağıdaki gibi görünür ;

<div class="separator" style="clear: both; text-align: center;">
<a class="zoom" href="http://2.bp.blogspot.com/-DPjvBLRp3XI/Tcl3KDrv0dI/AAAAAAAADwY/lyta4cvd9r0/s1600/large.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://2.bp.blogspot.com/-DPjvBLRp3XI/Tcl3KDrv0dI/AAAAAAAADwY/lyta4cvd9r0/s320/large.jpg" width="320" /></a></div>

zoom efektisinin aktif olmasını istediğiniz resmin html koduna kod içerisinde kırmızı renkle belirttiğimiz class=”zoom” kodunu ekliyoruz.Zoom eklentimiz kullanıma hazır.


İlgili Aramalar :  Bloggerınıza zoomlama efekti, Zoomlama eklentisi, Resimleri zoomlayın, Picture zoom plugin for blogger, Blogger resim zoomlama


Yararlanılan Kaynak 
Kaynak 1


Beğendiniz mi? Arkadaşlarınızla Paylaşın!

53
10 Paylaşım, 53 Beğeni

Sizin Tepkiniz Nedir?

Beğendim Beğendim
0
Beğendim
Beğenmedim Beğenmedim
0
Beğenmedim
Şaşırdım Şaşırdım
0
Şaşırdım
Güldüm Güldüm
0
Güldüm
İnanılmaz İnanılmaz
0
İnanılmaz
Kızdım Kızdım
0
Kızdım
Oha Oha
0
Oha

0 Yorum

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bir format seç
Kişisel Test
Kişisel bir şey ortaya koymayı amaçlayan sorular dizisi
Basit Test
Bilgiyi kontrol etmek isteyen doğru ve yanlış cevaplı sorular dizisi
Anket
Karar verme ya da görüş belirleme/oy verme
Serbest Yazı
Yazılarınıza Görseller Bağlantılar Ekleyebilirsiniz
Liste
Klasik İnternet Listeleri
Geri Sayım Listesi
Klasik İnternet Geri Sayım Listeleri
Açık Liste
Kendi öğenizi gönderin ve en iyi sunum için oy verin
Oylanabilir Liste
En iyi liste öğesine karar vermek için yukarı veya aşağı basın