Kaliteli resimler yayınlıyorsunuz blogunuzda. Bu kaliteli resimlere zoomlama yani üzerine gelince imlecin olduğu yerin yakınlaşmasını istemez misiniz ? Zoomlama sayesinde resimlerinizdeki ayrıntılar daha kolay ve iyi bir şekilde görünecektir. Bu şekilde profesyonel blogger anlayışınız pekişecek, kaliteli blogların sahipleri olacaksınız.
Eğer sizde profesyonel bloglar yazıyorsanız bu eklentiyi kulanmanız yararınıza olacaktır. O zaman hikaye kısmını geçelim, bu eklentiyi nasıl kullanacaksınız ? Nasıl uygulayacaksınız ?
İlk olarak : Kumanda Paneli>Tasarım>Htmlyi Düzenle bu yolu izleyin daha sonrasında sağ üst kısımda bulunan widget şablonlarını genişlet kutucuğunu işaretleyin. Ctrl+F yardımı ile kodlar içerisinde ]]></b:skin> kodunu bulun. Bu kodu bulduktan sonra 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;
}
2.Adım:Bu sefer yine aynı şeilde Ctrl+F yardımı ile </head> kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz </head> kodundan önceki kısma yapıştırıyoruz.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='https://suyb.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
$('a.zoom').each(function(i) {
$(this).easyZoom();
});
});
</script>
şablonumuzu kaydedip çıkıyoruz.
3.Adım: Şimdi geldik en son kısma.. Son olarak da blogunuza eklediğiniz resimlerden zoom eklentisinin aktif halde olmasını istediğiniz resme bazı kodlar eklememiz gerekiyor.
resminizin HTML kodu normalde aşağıdaki gibi görünür ;
<div class="separator" style="clear: both; text-align: center;"> <a class="zoom" href="http://2.bp.blogspot.com/-DPjvBLRp3XI/Tcl3KDrv0dI/AAAAAAAADwY/lyta4cvd9r0/s1600/large.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://2.bp.blogspot.com/-DPjvBLRp3XI/Tcl3KDrv0dI/AAAAAAAADwY/lyta4cvd9r0/s320/large.jpg" width="320" /></a></div>
zoom efektisinin aktif olmasını istediğiniz resmin html koduna kod içerisinde kırmızı renkle belirttiğimiz class=”zoom” kodunu ekliyoruz.Zoom eklentimiz kullanıma hazır.
İlgili Aramalar : Bloggerınıza zoomlama efekti, Zoomlama eklentisi, Resimleri zoomlayın, Picture zoom plugin for blogger, Blogger resim zoomlama
Yararlanılan Kaynak
Kaynak 1
Yorumlar