Blogger da CSS ile otomatik resim boyutlandırma (image resizer)

Arkadaşlar eğer resimlerinizin tamamını aşağıdaki formata göre sürekli düzenlemek zor geliyorsa veya daha önceki bu formatta yazmadığınız resim kodlarının, yani kısacası sitenizde bulunan bütün resimleri aynı formatta ayarlamak istiyorsanız. Bu konumuz sizi ilgilendiriyor.

Blogger da CSS ile otomatik resim boyutlandırma (image resizer)

Normalde resimlerin img parametresini

<img style="”height: 260px; width: 560px;" alt="" src="”http://www.blogasistan.com/wp-content/uploads/2009/07/just-host-thumbnail.png”" />

veya

<img alt="" src="”http://www.blogasistan.com/wp-content/uploads/2009/08/digital-abstract-art-820×1024.jpg”" width="”560″" height="”260″/" />

bu şekilde düzenliyorduk.

İşte şimdi yapacağınız css değişikliği sayesinde bu işlemi yapmanıza gerek kalmayacak. Resimlerinizi istediğiniz değerlere tek değişiklikle oturtabileceksiniz.

Bunu için Tasarım >> HTML’yi Düzenle >> dedikten sonra “ctrl F” yardımıyla;

.post img {

kodunu bulun. Ve bu kodun altına aşağıdaki koddaki değerleri ekleyerek değişiklik yapabilirsiniz.

.post img {float:center;min-width:560px;max-width:560px;max-height:260px;min-height:260px;padding : 10px;line-height : 2em;margin: 0 auto 10px auto;clear: both;}

Buradaki kodların hepsini almanıza gerek yoktur. Resimlerin sadece genişliğini değiştirmek ve yüksekliklerinin otomatik değer almasını istiyorsanız.

max-height:260px;min-height:260px;

bu yükseklik kodlarını almanıza gerek yok. “Max-” olan kod maximum alabileceği boyut “Min-” ise minumum alabileceği değeri belirlemenizi sağlar. “Max- ve Min-” aynı anda ikisini de kullanmanıza gerek yoktur. Resim boyutları yazı kısmımı taşmasın istiyorsanız “max-height:260px;” kodunu kullanmanız yeterli olacaktır. Buradaki 260px; değerleri ise pixel değerini belirler. Bunu değişiklik yapabilir sitenize göre değer verebilirsiniz.

Not: Eğer

.post img {

kodunu bulamazsanız.

]]>

kodunu bulup hemen üzerine oluşturabilirsiniz.

 

“Blogger da CSS ile otomatik resim boyutlandırma (image resizer)” 6 yorum yapıldı.

  • Bu Konu İçin çook teşekkürler bende bunu arıyordum tam istediğim bir konu ayriyetten hiç bir siteye bugüne kadar yorum yapmadım ilk buna yorum yapıyorum buda sizin farkınız 🙂 Başarıların devamını diliyorum..

  • max-height:260px kodu olunca resmin orjinal boyutuna göre resim şekilsizleşiyor. daha kalın olması gereken resim bu kod yüzünden inceliyor ve garip şekilsiz bir hal alıyor. bana otomatik boyutlandırma otomatik şekilde en iyi boyuta gelme kodları egrekiyor. yani ben resmi orjianl boyutuyla yayınlayacağım eğer sayfadan büyükse tam oturmuş yamulma kayma resimde bozulma olmadan oturması lazım. bu kodlarla o olmuyor maalesef. büyük resmi küçültüyorsun resmin feriştahı kayıyor

  • Çok Teşekkürler Bu sayede otomatik tüm resimleriimi boyutlandırdım.

  • Adnan bey paylaşımınız için teşekkür ediyorum. Blogger ansayfadaki konu resimlerimin orantılarını korumak istiyorum. Sanırım küçük bi koda ihtiyacım olacak fakat bulamadım. Genişlik yükseklik ayarını yaptığım yeri buldum ve boyutlarını değiştirebiliyorum fakat genişliği sabit yüksekliği otomatik olarak ayarlamam gerekiyor.

    }]]>

    var thumbnail_mode = "no-float" ;
    summary_noimg = 385;
    summary_img = 285;
    img_thumb_height = 350;
    img_thumb_width = 598;

    yükseklik değerine img_thumb_height = auto;

    değeririni eklediğimde anasayfada resimler oranlanıyor fakat devamını oku yazısı kaybolup tüm yayını gösteriyor. Ne yapmam gerekiyor yardımcı olabilirseniz sevinirim.

  • Hocam benim css thimb thumb dosyasından çağırıyor olabilir bu konuda şu satırı css de buldum:

    .post-thumbnail img.attachment-tie-small,.post-thumbnail img.avatar-50{width:55px!important}

    Bu kodda height atanmamış bunu nasıl nerden çekiyor acaba? thumbnail resmi biraz daha büyütmek istiyorum da.. acaba ne yapmalıyım. Bu satırı değiştirmeye de korkuyorum açıkçası. ayrıca bir thimbthumb php dosyası olduğu için çakışmasından korkuyorum. bana bir öneriniz var mı acaba siteme bakarsanız belki anlayabilirsiniz.

  • kenarlarını nasıl oval yaparız

Yorum Yapın

Helal peşinde koşmak cihaddır. (H.Ş)