Personalizar Paginas do Blog: Mostrar Títulos dos Posts e Miniatura das Imagens

Personalizar a pagina inicial do blog ajuda a despertar o interesse das pessoas pelo seu site. Então vamos falar sobre como mostrar apenas o titulo das postagens e uma miniatura das imagens dos posts (thumbnail) na pagina inicial do seu blog, nas paginas dos marcadores e também nas paginas de arquivos do blog. Já fizemos alguns tutoriais mostrando como alterar o layout da pagina inicial, então aproveite e veja como Fazer Pagina de Boas Vindas no Blog.

mostrar titulos e miniaturas das imagens

Mas voltando ao assunto de hoje que é exibir apenas o titulo e a miniatura da imagem na pagina principal do seu blog entre na pagina modelo > editar HTML e faça um backup do seu template por segurança. Marque a opção expandir modelos de widgets depois procure essa linha de código: <b:include data='post' name='post'/>, apague e coloque esse no lugar:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='titulopost'><a style='font-size:14pt' expr:href='data:post.url'><img style='float:left;margin-right:2px' expr:src='data:post.thumbnailUrl'/>
<data:post.title/></a><div style='clear:both;padding:10px'/></div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Agora só precisa clicar para salvar e já está pronto. Essa é uma maneira rápida e fácil de personalizar as paginas do seu blog, mas ainda podemos fazer alguns ajustes neste layout e formatar melhor o texto veja os exemplos abaixo:

style='font-size:14pt' tamanho da fonte do título, veja Como Formatar o Texto do Blog

style='float:left;margin-right:2px' posição da imagem em miniatura da postagem, se quiser trocar de lado é só mudar as palavras left e right de lugar.

style='clear:both;padding:10px' espaço entre as postagens, portanto ajuste o valor 10 até chegar a distancia que desejar.

Além da mudança na aparência do template da pagina inicial do blogger isso pode ajudar a carregar seu blog mais depressa afinal serão menos imagens e textos para mostrar, leia mais sobre Como Diminuir o Tempo de Carregamento e Otimizar Blogs/Sites.

Outras dicas para personalizar seu blog:
Fazer Resumo da Postagem com Miniaturas das Imagens
Barra com Botões Curtir, Google +, Retweet e Hack Leia mais
7 Opções de Botões para Divulgar Blog e Conseguir visitas das Redes Sociais

Sobre o tamanho da miniatura das imagens seria possível modificar com códigos, mas as imagens ficariam desfocadas porque esses códigos só esticam a imagem, ou seja, a imagem é a mesma, porém é distorcida para ocupar mais espaço e justamente por isso não colocamos códigos para alterar o tamanho da miniatura.
Related Posts with Thumbnails

Link desta Pagina

Compartilhe essa Página

