![]() |
HTML'de görselleri yan yana hizalama |
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 |
Ç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.
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 |
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.
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.
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ıtlayınSilTabi, bir çok resmi yan yana sıralayabilirsiniz.
SilBence çok kişinin takıldığı ve çözülmesi gereken önemli bir sorundu. Teşekkürler bilgi için.
YanıtlayınSilRica ederim..
SilÇ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ıtlayınSilTeşekkür ederim...
SilEmeğinize sağlık... Çok faydalı bir yazı olmuş.
YanıtlayınSilTeşekkür ederim...
Silhocam selamlar benim blog sayfamda olmuyor:( sebebi nedir ki acaba??
YanıtlayınSilMerhabalar, 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