SERP Nedir? Ne İşe Yarar?, 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 comments

  1. May 21, 2020 at 4:28 AM
    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. May 21, 2020 at 6:20 PM
      Kullandığınız benzer yazılar eklentisinin resim gösterme seçeneği kapalı olabilir.
  2. March 19, 2021 at 11:14 PM
    türkce sitelerde böyle bir bilgi yok çok teşekkürler
  3. December 28, 2021 at 12:31 AM
    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. December 28, 2021 at 1:09 AM
      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. December 28, 2021 at 11:01 PM
    Sorun çözüldü hocam çok teşekkürler ilginiz için
  5. December 31, 2021 at 12:30 PM
    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. December 31, 2021 at 3:25 PM
      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. January 1, 2022 at 1:22 AM
      Çok teşekkür ederim. Sorunum net bir şekilde çözüldü. İyi yıllar..

    3. January 1, 2022 at 2:06 PM
      Rica ederim. Mutlu yıllar.
Uyarı!
Konu ile alakası olmayan sorularınız için forum sayfasını kullanabilirsiniz.
Spam yorumlarından kaçınmak için tüm yorumlar görüntülenmeden önce denetlenecektir.