Bir kaç haftadır bloguma yüklediğim fotoğraflarıma zoomlama efekti ekliyorum. Bu da oldukça dikkat çekti. Herkes nasıl yaptığımı soruyor. Bende tesadüfen bu sayfadan öğrendim, emeği geçenlere teşekkür ediyorum.
Oradan öğrendiklerimi bir de ben anlatayım, ister misiniz?
Zoomlama efektinin eklenmiş hali
♥♥♥♥♥♥♥
1. Bloggera girişi yapıp Şablon' a tıklıyoruz. Oradan Html'yi Düzenleyi açıyoruz.
2. Açtığımız pencereden geriye kalan işlemlerimizi yapacağız ama öncelikle Widget Şablonlarını Genişlet' i işaretliyoruz. Daha sonra ]]></b:skin> kodunu buluyoruz ve hemen üzerine aşağıda ki kodu 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. Açtığımız pencereden geriye kalan işlemlerimizi yapacağız ama öncelikle Widget Şablonlarını Genişlet' i işaretliyoruz. Daha sonra ]]></b:skin> kodunu buluyoruz ve hemen üzerine aşağıda ki kodu 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;
}
3. Yine aynı pencereden </head> kodunu bulup, hemen üzerine aşağıda ki kodu yapıştırıyoruz. Sonrada Şablonu Kaydet ve çık.
<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>
♥♥♥♥♥
Arka planda yapacağımız işler bu kadar. Uzun gibi gelip gözünüzü korkutabilir ama uygulayınca oldukça basit olduğunu göreceksiniz.
Son adımımız yazımızı yazarken zoom efektini koyacağımızda gerçekleşiyor. Yazımıza görselimizi ekliyoruz ve HTML' ye geliyoruz (Yayın başlığının hemen altında Oluşturun yanında) class="zoom" kodunu a href kodunun arasına yapıştırıyoruz. Aşağıda ki görselde eklenmiş ve eklenmemiş halini göreceksiniz.
NOT: Ben yazımı yazmadan önce görselimi ekliyorum ve HTML'den gerekli değişikliği yapıyorum ki uzun kodlar arasında gerekli kısmı bulmakta zorlanmayayım diye, sizde bu şekilde yaparsanız işiniz daha kolay olacaktır.
Kolay gelsin☻
5 yorum:
bencede görsellere ayrı bir hoşluk katıyor ama çok meşakatliymiş yaahuu..
Bilgisayar danışmanım emeğine bilgine sağlık..
Denedim, sevdim, teşekkürler ;)
canm benimm ellerine sağlık şimdi oğluşun evindeyim yarın daha detaylı bakacağım öptüm,teşekkürler
Enfes , canım benim sen yap ben seyredeyim çok zor geldi bana ama sonuç harika:))
Yorum Gönder