50 comentários:

  1. Valeu Fabiano... era isso que eu estava precisando abraço...

    ResponderExcluir
  2. Fui na página de editar HTML, e dei CTRL + F e procurei por
    mas não achei. Fiz algo de errado?

    ResponderExcluir
  3. tem que marcar a opção expandir modelos de widgets para achar o trecho que citamos

    ResponderExcluir
  4. seria mto mais interessante se tivesse um DEMO '-' otimo post

    ResponderExcluir
  5. Anonimo a imagem que postamos é a demostração.

    não coloquei o link de meu outro blog de testes porque depois de algum tempo acabo retirando o código e perdendo a pagina de demonstração

    ResponderExcluir
  6. Olá Fabiano,mais uma excelente dica,só que existe uma dúvida,(não devo ser o único). Estes códigos,que disponibilizas,encaixam no HTML das novas páginas "dinâmicas"?Nâo seria mal referir isso.
    Abraço

    ResponderExcluir
  7. Gostaria de saber o resultado da aula com um DEMO porque sua imagem não me deu a idéia real do gadget. Não sei o que vc está ensinando, aliás eu acho que toda aula deveria ter uma mostra num blog de teste para que a gente saiba melhor do que se trata e o efeito na página. Obrigada.

    ResponderExcluir
  8. vou começar a fazer alguns blogs de teste

    ResponderExcluir
  9. OLá Fabiano. Gostaria de perguntar algo nada haver com o post. É o seguinte: Meu site tem um plano de fundo cinza claro/cinza escuro, aí no corpo do site, é tudo branco, desde os gadgets, até as postagens. Só que o branco não está aparecendo, está transparente. Site do problema:
    http://printcomedia.blogspot.com.br/

    Espero a resposta. Obrigado.

    ResponderExcluir
  10. procure por trechos com background e veja se tem outra imagem ou cor de fundo por cima

    http://www.google.com/url?q=http://www.dicasparablogs.com.br/2012/05/como-encontrar-erros-nos-codigos-do.html&sa=U&ei=GHTJT6S0GIWm8ATO8-GWDw&ved=0CAUQFjAA&client=internal-uds-cse&usg=AFQjCNEArG-t0BCnCZN7hY7s0uFRskD_ig

    ResponderExcluir
  11. Ficou muito bom esse estilo. Só gostaria de saber se tem como deixar o titulo em negrito?

    ResponderExcluir
  12. Arce Cidadania

    o negrito é esse código:

    font-weight: bold;


    veja mais detalhes aqui: Alterar cores dos links - CSS
    .

    ResponderExcluir
  13. Esse estilo fica legal.
    Quem quiser conferir pode ver no meu blog.
    www.arcecidadania.org

    ResponderExcluir
  14. Queria que entrasse nesse blog e notasse que no fundo das postagens e dos gadgets há uma imagem linda cinza com uma borda transparente. Como faço isso no meu blog ?

    Blog que contém o que eu quero:
    http://casadapipocabr.blogspot.com.br/

    ResponderExcluir
  15. Queria saber como por uma caixa de pesquisa no blog e a resposta da pesquisa aparecesse em cima das postagens, e não fosse ao Goggle procurar. Obrigado.

    ResponderExcluir
  16. Pixel Ds
    na pagina do google adsense você pode configurar a sua pesquisa dentro do seu blog. Depois é só pegar o código e colocar em um gadget de html/javascript

    ResponderExcluir
  17. Fabiano, estou tentando fazer uma página inicial pro meu site com imagens maiores das últimas postagens por marcador, e o nome do post em baixo. Já testei vários códigos semelhantes ao seu e não consegui aumentar o tamanho da imagem sem distorcer ou perder qualidade. Acredito que seja pelo fato dos códigos, por padrão, indicarem "Tumbnails". Você conhece algum jeito de fazer isso? Obrigado ;D

    ResponderExcluir
  18. Obsoletos! o10 esse código usa a imagem em miniatura gera pelo blogger que é no tamanho 72x72, então não adianta mudar isso no código que a imagem perderá qualidade.

    ResponderExcluir
  19. Eu gostaria de saber: Como mudar o tamanho das pequenas imagens (thumbnail)? Como o usuário "Obsoletos! o10" disse "(...) não consegui aumentar o tamanho da imagem sem distorcer ou perder qualidade (...)".

    Ou como remover essa função que gera imagens pequenas automaticamente por outra, exemplo na parte expr:src='data:post.thumbnailUrl' você está usando a função padrão de 72x72 queria personalizar isso como faço?

    ResponderExcluir
  20. Lucas esse código tem que usar no html do blogger.

    sobre a qualidade não tem como mudar o tamanho sem perder a qualidade.

    nesta parte você poderia usar outro valor em vez do 72

    img style='float:left;margin-right:2px' expr:src='data:post.thumbnailUrl' height="72" width="72" /

    mas perde qualidade porque você está "esticando" a imagem

    ResponderExcluir
  21. Perfeito. Mas não tem como trocar as imagens geradas automaticamente (thumbnail) por uma "id" ou no código expr:src='data:post.thumbnailUrl'.

    Assim, usar a famosa função JavaScript "getElementById" junto a este código?

    Ai no post eu ponho a "id".

    ResponderExcluir
  22. Como eu já sei que o [[ expr:src='data:post.thumbnailUrl' ]] pega os "thumbnail" gerados automaticamente, eu não poderia remover a função de pegar esses "thumbnail" por uma outra, ou seja, tirar os "thumbnail" e colocar outra função para gerar imagens, mesmo manual.

    Exemplo: colocar no código HTML de uma imagem do Post uma "id", está "id" vai dizer que está imagem deve aparecer no lugar da "thumbnail". Mas isso só se eu alterar a função [[ expr:src='data:post.thumbnailUrl' ]] por outra que consiga pegar "id". Entendeu?

    A função "getElementById" em JavaScript pode entrar pra fazer isso? Como?

    ResponderExcluir
  23. Ou melhor, será que eu poderia personalizar o CSS original do "thumbnail"?

    Parece que por padrão é gerada uma imagem no formato de um quadrado perfeito de 72x72, poderia mudar esse valor e colocar por exemplo um "height" e um "width" no meu valor? E que fosse diretamente no CSS do "thumbnail"?

    Quando procurei o CSS original do "thumbnail" no Blogger, mesmo marcando a caixa "Expandir modelos de widgets" não encontrei nada...

    Então penso eu: "Onde está o CSS original disso?"

    Quando eu coloco [[ img style='float:left;margin-right:2px' expr:src='data:post.thumbnailUrl' height="72" width="72" ]] eu acabo esticando a imagem porque não estou no código fonte desse elemento chamado "thumbnail"... Entende? Você pode me ajudar?

    ResponderExcluir
  24. Lucas a imagem thumbnail é no tamanho 72 não tem como pegar outra imagem.

    essa imagem é gerada pelo blogger ou seja quando você envia uma imagem para a postagem o blogger gera um imagem neste tamanho (72x72) para usar como miniatura nos gadgets lista de blogs, postagens populares e outros.

    não é feito com código mas é uma imagem criada neste tamanho.

    ResponderExcluir
  25. Valeu já entendi. Gostaria que desse uma olhada no endereço http://inblug.blogspot.com/ neste blog eu usei o seu tutorial como base para fazer "caixas de posts" que são boxes com a imagem e o título. Porem as imagens são as thumbnail, não tem como trocar por outras imagens?

    Queria muito saber como criar essas "caixas com posts" usando imagens personalizadas por mim. É possível trocar?

    ResponderExcluir
  26. Estou usando < img expr:src='data:post.thumbnailUrl'/ > para renderizar/mostrar as imagens a minha home page, mas o tamanho da imagem gerada é muito pequeno (72x72), eu queria imagens maiores em minha página do Blogger, já tentei < img expr:src='data:post.thumbnailUrl' style='width:200px; height:200px;'/ > mas perde a qualidade da imagem, pois somente estica.

    Como posso alterar o tamanho dessas thumbnail sem perder a qualidade? Ou melhor, posso mudar 'data:post.thumbnailUrl' por outra função de pegar/mostrar as imagens?

    ResponderExcluir
  27. Lucas Menezes você quer trocar por uma mesma imagem para todos os links? se for é só trocar o código

    expr:src='data:post.thumbnailUrl'

    por src='endereço da imagem'

    mas para trocar por imagens de cada postagens não vai dar certo porque seriam as imagem em tamanho natural (igual está na postagem)

    ResponderExcluir
  28. (...) mas para trocar por imagens de cada postagens não vai dar certo porque seriam as imagem em tamanho natural (igual está na postagem) (...)

    Como eu faço isso? Imagens no tamanho natural (igual está na postagem)?

    ResponderExcluir
  29. procurei mas não achei o código das imagens em tamanho original

    ResponderExcluir
  30. Oi gostaria de saber como faço para criar link nas minhas postagens vc pode me ajudar

    Meu email: estrela.danzoka@hotmail.com

    ResponderExcluir
  31. Dany na pagina de postagens tem uma ferramenta para criar link.

    veja na barra de menu da pagina de edição de postagens

    ResponderExcluir
  32. Olá! Seria possível fazer isso, mas colocando as miniaturas e o título em caixas? Se sim, é possível fazer duas colunas com essas caixas? Dificultando ainda mais, é possível que eu coloque em cada uma dessas colunas somente posts com determinados marcadores específicos? Agradeço desde já.
    Meu e-mail é focadosemseries@gmail.com

    ResponderExcluir
  33. Focados em Séries fazer as caixas é simples você pode colocar bordas nos links, mas fazer aparecer somente em alguns marcadores é bem complicado e nos testes que fiz gerou muitos erros.

    nesta parte do código style='font-size:14pt'

    altere desta forma

    style='font-size:14pt;border: 1px solid #000'

    ResponderExcluir
  34. Boa noite! Teria como distanciar o título da imagem? Pois no meu caso a frase fica quase colado na imagem. Estava procurando algo que compactasse a página inicial, como mostrar os posts em blocos, e esse foi o mais próximo que encontrei. Valeu!

    ResponderExcluir
  35. Opa, já encontrei como fazer =)
    Só mudar a o tamanho em margin-right:2px'

    ResponderExcluir
  36. Ajudou muito ! obrigada!!
    porém, queria saber como deixar também uma pequena parte da postagem junto com o título, e a miniatura da foto.

    ResponderExcluir
  37. Boa tarde! De uns dias pra cá deu um probleminha na página inicial, e não sei se é desse script. Fica um espaço em branco entre o primeiro e o segundo post, sabe o que pode ser?

    ResponderExcluir
  38. esse gadget não é para ficar um espaço em branco.

    mas pode ter algum código de margin ou padding gerando o espaço ou até mesmo um < br / > que faz pular uma linha

    ResponderExcluir
  39. Baixe um template para blogspot so que apos postagem ele nao exibe o titulo delas
    por favor me ajude, obrigado.

    ResponderExcluir
  40. se o template que baixou está com falhas é mais facil trocar o template porque se notou uma falha deste tipo de não mostrar o titulo do post provavelmente tem outros erros

    ResponderExcluir
  41. como fazer para esta configuração aparecer apenas na página de marcadores? ficando a principal sem esta configuração?

    ResponderExcluir
  42. crie mais uma linha de condicional para a pagina inicial.

    coloque antes da primeira linha do código este trecho:

    <b:if cond='data:blog.pageType == &quot;index&quot;'>


    e depois da ultima linha este aqui:</b:if>

    ResponderExcluir
  43. Seria possível que em cada postagem apareceria o nome do autor da postagem e botões de curtir e tweetar, data da postagem, ou apenas o nome do autor e a data?

    ResponderExcluir
  44. Darren sim, é possível, mas não tenho os códigos prontos para isso. Veja esse link:
    Barra com Botões Curtir, Google +, Retweet e Hack Leia mais

    lá tem um exemplo de como organizar botões no final do post

    ResponderExcluir
  45. Isso aplica apenas na página inicial? Não tem como usar na página de marcadores para aparecer dessa forma?

    Minha página inicial não mostra postagens, quero muito aplicar isso nos marcadores. Como faço?

    ResponderExcluir
    Respostas
    1. mas o código como está era para funcionar na pagina dos marcadores

      talvez seu template tenha alguma parte diferente e por isso gera erro

      Excluir