İçerik Resmini Otomatik Boyutlandır

Klasik Blogger kullanıcılarının, yazılarına ekledikleri resimleri otomatik olarak boyutlandıran CSS kod eklentisi. Blogger klasik şablon k...

...

Klasik Blogger kullanıcılarının, yazılarına ekledikleri resimleri otomatik olarak boyutlandıran CSS kod eklentisi.Blogger klasik şablon kullanan blog yazarlarının yazılarına ekledikleri muhtelif ebatlardaki resim genişliklerini sabit tutarak resimlerin alt alta düzgün ve aynı ebatlarda çıkmasına sağlayabilirsiniz.Tek yapmanız gereken işlem, resim genişlik ebadını belirlemenizdir. Aşağıda verdiğim CSS kod’unun size ne faydası olur ?

1. Akıllı mobil teknolojisinin hızla ilerlemesi sonucu blog’unuza eklediğiniz resimler mobil telefonlarda daha güzel görülür.
2. Yazılarınıza eklediğiniz resimleri optimize edeceği için, resimleri okumaya çalışan mobil telefon hatalarını asgariye düşürür. Dolayısı ile Web yönetici araçlarında bulunan akıllı telefon sekmesindeki hata oranınız azalır.
3. Blog ana sayfanızdaki yayın sayınıza göre hiyararşik alt alta görülen resim genişlikleri düzgün görülür.
4. Ekleyeceğiniz CSS kod’u ile eski yazı resimleriniz de aynı genişlikte görülmeye başlar.
5. Hem genişlik, hemde yükseklik ayarlarınızı değiştirmeniz mümkündür.
Ancak Yükseklik ayarlarınızı değiştirmeniz px ölçülerinde değişim yapabileceğinden pek kullanmamanızı tavsiye ederim. şablon kısmında önzileme yaparak px değerlerinde değişim olmadığına kanat getirirseniz yükseklik ayarını değiştirebilirsiniz. Uygulamayı deneme yanılma metodu ile yapabilirsiniz.Bu size tecrübe kazandıracaktır.
İçerik resimlerinizin Akıllı Mobil telefonlar tarafından görülmesi için genişlik ayarının 300 px olarak belirlenmesini öneririm. Ancak siz 500 px, 640 px vs gibi değerler ile özelleştirme yapabilirsiniz.
Genişlik ayarı    : width: 300
Yükseklik ayarı : height: auto
Auto yazan kısma sayısal bir değer verirseniz otomatik olarak yükseklik değerleri değişecektir.
Aşağıdaki kodu iki şekilde ekleyebilirsiniz.

1. “ ]]></b:skin> “ kodunu şablonunuzda bulup hemen üstüne ekleyerek.

2. Yerleşim → Şablon → Özelleştir → Gelişmiş → Css ekle tıklayın ve en altta ekleyin.

Genişlik ve yükseklilk rakamları üzerinde denemeler yaparak önizleme yapın ve kendi ölçünüzü belirleyin.

.post-body img {
width: 300px !important;
height: auto !important; 
}

3. Resminize kenar çizgisi eklemek isterseniz aşağıdaki kodu kullanabilirsiniz.

border: 1px solid #d2d2d2

Konu hakkında bilgilerinizi sizde paylaşın. Dinamik blog resim kenarlarında görülen resim sınır çizgilerini kaldırmak için bağlantıya tıklayın.

Klasik blog resim kenarlarında görülen resim sınır çizgilerini kaldırmak için bağlantıya tıklayın.