in , ,

Blogger Resimlerinize Zoom Efekti Ekleyin.

image zoom
image zoom

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.

zoom, image zoom

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://www.sosyofikir.com/wp-content/litespeed/localres/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() { 
$(&#39;a.zoom&#39;).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

Report

What do you think?

Written by sosyofikir

Doğu Akdeniz Üniversitesi Mimarlık Fakültesi'nden 2018 yılında mezun oldum. Blog serüvenim yaklaşık 8 sene önce başladı. Hala o eski heyecanımı taşımaktayım. Amacım sizler için kaliteli, özgün ve sıkıcı olmayan kullanıcı tabanlı bir site hazırlamaktır. Teşekkür ederim. Bana her türlü konuda ulaşabilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Damien Rice Müziği, Gri Bulutlar Ve Yağmur ! 2

Damien Rice Müziği, Gri Bulutlar Ve Yağmur !

.örg Komedisi İlk Bölüm 3

.örg Komedisi İlk Bölüm