26 Nisan 2009

"Blogger Resimlerinizi Efektler ile Şenlendirin" isimli yazımda resimlerinizin üzerine farenizi sürüklediğinizde daha önce üzerinde hafif bir sis bulutu var gibi görünen resminiz daha net görünmesini sağlayacak bir blogger resim eklentisini anlatmıştım.

Bu yazımda ise Blogger yazılarınızda kullandığınız resimlerinize tıkladığınızda resmi yakınlaştırma, büyütme, zoom yapabilmenin ne kadar kolay olduğunu anlatacağım.

1) Öncelikle bu iki dosyayı indirin:
FancyZoom.js ve
FancyZoomHTML.js

Kaydettiğiniz dosyaları weebly.com gibi ".js uzantılı dosya eklemenize izin veren siteler"den birine yükleyin. Yükledikten sonra adreslerini not etmeyi unutmayın. (Weebly'e .js uzantılı dosya yüklemeniz için üye olun ve bir blog oluşturun. Daha sonra "Elements > Multimedia > File" yolunu izleyerek .js uzantılı dosyanızı yükleyebilirsiniz.)

Ayrıca, farklı yöntemler için Blogger'da JavaScript Nasıl Kullanılabilir? isimli yazımdan yardım alabilirsiniz.

2) Yerleşim > HTML'yi Düzenle > Widget Şablonlarını Genişlet' e tıklayın. Ve "Ctrl+F" yardımı ile </head> kodunu aratarak, bulun.

Hemen üstüne altaki kodu yapıştırın.

<script src='http://www.yükleyiciadres/FancyZoom.js' type='text/javascript'></script>

<script src='http://yükleyiciadres/FancyZoomHTML.js' type='text/javascript'></script>
Yukarıdaki kodda yapmanız gereken iki değişiklik var. Bunlar;

http://www.yükleyiciadres/FancyZoom.js
ve
http://www.yükleyiciadres/FancyZoomHTML.js

adresleri yerine kendi yüklediğiniz dosya adreslerinizi yazmak.Bu değişiklikleri yapmayı unutmayın.

3) "Ctrl+F" yardımı ile <body> kodunu aratarak, bulun. Bulduğunuz <body> kodunun yerine alttaki kodu yapıştırın

<body onload="setupZoom()">


Artık şablonunuzu kaydebilirsiniz.

Yazılarınızda kullandığınız resimlerde bu efekti kullanmak istediğinizde, photobucket.com , flickr.com,imageshack.us gibi resim yükleyebileceğiniz sitelere resminizi yükleyin. Alttaki örnek koda resim adresini yazarak kullanabilirsiniz.

<a href="http://i620.photobucket.com/albums/tt289/bobokous/futursuzca1.jpg"><img height="200" src="http://i620.photobucket.com/albums/tt289/bobokous/futursuzca1.jpg" width="300" border="0" /></a>
Bu kodda yer alan: Width="300" and height="200" resmin yüksekliğini ve enini boyutlandırmanızı sağlar. Width (ing): en, genişlik (tr); Height (ing): Yükseklik (tr)

Örnek görüntü için bu adresi ziyaret edin.

Güle güle kullanın...

Not: Blogunuzun görüntülenme süresi uzun sürüyorsa bu efekti kullanmanızı önermiyorum. Çünkü bu efekt ancak sayfa tam olarak görüntülendiğinde etkin olabiliyor.

Uyarı;
Herhangi bir aksi durumdan temanızı koruma amaçlı olarak şu hatırlatmaları yapmak isterim;

1. Blogger'a kullanıcı adınız ve şifreniz ile giriş yaptıktan sonra "Kumanda Paneli"nden (dashboard), temayı uygulamak istediğiniz blogunuzun "Yerleşim" (layout) kısmına tıklayın.
2. Yerleşime tıkladıktan sonra açılan sayfada, "HTML'yi Düzenle" (Edit HTML) kısmına tıklayın.
3. "Tam Şablonu Yükle" (download full template template) 'e tıklayarak var olan temanızı bilgisayarınıza kaydedin.
Yorum
y. dedi ki...
Allahım pazar pazar,gezip eğlensene..
Kendini sokaklara vursana,yarın da öğrenirdik biz :))
y. dedi ki...
Allahım pazar pazar,gezip eğlensene..
Kendini sokaklara vursana,yarın da öğrenirdik biz :))
Sade dedi ki...
:)) gezmek, tozmak, fotograf cekmek,... bende yazıyı yazar yazmak aynen işte böyle yapmıştım:D
numa dedi ki...
tanıtım için teşekkürler bu resimler ile ilgili anlatımıda yapmaya çalışacağım selamlar
Sade dedi ki...
@numa: çok basit 2-3 adım ile resimlerini şenlendirebilirsin. Eger yardıma ihtiyacın olursa bende yardım etmeye çalışırım. kolay gelsin. Selam ile...
Callahan Ağabey dedi ki...
'Senin aklına bişi geliyo mu?'

