Blogger yayınlarında resimler yan yana nasıl sıralanır?

30 Mayıs, 2017
HTML'de görselleri yan yana hizalama
HTML'de görselleri yan yana hizalama
HTML'de resimler yan yana nasıl sıralanır? Blogger, Wordpress'de resimleri yan yana sıralama nasıl yapılır? İçeriklere eklediğiniz görselleri yan yana sıralayın...

Blogger, her ne kadar da kullanımı basit bir içerik editörü sistemine sahip olsa bile, bazı işlemleri gerçekleştirmemiz için az da olsa kod bilgisine sahip olmamız gerekir. Örneğin görselleri yan yana sıralarken...

Daha önce mutlaka denemişsinizdir yayınlarınızın içerisine görsel eklemeyi, hatta eklediğiniz görselleri sürükleyerek yerleştirmeyi. Peki görselleri yan yana sıralamayı denediniz mi?

Bu işlem için bilmemiz gereken basit bir kod bulunmakta. Bu kod ile görsellerin boyutlarını küçülterek yan yana sıralayabiliriz.
Blogger görsel ekleme
Blogger görsel ekleme
Çoklu görsel eklediğimizde yukarıdaki gibi bir görüntüyle karşılaşırız. Görseller otomatik olarak alt alta sıralanır. Tabi sadece iki tane değil çok sayıda görseli yan yana sıralamak ta mümkün. Yalnız burada bilmemiz gereken bir şey daha var. blog sayfamızın genişliği. Eğer genişliği bilerek görsellerin boyutunu küçültürsek, daha sağlıklı sonuçlar alabiliriz. 

Görselleri ekledikten sonra hemen sol üst tarafta yer alan "Oluştur, HTML" seçeneklerinden "HTML" seçeneğine tıklayın.
HTML görsel konum kodu
Ardından yukarıda yer alan resimdeki gibi kodların olduğu alanla karşılaşacaksınız. Burada
style="clear: both;
kodunda ki clear: both yerine float: left yazmanız gerekir. Yani
style="float: left;
olarak düzenlemeniz gerekir. Bu işlemin ardından yine sol üst köşede yer alan "Oluştur" seçeneğine tıklayın.
HTML'de görselleri yan yana hizalama
HTML'de görselleri yan yana hizalama
Oluştur seçeneğine tıkladıktan sonra karşınıza yukarıdaki gibi görsellerin yan yana hizalandığını göreceksiniz. Yalnız burada resimde gördüğünüz gibi bir sonraki resimde üst kısımda bir satırlık boşluk görebilirsiniz. Bunu da normal satır siler gibi silmeniz gerekir.

Tüm yapmanız gerekenler bunlardı. Ayrıca daha önce belirtiğim gibi height ve width kodları uzunluk ve genişliği belirtir. Eğer görsellerin yeteri kadar küçülmediğini düşünürseniz bu kodların yanında yer alan değerleri düşürerek daha küçük boyutlu görsellere sahip olabilirsiniz.

Konuyla ilgili takıldığınız yerler olursa yorum yaparak bana bildirebilirsiniz. Ayrıca bu konunun ardından tavsiye ettiğim aşağıdaki içeriklere de bi' göz atın derim.
                      kartvizit

13 yorum:

  1. Ben bunu sürükleme yöntemiyle yapıyordum ve aralarında bir fotoğraf girecek kadar boşluk oluşuyordu (bknz:oyuk festival yayınım) O yüzden sanırım bu bir seçenek yaratacak bana. Peki aynı şekilde 3 foto yanyana kullanabilir miyiz? :)

    YanıtlaSil
    Yanıtlar
    1. Tabi, bir çok resmi yan yana sıralayabilirsiniz.

      Sil
    2. Aradan onca zaman geçmiş ve ben şimdi bu konuyla ilgili ama resim değil de sütun halinde yazı oluşturmak için ne yaparızı sorgulamaya geldim :) A, B, C diye alfabetik bir sıralama yapmaya çalıştım "Bir kelime Fihristi"nde tabii karman çorman oldu :))) İmdat Ümittt :)))

      Sil
    3. Arlinadizayn sitesinde ilk yazıda istediğiniz eklentiyi bulabilirsiniz.

      Sil
    4. Satoshi, Çok teşekkür ederim

      Sil
    5. Merhabalar Sezer Abla, kusura bakma lütfen geç yanıtım için. Bahsettiğin konuyla ilgili Blog Hocam'ın şöyle bir yazısı var.
      https://bloghocam.blogspot.com/2017/11/blogger-cok-sutunlu-yazilar.html

      Sil
    6. Teşekkürler Mehmet Bey öneriniz için.

      Sil
    7. Ümitciğim, olsun canım, biliyorum yoğunluğunu. Senden bir ses duymak keyiflendirdi beni :)) Teşekkürler,

      Sil
  2. Bence çok kişinin takıldığı ve çözülmesi gereken önemli bir sorundu. Teşekkürler bilgi için.

    YanıtlaSil
  3. Çok faydalı bir yazı olmuş, mutlaka faydalanan olacaktır. Bir de Blogger yayınlarında CSS ile galeri oluşturma yazısı olsa on numara olur.

    YanıtlaSil
  4. Emeğinize sağlık... Çok faydalı bir yazı olmuş.

    YanıtlaSil
  5. hocam selamlar benim blog sayfamda olmuyor:( sebebi nedir ki acaba??

    YanıtlaSil
    Yanıtlar
    1. Merhabalar, yazıda bahsettiğim kodu ekledikten sonra editör kısmında ikinci resim bir alt satıra geçmiş olabilir. O satırı silerek sorunu çözebilirsiniz. Ayrıca resimlerin boyutları farklıysa yine kaymalar olabilir hatta iki resmin toplam genişliği yazı alanının genişliğinden fazlaysa yine yan yana sıralanmayacaktır. Resimlerin boyutlarını ayarlayarak bu sorunu aşabilirsiniz.

      Sil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
3. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanın.

Copyright © 2016 - 2024 Blog Tecrübem. All rights reserved. Powered by Dijidal.com and Blogger. I Google
Sitede yer alan tüm içerikler Blog Tecrübem'e aittir, kullanım koşulları çerçevesinde alıntı yapılabilir.