Resimlerinizi Bloğunuza Duyarlı Hale Getirin

Ekim 18, 2015
Resimlerinizi Bloğunuza Duyarlı Hale Getirin


Blogger resimleri otomatik boyutlandırmaBloğumuza eklediğimiz görseller çok büyük olduğu zaman demodaki gibi taşıyor. Bu olumsuz duruma engel olmanın bir yolu var.

Birkaç CSS kod yardımıyla bloğunuzdaki resimleri duyarlı hale getirebiliriz.

Blogger bloğunuza eklediğiniz tüm resimleriniz otomatik olarak duyarlı hale gelir. Duyarlı olmak ne demek? Diye sorduğunuzu duyar gibiyim. Şöyle anlatayım mesela bloğunuzun yazı alanı 500px genişliğinde ama yazınıza eklediğiniz görsel 800px değerinde. Dolayısıyla taşmalar meydana gelecek.

İşte bu taşmalara engel olmak için blog kodlarımız arasına bu CSS kodlarını eklemek zorundayız.

Bu kodları ekledikten sonra artık bloğunuza istediğiniz boyutta resim atın hepsi otomatikman sizin yazı alanınızın genişliğine göre ayarlanacak.



Resimler Duyarlı Hale Nasıl Getirilir?

1. Şablon
2. HTML'yi Düzenle
3. Açılan kodlar üzerinde herhangi bir yere tıklayın ve CTRL F tuşlarına basın. Arama kutusu açılacak. Bu kutu yardımıyla ]]></b:skin> kodunu bulun.
3. Bulduğunuz bu kodun üst satırına aşağıdaki CSS kodlarını yapıştırın.
.post-body img {
  max-width:100%;
  height:auto;
}
4. Şablonu kaydedin.
5. Tebrikler artık bloğunuza eklediğiniz tüm resimler otomatik olarak boyutlandırılıyor. 

Altı yıldır blog işleriyle uğraşıyorum. Edindiğim tecrübeleri sizlerle paylaşıyorum.

14 Yorum
avatar

Hocam anlatımınız çok güzel. Teşekkürler çareyi sizde buldum :)

Yanıtla
avatar

ellerinize sağlık çok yararlı bir yazı :) kendi blog tasarımızla ilgili bir kaç ufak bilgi de paylaşırsanız çok sevinirim:)

Yanıtla
avatar

bir de benim videolarımda taşma oluyor img yerine yazabilceğim bi kod var mı ?

Yanıtla
avatar

Teşekkür ederim :) Tüm yazılarım blog tasarımımla ilgili zaten. Kullandığım tema ise Simple SEO Responsive adlı bir tema. Yine de özel bir isteğiniz varsa sorun lütfen.

Yanıtla
avatar

video sorunlarınız için buradaki yazıma göz atabilirsiniz: http://blogbakkali.blogspot.com.tr/2015/08/youtube-videolarini-tv-icinden-gostermek.html

Yanıtla
avatar

Yeni bir blog yazarı için harika şeyler paylaşmışsınız.ilk başladığımda saatlerce araştırdığım başlıkları gördüm blogunuzda:) etkinlikte gördüm blogunuzu.ben de bloguma beklerim eleştirileriniz ve yorumlarınız için:)

Yanıtla
avatar

Güzel düşüncülerin için teşekkür ederim canım :) bloğuna mutlaka geleceğim.

Yanıtla
avatar

merhabalar
bloguma bırakmıs oldugun yorum uzere geldım
blogun cok hos ve takıpteyim ;))
sevgiler <3

Yanıtla
avatar

Çok teşekkür ederim. Blogunuzu çok sevdim, çok faydalı bilgiler paylaşıyorsunuz :)

Yanıtla
avatar

Hocam bunu eklediğimiz videolar için yapabilme şansımız var mı?

Yanıtla
avatar

malesef ama videolarınız için daha akılcı bir kullanım bu yazımda mevcut inceleyin derim: http://blogbakkali.blogspot.com.tr/2015/08/youtube-videolarini-tv-icinden-gostermek.html

Yanıtla

Yorumlarda Kod vs. Kullanmak İÇİN
  • Lütfen sadece bu konuyla ilgili yorumlarınızı bırakınız.
  • Yoruma kod eklemek için <i rel="code"> kodu bunun yerine yazın </i>
  • Daha uzun kod eklemek için <i rel="pre"> kodu bunun yerine yazın </i>
  • Tırnak işareti kullanmak için <i rel="quote"> yorumu bunun yerine yazın </i>
  • Resim eklemek için <i rel="image"> resim url </i>
  • Video eklemek için [iframe] URL embed kodunu buraya yapıştırın [/iframe]
  • Sonra aşağıdaki butona basın ve kodları dönüştürün.
  • © 2015 Blog Bakkalı ✔