All For The Game - Série Traduzida

Oie, pessoa!

Vocês já bateram cabeça tentando aumentar o avatar dos comentários do blogger e perceberam que a imagem ficava embaçada? Pois é, eu também. Acontece que o blogger não é uma plataforma muito flexível na sua personalização, boa parte das modificações que fazemos é por meio do CSS e várias linhas de script. Graças aos novos modelos, laçados em 2017, pude diminuir a quantidade de scrip, o que me incomodava muito na hora de editar meu código. Mas, nem tudo foi flexibilizado, ainda há muitas definições padronizadas e os avatares dos comentários são uma delas.

(Esse tutorial é bem detalhado, pois eu bati cabeça até chegar no resultado, não é algo aleatório que foi copiado e colado.😉)

Veja como ficou:

O padrão do blogger é um avatar de 35x35, para aumentá-lo teremos que recorrer unicamente ao css, o que vai deixar a imagem com uma péssima qualidade.

Perceba no url abaixo: A parte em vermelho se refere as dimensões da imagem (você pode alterá-lo no navegador para visualizar), óbvio, quanto maior o numero melhor a qualidade.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDOInPEp3dm6xz9e-OeNgTdm-QFMUuKsimGs00UE7fwcs0wYWRs-zNZ-Fl4ivF8BjUyS7wSouXUclAEE61-MG_QatKISBUC1P_60aLcD9aeBTALGox2uKp0IX-DL-aoUfSv30ZXZ7_gdZz/s35/thigo.png

Para modificarmos esse valor iremos utilizar o método JavaScript: replace(). O nome já é sugestivo, ele simplesmente vai substituir o valor de uma string, no nosso caso: s35.

Agora vamos ao tutorial:

1. Vá na opção Thema.
2. Click em Editar HTML.
3. Clique em qualquer lugar dentro da área do código.
4. Pressione CTRL + F para abrir uma barra de pesquisa.
5. Agora, pesquise o código a seguir:
</body>
6. Copie o script abaixo e cole antes dessa tag, substitua a parte em vermelho que fica a sua preferencia.

<script type='text/javascript'>
//<![CDATA[
(function($) {
    $(".avatar-image-container").find("img").each(function(b, a) {
        a = $(a);
        a.attr({
            src: a.attr("src").replace(/s35/, "s35")
        });
        a.attr("width", 35);
        a.attr("height", 35)
    });
}(jQuery));
//]]>
</script>

7. Novamente, procure o seguinte código em seu CSS:
.avatar-image-container
8. Localize e mude as dimensões a seu gosto:

height: 35px;
width: 35px;
max-height: 35px;
max-width: 35px;

9. Depois de feito tudo, clique no botão Salvar tema para aplicar a alteração.

É isso. Agora verifique o avatar do seu blog e veja se ficou com maior qualidade.