Blogger resimlere harika zoom eklentisi

Arkadaşlar bugün sizlere blogger resimleri daha
iyi incelemeniz ve daha şık bir görüntü kazandırmanız için süper bir eklenti sunacağım. Bu eklentinin çok hoşunuza gideceğini düşünüyorum size altta verdiğim demo sitesine girdikten sonra herhangi bir resmin üzerine gelin ve bu tasarımın şıklığına siz karar verin


Bir kaç yorum ve tavsiye üzerine benimde bakmamdan sonra önizlemenin çalışmadığını fark ettim 

Adım 1)
☺Blogger Kumanda Paneli girin
☻Daha  sonra Şablon seçin
☺HTML'yi Düzenle diyin ve daha sonra   CTRL + F yardımı ile bu  ]]></b:skin> kodunu bulun
☻Sonra Aşağıdaki Kodu Hemen  ]]></b:skin>  Üstüne Yapıştırın

#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;
}

Adım 2)
CTRL + F yardımı ile bu </head> kodunu bulun ve hemen üst kısmına alttaki kodu yapıştırın.

<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>

Adım 3)
 Burdaki adımda yapacağınız tek şey şu şuan kodumuz hazırlandı siz zoom efektinin aktif olmasını istediğiniz resimlere aşağıdaki kodları verirseniz zom efekti aktif olur.

<div class="separator" style="clear: both; text-align: center;">
<a class="zoom" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwQHR3Qq1LLj-yRGfT5xTbqwTkNtVz5LtHsFYH8zoUBlYZRRl_e4CNXbkFn2EzeerTQe4Nrb47m4_miLsbSXox54DZuDZxj_dbzr6qpOLMPoTUdL_NMUcrgvdryX2WN9ePFi6Yni9wF-1B/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/AVvXsEiwQHR3Qq1LLj-yRGfT5xTbqwTkNtVz5LtHsFYH8zoUBlYZRRl_e4CNXbkFn2EzeerTQe4Nrb47m4_miLsbSXox54DZuDZxj_dbzr6qpOLMPoTUdL_NMUcrgvdryX2WN9ePFi6Yni9wF-1B/s320/large.jpg" width="320" /></a></div>

Ve arkadaşlar ekledikten sonra tasarımımız hazır iyi kullanışlar.
Yazıda birkaç kullanıcıda sorun çıkması üzerine güncellenmiştir.

Share this: