Blogger Muhteşem Bir JQuery Resim Zoom Eklentisi

Blogger resim zoomlama eklentisi yani yakınlaştırma diyelim resmi daha iyi inceleme.Arkadaşlar bu yazımın içersinde resimlerimizi büyük yapmadan orta boyutta iken ziyaretçilerimize resmi nasıl yakınlaştırabiliriz onu anlatacağım sizlere bir örneğini aşağıdaki dinazor resminde gösteriyorum diğer demoda ise bir demo sitesinde gösteriyorum.Daha farklı bir anlatımla bunu sitelerinde tanıtan Professor Cloud, var ve oldukça hoş ve güzel görüntü sağlıyor.

Blogger Kumanda Paneli girin

Daha  sonra Şablon seçin

HTML'yi Düzenle diyin ve daha sonra Witget Şablonu Genişlet tıklayın CTRL + F yardımı ile bu  </head> kodunu bulun

Sonra Aşağıdaki Kodu Hemen  </head>  Üstüne Yapıştırın

 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/><script src='http://suyb.googlecode.com/files/cloud-zoom.1.0.2.js' type='text/javascript'/>

Yapıştırdıktan sonra Şablonu Kaydet diyin ve kapatın

 

Bizim için önemli olan kodlardan biri bu ( class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2") şimdi bu kodu bir yerde tutalım ve yeni bir konu açalım ve sadece bir resim yükleyelim konu içersine.

Bu aşağıdaki bizim kendi linkimiz oldu yani ilk yüklediğimiz resmin HTML kodu peki HTML kodu nerden bulacağız alttaki resimin sol üst köşesinde görüyoruz.

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-n3h9hm9MyY0/URYulusRlCI/AAAAAAAAACw/UhWc_Vp31SM/s1600/Super+Resimler+(1).jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB1UbkNvOL0S4NYV0Uvvqblc7rb2Yt1bkbJhek2GmAKFDAVp4Xj8LSwz1nsSiOsY2FioG8uwlvYcHYfjgPdDyyWLwIukowQ2mEZoAwzjmRP7PovMfM9qEd94puwXZ1N9uecIXHcrZdwCYp/s1600/Super+Resimler+(1).jpg" height="200" width="320" /></a></div>
<br />

Şimdi yukardaki kodun içersinde (<a href="http://3.bp.blogspot.com/-..) bu kodun başındaki (<a href=) arasına yukarda vermiş olduğum kodu yerleştiriyoruz yani şu şekilde olacak (<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2"href=)

Kodu ekleyeceğimiz yeri resimli olarak gösteriyorum nereye ekleneceği konusunda bunu 
ÖNCEKİ HALİ diye tanımlayalım

<div class="separator" style="clear: both; text-align: center;">
<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2 href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB1UbkNvOL0S4NYV0Uvvqblc7rb2Yt1bkbJhek2GmAKFDAVp4Xj8LSwz1nsSiOsY2FioG8uwlvYcHYfjgPdDyyWLwIukowQ2mEZoAwzjmRP7PovMfM9qEd94puwXZ1N9uecIXHcrZdwCYp/s1600/Super+Resimler+(1).jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB1UbkNvOL0S4NYV0Uvvqblc7rb2Yt1bkbJhek2GmAKFDAVp4Xj8LSwz1nsSiOsY2FioG8uwlvYcHYfjgPdDyyWLwIukowQ2mEZoAwzjmRP7PovMfM9qEd94puwXZ1N9uecIXHcrZdwCYp/s1600/Super+Resimler+(1).jpg" height="200" width="320" /></a></div>
<br />

SONRAKİ HALİ 

Umarım açıklayıcı bir anlatım sergilemişimdir yapamadığınız veya takıldığınız bir durum olursa aşağıya yorum bırakmanız yeterli olacaktır arkadaşlar bende elimden geldiği kadar yardımcı olmaya çalışacağım.