7 Temmuz 2010 Çarşamba

Blogger'da Resimlerinizi Yanyana Sıralayın








Merhaba bu gün resimler benden değil, Heniala's isimli blogdan. Yukarıda görüldüğü üzere resimlerin düzenlemesi, yan yana bitişik alt alta vs değişik şekillerde yapılabiliyor. Bir süredir de bir yastıkta için böyle resimler koyuyorum. Çok resimli postlarda daha hoş bir görüntü veriyor.

Şimdi böyle fotoğraf yerleşiminin nasıl yapıldığını anlatacağım. Pek tabi fotoğrafı, fotoğraf programlarında bu şekilde kolajlayıp da sunabilirsiniz. Ancak benim yaptıklarım sadece kodlarla yerleşimin ayarlanması ile ilgili.

Biliyorsunuz kayıt oluştururken, bir kayıt oluştur bir de html yi düzenle penceresi var. Kayıtlarımı genelde html düzenle kısmından ayarlarım, böylece gözüm kodlara daha da alışmış oluyor. Zaten web tasarımını da bu şekilde öğrenmiştim. Dreamweaver'da çalışırken, pencerenin kod ve görsel diye ikiye ayrılması için bir seçenek var, ben sürekli onu kullanırdım ve kodları göre göre, yaptığım değişikliklerin kodlardaki karşılıklarını öğrendim.

Neyse, bütün bu resimler alıntı olduğu için url ile resim ekleme kısmından resimlerimizi giriyoruz. İki tip yazı düzenleyicimiz var biri eski olan biri güncelleştirilmiş olan. Genelde eski olanda daha kolay ayarlama yapılabiliyor. Güncelleştirilmiş düzenleyici kimi zaman resmin en ve boy oranını koda yansıtmıyor ki bizim asıl değiştireceğimiz kısım orası. Bu yüzden eski güncelleştirici üzerinden anlatacağım.

Öncelikle yazı alanınızın genişliğinin kaç piksel olduğunu bilmeniz gerekiyor. (Bazı geniş yazı alanı olan bloglar var, sağ ve soldan kenarlara yaslanmış şekilde yazıları olan. Bu blog teması biraz sorunlu bir temadır. Çünkü ekran genişliğine göre kendini genişletip daraltır, bu yüzden A bilgisayarında çok geniş, B bilgisayarında dar görünebilir. Bu durumda konacak oan resimler bilgisayardan bilgisayara farklı şekilde sıralanmış olacaktır.) Yazı alanının genişliğini keşfettikten sonra resimlerinizi koyacağınız genişliğ bulmanız lazım. Genelde bordür çizgisi kenarlardan 5 piksel boşluk bırakıyor. Bu durumda koyacağınız resim sayısına göre kenarlardan o kadar boşluğu hesaplamak gerekiyor.

İlk seferinde bu ayarlama biraz zaman alabilir, ancak sonra artık kafanızda ne kadar genişlik olacağı oturacak ve daha sonra hızlanacak.

Bir süredir eski düzenleyicide resimleri yüklerken sol, sağ, orta seçeneğinden başka " yok" seçeneği mevcut. Resimleri yüklerken o seçenek seçili olmalı. Ardından url ile resimlerimizi ekliyoruz (ya da gözat ile de olur, aynı şeyler geçerli olacak)

Yukarıdaki resimlerin düzenlemesini kendi genişliklerim üzerinden anlatacağım. Benim yazı alanım 640 px ve bordürleri de sayarsak en fazla 620 piksel genişliğe yükleyebilirim, biraz boşluk kalsa da olur.

Resimleri yükledikten sonra html düzenleye geliyoruz, burada her bir resim küçük işareti ve a ile başlar a ardından büyük işareti ile biter. Aynı link verme kodu gibi zaten o da resmin linkini gösteriyor. Daha önceki yazılarımda göstermiştim.

Resimleri yüklediğimizde her bir resim başlangıcı satır başında yer alacaktır. Bu her bir resmin enter ile bir alt satırda olması demek. Eğer aradaki boşluğu silip de ikinci resmin başlangıcını diğer resmin bitişine taşırsanız, resimler yanyana gelecektir. Resimler küçük ise, yazı alanınızı dolduracak kadar çok resmi yanyana koyabilirsiniz. Mesela 10 resmi yanyana getirdiniz yazı alanıza maksimum 4 resim sığdı diyelim diğer 4 resmi alt sıraya, diğer 2 resmi alt sıraya otomatikman atacaktır. Her ne zaman siz enter deyip alt satıra geçerseniz zorunlu olarak altta yer almasını sağlamış olursunuz.

