9 Ekim 2018 Salı

Blogger'da Yayınlanmış Resimleri Otomatik Olarak Yeniden Boyutlandırmak


Blogger olarak arada yaşanan sıkıntılı durumlardan biri de yayınlarımızın içinde yer alan görsellerimizin farklı boyutlarda oluşudur bazen,kullanılan görseller kendimize ait olan görseller olsa bile yayın içine girilince boyutları farklı olabilir veya zaman içinde değişen tema sonucu da boyutlar değişebilir,bu ve buna benzer sorun yaşayanlar için pratik bir çözüm ile geldim bugün.B,zzat benim de yaşadığım bir durumdu ayrıca.
Bir ara yaşadığım sorun resimlerin oturamaması ile ilgiliydi boyutları ile değildi tam olarak ama bir çok blogda resimlerin farklı boyutlarda görüntülendiğine de denk geldiğim olmuştur..hayati bir konu değil elbette ama blogla ilgili bir konudur,dolayısıyla bir bütün olarak ele alındığında titizlikle yazılmış güzel bir yayını zenginleştiren görsellerinde hem aynı tarzda hem aynı ebatlarda olması biraz önemlidir :)


Şimdi!..
Sayısız yayınımız olabilir,her birini tek tek elden geçirmek tabii ki de zor olabilir,yayınlarımızın içinde yer alan görselleri aramak tespit etmek zaman alabilir..bu sebepten ötürü hem görsellerimizi aynı ebatlara getirmek hem de her biri görseli bu ayara tabii tutmak için otomatik(!) ve bir o kadar da pratik bir çözüm kullanacağız.

ÇÖZÜM GELSİN!

Temamızın içine bir kod ekleyeceğiz,çözüm bu..ve blogumuzda yer alan büsbütün yayınların görsellerini arzu ettiğimiz ebatlarda boyutlandıracağız,hızlıca ;)

NASIL YAPILIR?


Kumanda paneli>Yerleşim>Tema tasarımcısı diyoruz;


Yerleşim bölümünde bir alt bölüm daha mevcut,görselde görünen yer.Tema tasarımcısı.İşte bu bölümde kolayca kodu ekleyip görsellerimizi otomatik olarak boyutlandırabiliriz,bakınız;


Tema tasarımcısına tıkladıktan sonra kod ekleme alanına ulaşacağız,buradan detaylıca anlattığım için uzun bir işlem gibi görünüyor olabilir ama tüm bunlar sadece bir kaç tıktan ibaret,az sabır daha :)


Evvela CSS ekle,bu komutla temamızın mevcut kodlarına kolaylıkla kod ekleme imkanını sunmaktadır Blogger,bilgisi az olanlar için bulunmaz nimet,inanın bana :)
CSS ekle'ye tıklayıp karşımıza görseldeki gibi bir alan çıkacaktır,bu alana kodumuzu ekleyip temamıza endeksleyeceğiz inşaAllah :)

BLOGDAKİ GÖRSELLERİ/FOTOĞRAFLARI OTOMATİK OLARAK BOYUTLANDIRMA KODU:



.post-body img { min-width:600px; min-height:auto; }

Kod içerisinde mavi renge sahip sayı blogunuzun genişliğine göre değiştirilebilir,buraya girilen sayı hem sembolik hem de örnek olarak eklenmiştir ;)

Kodu girdikten sonra Bloga Uygula diyerek kaydetmiş oluyoruz böylece de yayınlarımız içinde yer alan tüm görseller önceden belirlemiş olduğumuz büyüklüğe sahip olmuş olur.
Görüyorsunzu ki anlatmak yapmaktan daha da zahmetli,gözünüzü asla korkutmayın,kodu girdikten sonra bulunduğunuz pencereyi açık tutup blogunuzu başka bir pencerede görüntüleyin,olur da sonuçtan memnun kalmazsanız kodu kolayca silip temanızdan atabilirsiniz..

Olası soru veya merak ettikleriniz varsa,yorum kutusuna bırakabilirsiniz ;)

Sevgiler..



Kiremithanem
Kiremithanem

”Bu Dünyada Çiçeklere Bakmak İçin Cehennemin Çatısında Yürüyoruz,Haydi Gelin,Çatıya Çıkalım!”

13 yorum:

  1. Ne güzel, ne değerli bir bilgi paylaşmışsın. Çok teşekkür ederiz.

    YanıtlaSil
  2. Faydalı bir paylaşım. Emek harcamışsınız. Teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Okuduğunuz ve yorum yaptığınız için ben teşekkür ederim.

      Sil
  3. Değerli paylaşımınız için teşekkürler, zira hepimiz zaman zaman bu sorunları yaşıyoruz.

    YanıtlaSil
  4. Güzel çalışma. Peki otomatik ortalamayı nasıl yapabiliriz.

    YanıtlaSil
    Yanıtlar
    1. Tesekkir ederim,o kodu da bugün veya en geç yarın bu mesajın altına ekleyeyim.

      Sil
  5. ORTALAMA KODLARI:


    Temanızın başlık (header)resmini ortalamak için bu kodu:

    #header-inner {text-align: center;}

    Yayın başlığını ortalamak için bu kodu:

    h3.post-title, .post-title { text-align: center; }


    Tarih başlığını ortalamak için bu iki kodlardan birini:

    .date-header {text-align:center;}

    veya

    .post-title.entry-title {text-align:center;}


    Sidebar eklentileri ortalamak için bu kodu:

    .sidebar .widget h2, .title {text-align:center;}


    Resimleri ortalamak için bu kodu:

    .post-body img {margin: 0 auto; text-align: center; }


    Umarım işinize yarar :)
    Kolaylıklar dilerim.

    YanıtlaSil
  6. Yanıtlar
    1. Bir de kodları temanın içine koymayı deneyin b:skin kodunun üzerine.

      Sil
    2. Yinede olmadı. sağlık olsun.

      Sil
    3. Temanızın içinde kodun aktif olmasını engelleyen başka bir kod olabilir bu gibi durumlarda o kodu silmek gerekebilir ki yeni kod aktif olsun.

      Sil

Yorumunuz en kısa sürede sevgi ve alaka ile cevaplandırılacaktır.
Yorum yaptığınız için teşekkür ederim.