Blogger resimlere harika zoom eklentisi
Kategori :
Blogger
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
CTRL + F yardımı ile bu </head> kodunu bulun ve hemen üst kısmına alttaki kodu yapıştırın.
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.
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.
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;
}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() {
$('a.zoom').each(function(i) {
$(this).easyZoom();
});
});
</script>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/AVvXsEjo3HUqnYJ8n4J9LkBvRb8SSt0s_DAA3-hjGzHpq4_6mb8ZtO-x_qNfbjDIzW8dRyfkaxBQSx60sB-DF47QItzijbnO6Ef2YJ4d4LHJmqLduohqK1TllViJ4exaSyk3dsvPCsQrG-382WNb/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/AVvXsEjo3HUqnYJ8n4J9LkBvRb8SSt0s_DAA3-hjGzHpq4_6mb8ZtO-x_qNfbjDIzW8dRyfkaxBQSx60sB-DF47QItzijbnO6Ef2YJ4d4LHJmqLduohqK1TllViJ4exaSyk3dsvPCsQrG-382WNb/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.
Yorumlar