Yani kısaca aradaki boşlukları silip resim kodlarını yanyana getiriyoruz. Eğer bu yanına getirme sırasında arada bir space bırakırsanız resimler birbirinden ayrı, hiç space bırakılmasza yapışık resimler elde edilir.

Şimdi gelelim daha düzgün görünmler elde etmeye, zira resimlerin bazıları dikey, bazıları yatay çekilmiş olabilir. Şimdi sırasıyla benim yukardaki resimleri inceleyelim. 

Birinci satırdan başlayalım. Biri yatay biri dikey resim ama ikisinin de yüksekliği eşit olsun istiyorum. Kodun içinde en (width) ve boy (height) piksel değerleri gözükecek. Buradan her bir resmin eni ve boyunu görüyoruz. Ben birinci satırdaki resimler için ikisinin de yüksekliğini 295 px ayarladım. Yüksekliğini değiştirdiğim için width=XXXpx yazan yeri siliyoruz. Eğer o ifade kalırsa resminiz eski genişlikte yeni yükseklikte çarpık bir resim olacaktır. Kodun içinde hangisini değiştirecekseniz (en yada boy) değiştirip diğerini siliyoruz. Bu durumda ilk satırdaki resimlerde yatay resim ve dikey resim yükseklikleri 295 olacak şekilde kendilerini ayarladılar.

2 satırda tek bir resim olsun istedim ve resim genişliğini benim resim alanım olan değere ayarladım 640px yazıp yüksekliği sildim. Burada dikkat edilecek bir husus daha gerçek boyutları büyük olan resimleri küçültüp, küçük olan resimleri büyütmemek. O zaman resim flu gözükecektir. Muhakkak en fazla orjinal boyutunda olmalı, daha küçülebilir ama büyümesin.

3. satırda dikey halde iki resmi yanyana koymak istedim. bu iki resim de aynı en boy oranına sahipti. İkisinin de genişliğini 310px ayarladım, yüksekliklerini sildim.

4. satıra yine 640 px genişliğinde bir tek resim koydum.

5. satıra dikey resimlerden 3 tane yerleştirdim. Deneyerek gördüm ki yüksekliklerini 287 ayarlarsam hepsi bir satıra sığacaktı. Genişliklerini de yaralayabilirdim ancak en boy oranı farklı olan resimlerde, genişlikleri aynı olunca yükseltilerinde farklılık oluşuyor ve kimisi daha kısa görünüyor. Bu durumda yüksekliği ayarlamak daha iyi. Bir de bu satırdaki resimler arasında boşluk yok. Benim bordürüm olduğu için iç kısmdaki bordürler üstüste gelmiş görünüyor, bordürsüz temalarda resimler boşluksuz yapışacaktır.

6. satırda yine aynı ebatlara sahip iki resmin genişliğini 310 px ayarladım.

Şimdi çok karmaşıkmış gibi görünebilir ama değil. Özellikle sitesinden satış yapanların, pörtfoy sunanların bu görünüm özelliklerine dikkat etmesi iyi olacaktır.

Açık yazmaya çalıştım ama anlaşılmayan birşey olursa sorabilirsiniz.

