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>Yukarıdaki kodda yapmanız gereken iki değişiklik var. Bunlar;
<script src='http://yükleyiciadres/FancyZoomHTML.js' type='text/javascript'></script>
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.
Blog sahibi
Kendini sokaklara vursana,yarın da öğrenirdik biz :))
Kendini sokaklara vursana,yarın da öğrenirdik biz :))
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.
bir de hep sağa yaslıyor resimleri o kodu kullandığımda.
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!
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 :))
yazmam gerekiyormuş
dosyaları yükledim
:))
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..
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:)
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 :)
Yorum Uyarıları:
1- Yazıyı, Delicious, Stumble, FriendFeed, Facebook vb. paylaş tuşları ile arkadaşlarınızla paylaşın.2- Teşekkür etmekten ya da soru sormaktan çekinmeyin.
3- Sorularınız cevapsız kalmayacaktır. Sayfa adresini unutmayın, yeter.
4- Cevap yazma süresi değişiklik gösterebilir.
5- Yorumunuz, yorum kurallarına uygunsa yorum denetiminden sonra yayınlanacaktır.