Profesyonel olarak tasarlanmış alışveriş sitelerinde, imlec ile bir ürünün yada resmin üzerine geldiğiniz zaman resim büyüyor, böylece kullanıcı ürünü daha detaylı ve yakından görme imkanını buluyor.Bu tür siteleri mutlaka ziyaret etmişsinizdir diye düşünüyorum.Blog Okulu, blogları orjinal ve profesyonelce tasarlanmış sitelerle yarışır seviyelere getirecek eklentileri kullanıma sunmaya devam ediyor. Profesyonel sitelerdeki gibi resim zoomlama yada türkçesi resim yakınlaştırma eklentisini bir kaç kopyala yapıştır işleminden sonra sizde blogunuza ekliyebilirsiniz.Bu eklentiyi ekledikten sonra; resimleriniz üzerinde ziyaretçileriniz imleci gezdirip resmimlerinizi daha detaylı ve yakından görme imkanını bulacaklar.
1.Adım:Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip edin widget şablonlarını genişlet kutucuğunu işaretleyin.Ctrl+F yardımı ile kodlar içerisinde ]]></b:skin> kodunu aratıp buluyoruz 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;
}
<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() {
$('a.zoom').each(function(i) {
$(this).easyZoom();
});
});
</script>
3.Adım:Son olarak da blogunuza eklediğiniz resimlerden zoom eklentisinin aktif halde olmasını istediğiniz resme;
resminizin HTML kodu normalde aşağıdaki gibidir.
<div class="separator" style="clear: both; text-align: center;">
<a class="zoom" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw3XHF_ZxYXmTaE0oI-fSTvAl1QapdxeOkpRi8FI0PnYwUp21eGlLPE_MRGYYGNHE7OASR4l-awD3JT3ia9R7WcjnbQCwuKS7x5C9yRJNSrVLAGobuMZ-qsxgtBZVWnwjtzM30ZPub4Fp_/s1600/large.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw3XHF_ZxYXmTaE0oI-fSTvAl1QapdxeOkpRi8FI0PnYwUp21eGlLPE_MRGYYGNHE7OASR4l-awD3JT3ia9R7WcjnbQCwuKS7x5C9yRJNSrVLAGobuMZ-qsxgtBZVWnwjtzM30ZPub4Fp_/s320/large.jpg" width="320" /></a></div>
VİDEOLU ANLATIM:
Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.
13 yorum:
Her resim için ayrı ayrı mı ekleyeceğiz 3. adımdaki kodu?
Kod eklemiyeceksiniz.Resminizi herzamanki gibi normal olarak ekliyeceksiniz,resmi ekledikten sonra resmin HTML koduna class="zoom" kodunu 3.adımdada göründüğü gibi resim koduna ekliyeceksiniz.
Paylaşımınız için öncelikle teşekkür ediyorum 1. ve 2. adımda sorun yok dediğiniz gibi uyuladım fakat 3. adımı da yapıyorum resimlerde olmuyor maalesef bende biryerde hatamı yapıyorum diyede kontrol yaptım kaç kere dediğiniz gibi yapıyorum aynen fakat olmuyor..
Paylaşımınız için öncelikle teşekkür ediyorum 1. ve 2. adımda sorun yok dediğiniz gibi uyuladım fakat 3. adımı da yapıyorum resimlerde olmuyor maalesef bende biryerde hatamı yapıyorum diyede kontrol yaptım kaç kere dediğiniz gibi yapıyorum aynen fakat olmuyor..
Videolu anlatım bile koymuşsunuz gerçekten siteme koymak istediğim bir özellikti ama herşeyi doğru yapmama rağmen tekrar tekrar yapıyorum yinede olmuyor anlıyamadım yinede sağolun çabanız için..
videolu anlatımı sizin için koydum zaten.Blog adresinizi verirseniz bir göz atalım blogunuza,belki eklentinin çalışması için size tavsiyelerde bulunabiliriz.
Peki buyurun blog adresim.Videoyu benim için zahmet ettiğiniz içinde ayrıca teşekkür ediyorum...
http://umutkuroglu.blogspot.com/
bunu yapamadım aslında istediğim bir özellikti ancak o kadar uğraşmama rağmen olmadı. :(
videolu anlatım da ekledim, takıldığınız nokta neresi? bize bildirin hemen yardımcı olalım.
Ya bunu yaptım ama Share Yazısı çıkınca kayboluya resimde :)
harika oldu teşekkürler
size mail attım lütfen çok acil yardıma ihtiyacım var.
zoom yaparken bir yanlışlık yaptım sanırım,sayfamın üstünde garip yazılar çıktı.silemiyorum da.resimleriimde zoomlanmıyor.
sonunda hallettim,yazıları sildim ama; ZOOM yapamadım malesef.
Yorum Gönder
Belirtmek istediğiniz farklı konular varsa Burdan Yazabilrisiniz...