17 yorum:

  1. Ben de yan yana resim ekleyeceğim zaman kolajlamayı çok kolay buluyorum. Ama bu kodla ilgili bilgiler harika oldu. Vakit bulduğumda mutlaka deneyeceğim. Teşekkürler canım...

    YanıtlaSil
  2. Canımmm şu resimleri yanyana getir
    meyi öğrenmem lazım.Ama şu anlar ak
    lım o kadar doluki becerebilirmiyim
    acaba:))Kocaman öptüm...

    YanıtlaSil
  3. rüya gibi fotolar ya bu html işlerinden falan hiç anlamıyorum teknoloji özürlü olmak berbat birşey : )

    YanıtlaSil
  4. Akıcı öğretimini özlemişim GeCecim,ne çok emek vermişsin yine.Kolajlama bir yere kadar,ben kodlarla olanı çok sevdim.Akşam ben de deneyeyim,yo yo akşam değil de yeni yazı yazdığımda :) Tembellik pek iyi geldi bu ara :)

    YanıtlaSil
  5. teşekkür ederim harikaymış gerçekten ben genelde picasada ayrlıyorum çok kolay geliyor bana ama bunuda denemeye çalışacağım:)

    YanıtlaSil
  6. tatlılara bakmaktan yazıyı okuyamadım :)))) muhteşem lezzetli görünüyolar... Yazıyı da karnımı doyurup okicam. Teşekkürler ge-ce :)

    YanıtlaSil
  7. GeCe ablacımm... blogunu ziyaret etmeyeli uzun zaman oldu :) neyse özledim seni ben. öyle bi hal hatır sorayım dedim.. benim postlar zaten tek resimli oluyo bişey farketmeyecek ama sağol. öptüm.

    inşallah Ce abimize çabucak kavuşursun.. bende senin gibi bekliyorum ama son 15 gün..

    hayırlısı.

    YanıtlaSil
  8. Merhaba gececim,açıklamalarnız için sagol, çok işe yarıyor.Eger mümkünse size birşey sormak istiyorum.Bloguma kendimce yenileme yapıyorum.Yalnız bir erde takldm.Anlatmaya çalışaym tam olarak html deki isimleri bilemiyorum.bolg listem,izleyiciler g.b resim koymak istiyorum.Dah önce takip listemin anlatımlarıyla yapmıştım ama şimdi yeni şablonlarda kod isimleri degişmiş mesela sidebar yok,diger isimlerde de degişiklik var galiba.Onun yerine gelen ismi bulamdım.Birde post oluyor galiba konular arasına resim eklemek istiyorum.Sizin açıklamalarnızı okudum ama bu konularda fazla bilgim olmadıgı için anlıyamadım eger daha açıklayıcı anlatmak mümkünse,anlatırsanız çok sevinirim.Şimdiden ilgi ve alakanıza teşekkür ederim.Saglıcakla kalın en kısa sürede eşinize kavuşmanız dilegiyle!!!

    YanıtlaSil
  9. Merhaba! Ben Banner yapmak için hangi programı kullandığını soracaktım. Benim İngilizce bilgim neredeyse sıfır. Pek süper şeyler yapma ihtiyacı duymadığım için program indirmedim. Yapacağımı Power Point 2007'de yapıp JPEG olarak kaydediyorum. Banner'ımı öyle yaptım. Başka yollar var mı? (Kolay olursa sevinirim.)

    YanıtlaSil
  10. sevgili turkuaz yeni şablonları çok fazla olmasa da biraz inceledim, gördüğüm kadarıyla birçok şey farklu ve bazıları değişemeyebilir belki, çünkü benim incelediğim bir temada,şablon genişlikleri bile piksel değerleri ile değil oranlarla gösterilmişti, bu durum ise bir çok şeyi karıştırıyor, ilerleyen zamanlarda tekrar bakabilirim sanıyorum

    YanıtlaSil
  11. Sevgili GeCe'cim bu bilgi çok işime yarayacak.Teşekkür eder,en içten sevgilerimi yollarım.

    YanıtlaSil
  12. gececiğim yine faydalı bilgilerle fethettin beni.denemeye hazırım ama başara bilir miyim bilemem?
    sağol

    YanıtlaSil
  13. Çok faydalı oldu, denemeye başladım taslak yazılarımda. Teknik özürlü insanlar için süper bir blog hazırlamışssınız. Acaba fotolara nasıl çerçeve koyabileceğimizle ilgili bilgi de verir misiniz? Teşekkürler

    YanıtlaSil
  14. HELE BEN GİBİ çok resim kullanan bir bir blog, derhal yapmalıydı bunu.
    söz veriyrum dersimi çalışacağım :)))))

    çok sevgiler. harika bir öğreti.

    YanıtlaSil
  15. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  16. Merhaba ben bir şey sormak istiyorum..Kayıt yayınlarken resim ekliyoruz buraya kadar tamam :) ben blogumda eklediğim resmin yanına yazı yazmak istiyorum nasıl yapıcam acaba?

    YanıtlaSil
  17. tesekkurler.degisiklikleri ogrendim sagolun.

    YanıtlaSil