Dicas para Blogs e Sites

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.


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.

Marcadores: Códigos, Personalizar, Seo