 |
| Blogger Dersleri - Blogger Resim Zoomlama |
Blogger Dersleri kuşağında sizler için hoş bir resim zoomlama özelliği sunmak istiyorum. Blogger da belirlediğiniz resimler üzerine geldiğinizde yan ekranda resmin belli bir alanı büyütülmüş olarak sunulacak.
Blogger Dersleri - Blogger Resim Zoomlama
1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz.
2 ) Ctrl + F yardımı ile </head> kodunu buluyoruz.
3 ) </head> kodunun öncesine aşağıdaki kod dizinini ekliyoruz.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://wierdwalker.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(function($){
$('a.zoom').easyZoom();
});
</script>
4 ) Kodlar içerisinde tekrar Ctrl + F kombinini kullanarak ]]></b:skin> kodunu bulup öncesine aşağıdaki kod dizinini ekliyoruz .
#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;
}
Blogger Dersleri - Blogger Resim Zoomlama Efekti Kullanımı
Blogger Resim Zoomlama efektini kullanmak için Şablon >> Gadget Ekle >> HTML/Java Script kutucuğunu kullanarak aşağıda ki kodları ekleyin .
Eğer yazı içerisinde kullanmak istiyorsanız yayın eklerken HTML bölümüne geçerek aşağıda ki kodları ekleyin
<div class="separator" style="clear: both; text-align: center;">
<a class="zoom" href="Image url" imageanchor="1"
style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="205" src="Image url" width="320" /></a></div>
Blogger Dersleri - Blogger Resim Zoomlama Efekti Düzenlemesi
- İmg url kısmına eklemek ve zoom yapılmasını istediğiniz resim linkini eklemelisiniz.
- Kırmızı ile yazılmış kodlar ile boyutlandırma ayarı yapabilirsiniz.
Not: Kullanacağınız resim linkleri geniş olmalı ideal olan 1280x720 boyutlardaki resimlerdir.
Yorum Gönder