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.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.