AMP Nedir? Avantajları ve Dezavantajları Nelerdir?, görüntüle

Blogger'da Bulanık Popüler Yayın Görsellerini Düzeltme

Blogger'ın bize sunmuş olduğu blogumuzda olan yayınlarımızın hangisinin popüler yani daha fazla tıklanmış okunmuş olduğunu gösteren ekletimizi standart olarak kullandığımızda görsellerimiz aşağıdaki gibi bulanık ve hoş olmayan bir şekilde blog takipçilerimizin karşısına çıkmakta.

Blogger'da Bulanık Popüler Yayın Görsellerini Düzeltme
Örnek

Bu durum sizler gibi benimce canımı sıktı çünkü gelen takipçilerime bulanık ve kötü görünen görseller göstermek istemiyordum. Öncesinde popüler yayınlarda bulunan görselleri düzeltmek için w72-h72-p-nu veya Blogger in görsellerde kalite olarak kullandığı s320 veya s600 formatlarını blog şablonumda aratarak görsellerin bulanıklığını giderebiliyordum. Artık bunların hiçbirini gerek kalmadan sadece JS kodumuzu kullanarak şablon üzerinde bir arama yapmadan, otomatik olarak popüler yayınlarımızın bulanıklığı ortadan kalkmış olacak.

Kurulum

JS kodunun çalışması için blogumuzda jquery kütüphanesi ekli olmalı şablonunuzda şu kodu aratabilirsiniz; jquery.min.jsjquery.js ekli ise bu adımı atlayabilirsiniz, eğer ekli değilse aşağıda kodu Tema > HTML'yi düzenle diyip şablonumuza girelim ve </head> kodundan önce ekleyelim.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" />

Yine Tema > HTML'yi düzenle diyip şablonumuza girelim aşağıda kodu </head> etiketinin üstüne yapıştırıp şablonumuzu kaydedebiliriz.

<script type='text/javascript'>//<![CDATA[
/**
İlkay Gürler - www.ilkaygurler.com
**/
$(document).ready(function() {
  var dimension = 1600;
  $('#PopularPosts1').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/w\B\d{2,4}/,'w' + dimension)});
image.attr({src : image.attr('src').replace(/h\B\d{2,4}/,'h' + dimension)});
    image.attr('width', "100%");
    image.attr('height', "auto");
  });
});
//]]>
</script>

JS kodumuz sayesinde s320 olarak görünen Popüler Yayınlardaki görselerini s1600 formatında değiştirebiliyoruz ve görsellerimizin bulanıklığını gidermiş oluyoruz. Takıldığınız yerlerde yorum formu üzerinden iletişime geçebilirsiniz, görüşmek üzere.

10 yorum

  1. 21 Mayıs, 2020
    Hocam bende de yazı altında bulunan benzer yazılar kısmında yeni eklediğim yazıların görselleri çıkmıyor. Bunu nasıl düzeltebilirim acaba ?
    1. 21 Mayıs, 2020
      Kullandığınız benzer yazılar eklentisinin resim gösterme seçeneği kapalı olabilir.
  2. 19 Mart, 2021
    türkce sitelerde böyle bir bilgi yok çok teşekkürler
  3. 28 Aralık, 2021
    merhaba benim ana sayfada ki sliderim da ki resimler bulanık çıkıyor aslında 5 ay öncesine kadar sorun yoktu uzun süredir yazmıyordum fakat bugün blog yazdığımda ana sayfada ki slider da resim bulanık çıktı sorunu çözemedim yardımcı olurmusunuz
    1. 28 Aralık, 2021
      Merhaba Sezer, siteni inceledim ve sorunun kaynağını buldum. JS kodlarında resim kalitesi düşük olarak ayarlanmış bu ayarı en kaliteliye çevirdim. JS kodları çok uzun olduğu için sana özel bir bağlantı oluşturdum.

      Aşağıdaki bağlantıyı kopyalayıp tarayıcının adres çubuğuna yapıştır ve içerisindeki kodları temanda bulunan <!-- Theme Functions JS --> kısmındaki kodlar ile değiştirdiğinde sorunun çözülecektir.https://cdn.ilkaygurler.com/qualitypic.txt
  4. 28 Aralık, 2021
    Sorun çözüldü hocam çok teşekkürler ilginiz için
  5. 31 Aralık, 2021
    Selamlar. Aynı sorun bende de oluştu. Sadece Opera'dan yaptığım yayını Mozilla ve Chrome'dan yaptım. Yaptığım değişiklik bu ama ana sayfada resimler çok bulanık, post un içinde sıkıntı yok. Yardımcı olabilirseniz sevinirim üstadım.
    1. 31 Aralık, 2021
      Merhaba Ceyhun,

      Blogger'a yüklenen resimlerin yüklendiği adres değiştiği için temanda bulunan kodlar sanırım tam işlevini yerine getirmemeye başladı, aşağıdaki bağlantıyı ziyaret ederek sorunu çözebilirsin.Blogger Değişen Resim URL'leri Nasıl Düzeltilir?
    2. 01 Ocak, 2022
      Çok teşekkür ederim. Sorunum net bir şekilde çözüldü. İyi yıllar..

    3. 01 Ocak, 2022
      Rica ederim. Mutlu yıllar.