Postagens populares com imagens embaçadas? Como resolver

Ohayoo queridos bunnie's, peço desculpas mais uma vez por ter deixado o blog fechado tanto tempo. Prometo que agora o blog ficará aberto por um longo e bom tempo! Nessa temporada de criar o layout, percebi como as imagens do gadget de "Postagens Populares" estavam realmente horríveis e embaçadas. Desde a atualização de 2016 no Blogger, o blog vem apresentando problemas com as imagens, tanto os avatares dos comentários, como o gadget de postagens populares e recentes, inclusive as próprias imagens que uplamos para postagem. Porém hoje darei dicas do que fazer para melhorar a qualidade das imagens dos gadget's "Postagens Populares". 

Quando o é que as imagens ficam embaçadas?

Esse erro é notado, quando implantamos algum estilo diversificado do Wordpress ou do próprio Blogger. Geralmente esses código deixam as imagens maiores, como 120px; 200px; 300px; enquanto dentro do blog o tamanho padrão é 72px;. Então quando estalamos um código que as imagens são maiores do que 72px ela se estica e o resultando é ficar embaçada/desfocada. 

Verificando o erro!

O caso das imagens embaçadas pode ser causado por duas razões e é bom detectá-lo antes de tomar alguma providencia, que pode acabar não funcionando. A primeira razão e geralmente a mais correta de ser, é a citada acima. O tamanho padrão das imagens do gadget "Postagem populares". A segunda causa pode ser o sub domínio. O que é isso? O blogger onde postamos é um domínio, e onde uplamos nossas imagens é um sub domino do blogger. Sempre que você upar uma imagem pelo Blogger a URL dela será algo similar a: https://2.bp.blogspot.com/  entre outras variações do blogger.  Se você utiliza serviços de outros serviços como: Google Sites, TinyPic, Flickr ou em quaisquer outro serviço disponíveis na Web, o problema de imagem embaçada irá acontece. Por alguma razão que eu desconheço em gadgets como Postagens populares ou Postagens similares, as imagens fora do domínio do blogger ficam embaçadas. 

Corrigindo o problema 

Agora que provavelmente já saiba qual é o problema das suas imagens embaçadas vamos resolve-lo. Vá ao Blogger e selecione o blog que está querendo corrigir o problema, em seguida no HTML do blog. Dentro do HTML ative Ctrl+F e procure por:

 post.featuredImage, 72,

Vai aparecer algo similar a isso:

  <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>

            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>

              <div class='item-thumbnail'>

                <a expr:href='data:post.href' target='_blank'>

                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>

                    <img alt='' border='0' expr:src='data:image'/>

                  </b:with>

                </a>

              </div>

# O 72 é o tamanho das imagens, eu costumo deixar em 300. 

# O 1:1 é a proporção, é só trocar  para 3:2 ou 2:3 ou 1:5, ao seu agrado.  

Ainda não deu certo?

Tem outro método que possa lhe ajudar. Que é utilizando script. Vamos precisar do ID do gadget para isso vá outra vez em seu HTML e pesquise pelo gadget que está com a imagem embaçada, é muito fácil detectar o gadgte, mas procurar pelo nome que deu a ele no Layout. Exemplo você deixou "Postagens Populares" basta dentro do HTML procurar por ele. Agora você vai achar algo similar a :

<b:widget id='PopularPosts1' locked ='false' title='Mais Vistos' type='PopularPosts' visible='true'>

A parte marcada em azul é o ID, então basta verificar o que esta no seu, guarde o nome em um bloco de notas, pois vamos precisar dele. 

Agora procure por : </body>

Quando achar o código acima dele cole:

<script type='text/javascript'>              
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/w72-h72-p-nu/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("PopularPosts1",310);              
</script>

Onde está marcado em vermelho, cole o ID do seu gadget, salve! E veja o resultado.

Outra forma também de arrumar isso é também colar sobe o </body> cole o seguinte código: 

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {  
    $('.PopularPosts ul li img').attr('src', function(i, src) {
        return src.replace('/default.jpg', '/mqdefault.jpg');
    });
    $('.PopularPosts ul li img').attr('src', function(i, src) {
        return src.replace('s72-c', 'w770-h505');
    });
    $('.PopularPosts ul li img').attr('src', function(i, src) {
        return src.replace('w72-h72-p-nu', 'w770-h505');
    });
 });
//]]>
</script>