uyguladım, çalışıyor. şey var, resimi hep sağa yaslıyor. peki o resimi nasıl ortalıyacağız? ya da ben neyi yanlış yapıyorum.
Callahan Ağabey dedi ki...
bu kendi bilgisayarımızdan direkt olarak yüklediğimiz resimler için geçersiz bir uygulama mı? resimi önce bir resimyükleyicisi siteye yüklememiz mi gerekiyor? çok üşengecim de :)

bir de hep sağa yaslıyor resimleri o kodu kullandığımda.
Sade dedi ki...
Yükleyici site aracılığı ile daha iyi çalışır! Ayrıca bloger ile yüklenen resimler HTML düzende dikkat edersen yukarıda resim için kullanılması gereken koddan farklı kodlarda içerir. Bu yüzden tıkladığında resim büyümeyecektir.

Resmi farklı bir yükleyiciye yükledikten ve ardından yukarıdaki kodu kullanarak yazına ekledikten sonra yazıda resmi seç ve ortala! Böylece istediğin şekle dönüşür!
nükhet dedi ki...
tekrar merhaba
anlattığnız yolları izledim amaWeebly deki multimedia/file çalışmıyor hiçbir dosyayı yükleyemiyorum,
birde resimleri büyütmek için daha basit bir yol yokmu acaba muhakkak başka sayfayamı yüklemek lazım resimleri :))
nükhet dedi ki...
çok özür dilerim
yazmam gerekiyormuş
dosyaları yükledim
:))
Sade dedi ki...
Herşey yolunda o zaman!;) Aklınıza takılan bir yer olursa çekinmeden sorabilirsin, elimden geldiğince yardım etmeye çalışırım...
nukhet dedi ki...
yine ben ..
dediklerinizi aynen yaptım ama resmin üztüne tıklayınca yine hiçbirşey olmuyor
sitedeki bütün resimlerimi birde weebly e mi yükliyeceğim o kısım biraz karıştı kafamda
bugün sizi biraz yordum ama kusura bakmayın :)
bir de sitenizde bir iki yazı aradım ama sonuç bulamadım
sitemdeki yazıların kopyalamaya kapalı olmasını istiyorum...bunu bulamadım eminim bir yazınız var ama doğru kelimeleri bulamadım herhalde
çok çok çok teşekkürler..
Sade dedi ki...
Webbly ye yüklenmesi gereken 2 dosya var ; FancyZoom.js ve FancyZoomHTML.js bu kadar.

Resimleri ise; tinypic.com, photobucket.com gibi sitelere yüklemelisiniz. Yüklenen resmin web adresini kopyalayın.

Ardından yazınızı yazarken HTML-Düzenle seçeneğini seçerek 3. maddede vermiş olduğum koda kendi resim adresinizi yapıştırmalısınız!

Sanırım son kısımda bir yanlışık olmuş. Bi kontrol edin derim...

Böyle yorgunluğa can kurban sevgili nükhet, ben severek yardım etmeye çalışıyorum.

Açıkçası birçok site yazılarınızın kopyalanmaması için farklı yöntemler mevcut ancak, hiçbiri tam manasıyla içeriğin kopyalanmasını engelleyecek kadar başarılı değil. Kesin bir çözümü olmadığından bende bu konuda herhangi bir paylaşımda bulunmadım. Umarım hayal kırıklığına uğratmamışımdır sizi:)
nükhet dedi ki...
sevgili sade
kendime yeni bir header yapmak istiyorum fakat demelerim istediğim kalitede olmadı ,elimde scrapbook digital materyaller var onları birleştirip http://www.deliciousscraps.com un header ı gibi görünmesini sağlamak için ne yapmalıyım. photoshop kullanıyorum ama bir yerde bir hata yapıyorum(farklı bir programmı kullanmalıyım)
bu konuda da yardımcı olursan sevinirim :)
Sade dedi ki...
O sitedeki headerın adresi altta. Yazıları değiştirmeniz bile yeterli olabilir. Photoshop ile gayet başarılı şekilde yapabilirsiniz. http://3.bp.blogspot.com/_4ftTCIka0qg/Si-7xHplHaI/AAAAAAAAAHA/2OuO6RW62uQ/S1600-R/hhh.png
nükhet dedi ki...
teşekkür ederim..:)
B | ilquer dedi ki...
FancyZoomHTML.js linkini FancyZoomHTML.jss olarak yönlendirmişsiniz , gözünüzden kaçtı herhalde.Arkadaşlar kafası karışabilir ;)
Sade dedi ki...
uyarı için teşekkürler...
Root Admin dedi ki...
Çok güzel paylaşımlar ınove temasını nasıl geliştirebilirim.
PabucumunBlogu dedi ki...
harikasın arkadaşım ama şuan ben de üşeniyorum yapmaya.keşke daha basit bi yöntem olsa idi. bi ara ilgileneceğim...