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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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.
Valeu Fabiano... era isso que eu estava precisando abraço...
ResponderExcluirFui na página de editar HTML, e dei CTRL + F e procurei por
ResponderExcluirmas não achei. Fiz algo de errado?
tem que marcar a opção expandir modelos de widgets para achar o trecho que citamos
ResponderExcluirinteressante
ResponderExcluirseria mto mais interessante se tivesse um DEMO '-' otimo post
ResponderExcluirAnonimo a imagem que postamos é a demostração.
ResponderExcluirnã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
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.
ResponderExcluirAbraço
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.
ResponderExcluirvou começar a fazer alguns blogs de teste
ResponderExcluirOLá 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:
ResponderExcluirhttp://printcomedia.blogspot.com.br/
Espero a resposta. Obrigado.
procure por trechos com background e veja se tem outra imagem ou cor de fundo por cima
ResponderExcluirhttp://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
Ficou muito bom esse estilo. Só gostaria de saber se tem como deixar o titulo em negrito?
ResponderExcluirArce Cidadania
ResponderExcluiro negrito é esse código:
font-weight: bold;
veja mais detalhes aqui: Alterar cores dos links - CSS
.
Esse estilo fica legal.
ResponderExcluirQuem quiser conferir pode ver no meu blog.
www.arcecidadania.org
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 ?
ResponderExcluirBlog que contém o que eu quero:
http://casadapipocabr.blogspot.com.br/
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.
ResponderExcluirPixel Ds
ResponderExcluirna 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
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
ResponderExcluirObsoletos! 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.
ResponderExcluirEu 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 (...)".
ResponderExcluirOu 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?
Lucas esse código tem que usar no html do blogger.
ResponderExcluirsobre 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
Perfeito. Mas não tem como trocar as imagens geradas automaticamente (thumbnail) por uma "id" ou no código expr:src='data:post.thumbnailUrl'.
ResponderExcluirAssim, usar a famosa função JavaScript "getElementById" junto a este código?
Ai no post eu ponho a "id".
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.
ResponderExcluirExemplo: 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?
Ou melhor, será que eu poderia personalizar o CSS original do "thumbnail"?
ResponderExcluirParece 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?
Lucas a imagem thumbnail é no tamanho 72 não tem como pegar outra imagem.
ResponderExcluiressa 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.
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?
ResponderExcluirQueria muito saber como criar essas "caixas com posts" usando imagens personalizadas por mim. É possível trocar?
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.
ResponderExcluirComo 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?
Lucas Menezes você quer trocar por uma mesma imagem para todos os links? se for é só trocar o código
ResponderExcluirexpr: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)
(...) mas para trocar por imagens de cada postagens não vai dar certo porque seriam as imagem em tamanho natural (igual está na postagem) (...)
ResponderExcluirComo eu faço isso? Imagens no tamanho natural (igual está na postagem)?
procurei mas não achei o código das imagens em tamanho original
ResponderExcluirOi gostaria de saber como faço para criar link nas minhas postagens vc pode me ajudar
ResponderExcluirMeu email: estrela.danzoka@hotmail.com
Dany na pagina de postagens tem uma ferramenta para criar link.
ResponderExcluirveja na barra de menu da pagina de edição de postagens
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á.
ResponderExcluirMeu e-mail é focadosemseries@gmail.com
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.
ResponderExcluirnesta parte do código style='font-size:14pt'
altere desta forma
style='font-size:14pt;border: 1px solid #000'
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!
ResponderExcluirOpa, já encontrei como fazer =)
ResponderExcluirSó mudar a o tamanho em margin-right:2px'
isso mesmo é neste trecho que falou
ResponderExcluirAjudou muito ! obrigada!!
ResponderExcluirporém, queria saber como deixar também uma pequena parte da postagem junto com o título, e a miniatura da foto.
Empire Selenator veja aqui Fazer Resumo da Postagem com Miniaturas das Imagens
ResponderExcluirBoa 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?
ResponderExcluiresse gadget não é para ficar um espaço em branco.
ResponderExcluirmas pode ter algum código de margin ou padding gerando o espaço ou até mesmo um < br / > que faz pular uma linha
Baixe um template para blogspot so que apos postagem ele nao exibe o titulo delas
ResponderExcluirpor favor me ajude, obrigado.
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
ResponderExcluircomo fazer para esta configuração aparecer apenas na página de marcadores? ficando a principal sem esta configuração?
ResponderExcluircrie mais uma linha de condicional para a pagina inicial.
ResponderExcluircoloque antes da primeira linha do código este trecho:
<b:if cond='data:blog.pageType == "index"'>
e depois da ultima linha este aqui:</b:if>
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?
ResponderExcluirDarren sim, é possível, mas não tenho os códigos prontos para isso. Veja esse link:
ResponderExcluirBarra com Botões Curtir, Google +, Retweet e Hack Leia mais
lá tem um exemplo de como organizar botões no final do post
obg!!! tava precisando.
ResponderExcluirIsso aplica apenas na página inicial? Não tem como usar na página de marcadores para aparecer dessa forma?
ResponderExcluirMinha página inicial não mostra postagens, quero muito aplicar isso nos marcadores. Como faço?
mas o código como está era para funcionar na pagina dos marcadores
Excluirtalvez seu template tenha alguma parte diferente e por isso gera erro
Oi, tudo bem ?
ResponderExcluirGostaria 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,.
existe vários códigos para slides das postagens, mas o exemplo que você citou é um template completo baseado nos slides.
ResponderExcluirvocê 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.
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.
ResponderExcluirpara mostrar uma parte do texto tem que adicionar o código
ResponderExcluir< data:post.body/ >
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.
ResponderExcluirveja se a configuração está em 8 postagens ou 8 dias. Normalmente é este o problema com quantidade de posts na pagina
ResponderExcluirOlá Fabiano, tudo bem? Gostaria de saber se é possível aplicar esse resumo APENAS na página de resultado de busca. Aguardo sua resposta. Obrigada.
ResponderExcluirPagina de resultado de busca... Você quer dizer quando usa a caixa de pesquisa para achar algo no seu blog?
Excluiraquele resultado é gerado pelo google e não tem como modificar
Entendi. Mas obrigada pela resposta. Valeu.
Excluir