Blogger Başlık Resmini Duyarlı Yapmak

Blogger Başlık (Header) Resmini Nasıl Duyarlı (Responsive) Yaparız?

Duyarlı (Responsive) web tasarımı, web sayfalarının çeşitli cihazlarda (mobil, masaüstü, TV vb.) ve çeşitli pencere veya ekran boyutlarında iyi görüntülenmesini sağlayan web tasarımına bir yaklaşımdır.

Blogger temelli sitelerdeki temalarda kullandığımız başlık resimleri, eğer temalarda Responsive kodlanmamış ise ekran boyutu değişimlerine otomatik uyum sağlamamaktadır. Kısa bir kod düzenlemesi ile bu sorunu düzeltebiliriz.

Sabit Alanlı Başlık Resmini Duyarlı Yapmak

Özellikle eski temalarda rastladığımız bu eksikliği nasıl düzeltebileceğimize bakalım.

Blogger > Tema > Özelleştir > HTML'yi Düzenle  yolunu izleyerek 

<b:skin> ... ]]></b:skin>  etiketleri arasında Ctrl+f  klavye kısayolu ile

#header img  kodunu buluyoruz. Ardından 

#header img {max-height:75px}  vb. şeklinde yazılmış satırı silerek

#header img {max-width: 100%;  height: auto;}  satırını yapıştırıp, kayıt ettiğimizde, artık başlık resmimiz duyarlı olmuş olacaktır.

Temaya göre değiştirilecek kodlar farklılık göstersede mantık ve çözüm yolu aynı şekildedir. Umarım faydası olur.