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
Personalizar Paginas do Blog: Mostrar Títulos dos Posts e Miniatura das Imagens
4/ 5
Oleh

59 Comentários

XaNdE
31 de maio de 2012 14:59 delete

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

Reply
Anônimo
31 de maio de 2012 15:50 delete

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

Reply
31 de maio de 2012 17:40 delete

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

Reply
Anônimo
31 de maio de 2012 20:46 delete

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

Reply
31 de maio de 2012 23:26 delete

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

Reply
1 de junho de 2012 07:49 delete

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

Reply
1 de junho de 2012 10:12 delete

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.

Reply
1 de junho de 2012 10:43 delete

vou começar a fazer alguns blogs de teste

Reply
1 de junho de 2012 18:54 delete

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.

Reply
1 de junho de 2012 23:04 delete

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

Reply
2 de junho de 2012 08:03 delete

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

Reply
2 de junho de 2012 13:00 delete

Arce Cidadania

o negrito é esse código:

font-weight: bold;


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

Reply
3 de junho de 2012 11:50 delete

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

Reply
5 de junho de 2012 17:55 delete

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/

Reply
5 de junho de 2012 18:04 delete

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.

Reply
5 de junho de 2012 21:49 delete

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

Reply
17 de julho de 2012 17:34 delete

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

Reply
17 de julho de 2012 22:11 delete

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.

Reply
Lucas Menezes
2 de agosto de 2012 19:27 delete

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?

Reply
2 de agosto de 2012 21:02 delete

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

Reply
Lucas Menezes
2 de agosto de 2012 21:11 delete

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

Reply
Lucas Menezes
2 de agosto de 2012 21:21 delete

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?

Reply
Lucas Menezes
2 de agosto de 2012 21:40 delete

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?

Reply
2 de agosto de 2012 23:27 delete

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.

Reply
Lucas Menezes
3 de agosto de 2012 07:35 delete

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?

Reply
Lucas Menezes
3 de agosto de 2012 11:16 delete

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?

Reply
3 de agosto de 2012 13:18 delete

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)

Reply
Lucas Menezes
3 de agosto de 2012 13:43 delete

(...) 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)?

Reply
3 de agosto de 2012 18:33 delete

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

Reply
1 de novembro de 2012 15:37 delete

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

Meu email: estrela.danzoka@hotmail.com

Reply
1 de novembro de 2012 18:21 delete

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

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

Reply
11 de novembro de 2012 00:28 delete

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

Reply
11 de novembro de 2012 10:49 delete

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'

Reply
17 de novembro de 2012 20:34 delete

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!

Reply
17 de novembro de 2012 20:38 delete

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

Reply
17 de novembro de 2012 23:35 delete

isso mesmo é neste trecho que falou

Reply
19 de novembro de 2012 16:54 delete

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.

Reply
1 de dezembro de 2012 17:23 delete

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?

Reply
2 de dezembro de 2012 00:30 delete

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

Reply
Anônimo
11 de abril de 2013 17:38 delete

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

Reply
11 de abril de 2013 20:38 delete

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

Reply
17 de setembro de 2013 15:26 delete

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

Reply
17 de setembro de 2013 17:38 delete

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>

Reply
26 de outubro de 2013 00:07 delete

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?

Reply
26 de outubro de 2013 10:14 delete

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

Reply
1 de março de 2014 10:43 delete

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?

Reply
2 de março de 2014 10:01 delete

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

Reply
Anônimo
18 de fevereiro de 2015 00:46 delete

Oi, tudo bem ?
Gostaria de saber se tu saberia me dizer como fazer essa galeria de posts do jeito que tá nesse layout; http://themeforest.net/item/point-of-view-photo-oriented-template/full_screen_preview/843096
Pesquisei muito na net e só o que aparece são tutoriais de light box jquery :/
Queria muito algo que em ensinasse a fazer,.

Reply
18 de fevereiro de 2015 08:55 delete

existe vários códigos para slides das postagens, mas o exemplo que você citou é um template completo baseado nos slides.

você poderia comprar o template ou tentar achar algum código de slide parecido com aquele para usar como gadget, mas fazer funcionar como está naquele site precisa saber modificar o html do blogger e não tem como explicar isso tudo pois são muitos detalhes.

este é o tipo de modificação que tem que ir fazendo e corrigindo as falhas que aparecem.

Reply
18 de fevereiro de 2016 10:46 delete

Fiz e deu certo, mas eu queria poder colocar uma parte do texto da postagem, já tentei um artigo igual esse, mas não aconteceu nada.

Reply
18 de fevereiro de 2016 14:46 delete

para mostrar uma parte do texto tem que adicionar o código
< data:post.body/ >

Reply
10 de abril de 2016 17:57 delete

Preciso saber o que acontece com meu blog, porque tanto depois que coloco o código só aparecem 2 postagens e sem o código aparecem só 2 também, sendo que eu coloquei 8 pelo gadget Postagens. Talvez se eu mudar direto no html do blog eu posso arrumar, mas eu não sei onde que eu mudo.

Reply
11 de abril de 2016 14:03 delete

veja se a configuração está em 8 postagens ou 8 dias. Normalmente é este o problema com quantidade de posts na pagina

Reply
26 de abril de 2016 23:12 delete

Olá Fabiano, tudo bem? Gostaria de saber se é possível aplicar esse resumo APENAS na página de resultado de busca. Aguardo sua resposta. Obrigada.

Reply
27 de abril de 2016 09:26 delete

Pagina de resultado de busca... Você quer dizer quando usa a caixa de pesquisa para achar algo no seu blog?

aquele resultado é gerado pelo google e não tem como modificar

Reply
3 de maio de 2016 15:37 delete

Entendi. Mas obrigada pela resposta. Valeu.

Reply