Postagens populares com imagens embaçadas? | Como resolver

Postagens populares com imagens embaçadas

Olá, meus amores.
Hoje, vamos aprender a resolver o probleminha das Postagens populares com imagens embaçadas no nosso blog que, normalmente, ficam destorcidas quando implementamos um estilo diversificado ao do padrão da plataforma utilizada (Blogger e Wordpress).

O gadget Postagens populares exibe uma lista dos artigos mais acessados do nosso blog. É muito útil, funcional e facilmente personalizável.

Existe vários estilos bem diferentes de postagens populares para blog. Aqui mesmo no Quero Dicas eu publiquei alguns estilos bem legais. Veja a tag: Postagem populares para blog

Contudo, é possível que, mesmo configurada corretamente, a imagem em miniatura não seja exibida como desejamos ou como esperamos na lateral do nosso blog.

Semana passada, a visitante Daniela teve esse mesmo problema. Ela visitou, escolheu e instalou um desses modelos de postagens populares em seu blog (veja). Infelizmente, não teve muito êxito, pois as imagens ficaram destorcidas/embaçadas.

Para resolver este problema, vamos verificar a possível causa e corrigi-la.

Verificando o possível erro 

Sempre que você upar uma imagem pelo Blogger a URL dela será algo similar a: https://2.bp.blogspot.com/, entre outras variações de subdomínios do blogger.

Mas se você subir a imagem utilizando algum outro serviço, tal como: Google Sites, TinyPic, Flickr ou em quaisquer outro serviço disponível na web, o problema de imagem embaçada irá ou poderá acontecer.

Por algum motivo que eu desconheço, é preciso que essa imagem seja upada diretamente da postagem publicada diretamente para que funcione corretamente na hora de exibir a miniatura no gadget.

Por isso, se você fizer o procedimento de upar sua imagem de quaisquer serviço de hospedagem externa ao do Blogger, faça um teste com a imagem hospedada diretamente da postagem.

Fiz o teste e continua com as imagens embaçadas

Feito simples

Se você fez o teste acima e continua dando o mesmo erro nas imagens das postagens populares, vamos a um técnica simples.

1. Acesse o Painel do seu blog

2. Siga até "Modelo" e "Editar HML"

3. Clique em qualquer lugar dentro da área de código e pressione CTRL + F para aparecer a caixa de pesquisar no canto superior direito.

4. Procure por post.featuredImage, 72,


Vai aparecer algo parecido assim:

<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'/>

► O 72 é o tamanho da imagem, eu costumo deixar 250 que é o tamanho da minha sidebar. Por tanto, saiba o tamanho da sua e altere neste numeral.

► O 1:1 é a proporção, é só trocar para 3:2 ou 2.3 ou 1.5 etc

Em ambos os casos, Cuidado com as vírgulas na hora de alterar!

Ainda continua dando erro

Utilizando script
Se você fez o teste acima,dez o Feito simples acima e continua dando o mesmo erro nas imagens das postagens populares, vamos recorrer ao script de fácil instalação e manuseio.

1. Acesse o Painel do seu blog

2. Siga até "Modelo" e "Editar HML"

3. Clique em qualquer lugar dentro da área de código e pressione CTRL + F para aparecer a caixa de pesquisar no canto superior direito.

4. Pesquise o titulo que você colocou em seu gadget das postagens populares. Exemplo: Postagens Populares, Mais Vistos, etc

5. Copie o ID do gadgets. Veja na imagem abaixo:


6. Ainda no html do blogger procure por:  </Body>

7. Quando achar o código, logo acima dele cole o script:

Clique para pegar o script

► Onde esta em vermelho adicione o ID do seu gadget.

8. Visualize e se estiver tudo certinho, salve.

Pronto e resolvido!

NOTA:
Este script também serve para a plataforma Wordpress. O procedimento de instalação e manuseio é o mesmo que a do Blogger. Só o caminhos na hora da instalação que diferencia. Outro fator importante é: Por se tratar de um script, minha recomendação é verificar o possível erro e fazer um testar primeiro.

E você? Deixe seu comentário!
Beijinhos


COMPARTILHE :  

Comentários
6 Comentários

6 comentários

avatar
admin
quarta-feira, 18 janeiro, 2017 ×

Olá Bia, fico feliz em ter postado, mas não deu mto certo. Ainda continuam embaçadas, mesmo as upadas no proprio blogger. o ID q vc fala é o numero do gadget certo?
é uma pena, pois o gadget é tão lindo. E uso o modelo viagem do blogger.

bjs

ps: to fazendo no meu blog de testes, mas não está no modo privado.

quatroestacoes-blog.blogspot.com

Resposta
avatar
admin
quarta-feira, 18 janeiro, 2017 ×

Oi Dani. Não deu nenhum dos 3 modos? O feito simples, normalmente, não tem falhas. Fiquei muito triste =(
Tente novamente o item FEITO SIMPLES, caso dê certo ou não, comente!
Beijinhos ♥

Resposta
avatar
admin
quinta-feira, 19 janeiro, 2017 ×

O meu não está embaçado mais vou tentar usar em outro blog e ver se funciona, post muito útil para todos, beijos!

www.diksdareh.blogspot.com.br

Resposta
avatar
admin
quarta-feira, 25 janeiro, 2017 ×

resolvi o problema de embaçar, muito obrigada! Agora o problema é que a primeira letra do titulo ta ficando do lado da imagem ..não sei o motivo

Resposta
avatar
admin
quarta-feira, 25 janeiro, 2017 ×

Oi joyce. Que bom que tenha resolvido o probleminha das imagens. Agora, não entendi o problema do titulo para tentar ajudá-la =(

Resposta
avatar
admin
quinta-feira, 26 janeiro, 2017 ×

Oi Bia, muitíssima obrigada, este gadget agora ficou maravilhoso <3
troquei o 72 e ficou perfeito. Obrigada pela dica e pelo post. BJS

Resposta


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.

É proibida a reprodução total ou parcial dos artigos deste blog sem autorização|Somente terá o direito de republicar os códigos publicados dando os devidos créditos.