Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1502920770
Vida do cache: 1502963970
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Postagens

Criando estilos para o Hack “Leia Mais” de postagem resumida

No outro artigo, você já aprendeu a instalar o hack para incluir no seu blog Postagens Resumidas automática na página inicial (onde aparece somente um resumo da postagem, juntamente com a imagem do post e no final escrito “Leia Mais”.
Agora vou ensinar como definir estilos para os resumos e como personalizar os posts apenas na página inicial, onde as postagens aparecem resumidamente apenas na página inicial e nas páginas internas aparecem completa(igual o que eu uso aqui no Mundo Blogger).

Você já deve ter instalado o hack “Leia Mais” de Resumo Automático, para poder dar estilo aos posts, seguindo este tutorial.

Aplicar estilos CSS:

Se você quiser, poderá também personalizar estilos para o link ‘Leia Mais’, para isto, basta incluir o seguinte código logo ACIMA da tag ]]></b:skin> :


#showlink {
font-size: 11px; /* escolha o tamanho da fonte para o link */
float: right; /* escolha se quer link flutuando à esquerda ou direita */
margin-right: 30px; /* aplique margens para posicionar link */
margin-top: -8px; /*a margem negativa para o topo aproxima o link do texto do post */
font-weight: bold;
}
#showlink a {
color: #ffffff; /* escolha a cor de seu link */
}

#showlink a:visited {
color: #cccccc; /* escolha a cor de seu link quando visitado */
}

#showlink a:hover {
color: #000000; /* escolha a cor de seu link quando passa o mouse em cima */
}

Se você notar, em margin-top: -8px; , eu inclui uma observação, informando que a margem negativa para o topo aproxima o link do texto do post.
Se você quiser que o link fique mais abaixo, tenha um espaçamento maior, basta ajustar o valor em “margin-top”, por exemplo:
margin-top:20px;

Personalizar os posts resumidos apenas na página inicial

Entre no menu “modelo ? editar html”,clique em ‘expandir modelo de widget’, e procure pela tag: ]]></b:skin>

E cole o seguinte código logo ABAIXO dela:


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post{height:200px;border: 10px solid #2c8da2;background:url();}
.post h3 {margin: 0 auto; padding: 0; text-align:justify;}
.post-footer{display:none;}
h2.date-header{display:none;}
.comment-link{display:none;}
</style></b:if>

Importante:
.post -> se refere ao post, e no exemplo acima eu apliquei bordas, e determinei uma altura de 200 height. Se você quiser, pode aplicar uma imagem no lugar das bordas, para isso basta apagar o trecho que se refere as bordas e acrescentar o endereço da sua imagem neste trecho:
background:url(endereço-da-sua-imagem) no-repeat top left;
.post h3 -> se refere ao titulo, e no exemplo acima eu eliminei padding e margin, justificando o texto do titulo. Você deve atribuir os valores referentes a padding e margin de acordo com as medidas do seu template.
.post-footer-> se refere a parte final da postagem, o footer(é onde aparece os marcadores), e no exemplo acima eu determinei que conteúdo de footer não apareça na página inicial, assim como o fiz na parte de que se refere a data e link de comentários.

Lembrando que o comando:

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

Determina que os elementos apareçam apenas na página inicial, diferenciando das páginas individuais. As modificações exemplificadas acima afetarão apenas a página inicial.
Você deve adaptar os estilos conforme sua preferência.
Tudo o que você quiser ocultar em sua página inicial, deverá estar contido no código, as classes(.) ou id(#) e sempre separando os elementos por vírgulas. O comando “display:none” serve para ocultarmos elementos.
Se quiser confira também o artigo que ensina como Aplicar estilos a página inicial do blog



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

21 Comentários

  1. Mario disse:

    Olá!
    Estou com uma dúvida:

    Não consigo colocar uma imagem, retirei essa parte do código “border:10px solid #2c8da2;background:url();” e colei essa no mesmo lugar “background:url(endereço-da-sua-imagem) no-repeat top left;” coloquei o endereço da imagem, mas mesmo assim ela não aparece.
    O que pode ser?

  2. Daniel Costa de Oliveira disse:

    Olha…estão de parabéns!!!Estava procurando isto a mais de 1 semana!!!Conheci a Mundo Blogger a muito pouco tempo (uns 5 dias) e já sou fã de vcs!

  3. Natália Alves disse:

    Sobre as imagens? Como elas ficam pequenas e depois grandes?

  4. Adriano Marinho disse:

    vai la em modelos, personalizar e aplica de novo o estilo que estava antes, que ele volta sem o hack

  5. M4rQu1Nh0S disse:

    Lamento, mas aqui não funcionou, seria bom se fosse aplicavel em todos os templates do blogger…

  6. Pr Alex Galdino disse:

    Parabéns Clau pelo post, fantástico!!!

    Show de bola…
    Obrigado.

  7. Melissa Bergonso disse:

    Oi, Clau.

    Eu segui seu tutorial, mas as personalizações feitas para o resumo (como borda, imagem de fundo, supressão de links, etc.) estão atingindo também as minhas páginas estáticas. Existe algum código que faça com que essas configurações não se estendam para as páginas estáticas?

  8. .:: Clau ::. disse:

    Ofir Godoy
    Este hack funciona a base de um script..o script já coloca a função de resumir o post automaticamente…se há uma forma de fazer como vc comentou, eu desconheço. Eu sugiro que vc dê uma fuçada no script, e tente ver se há como incluir, ou modificar alguma linha no js para atingir o efeito que vc quer. Obrigada pelo comentário e volte sempre 😉

  9. Ofir Godoy disse:

    Oi Clau Parabéns pelo trabalho que vc tem realizado aqui Realmente fantástico! O tutorial está perfeito e tem todas as funcionalidades que eu precisava.

    O elogio não poderia vir desacompanhado de um pedidinho rsrs 😉 Gostaria de saber como faço para que a imagem miniatura funcionasse também como link da postagem. Pode dar uma luz sobre isso?

    Agradeço imensamente se puder esclarecer para esse humilde leigo e mais uma vez parabéns pelo trabalo.

    []

  10. Douglas J. disse:

    Clau, gostaria de saber como eu faço para deixar apenas a imagem da postagem na esquerda e ao lado o título da postagem, sem snippet e sem leia mais. Mais ou menos assim:
    ———————
    ______
    | | TITÚLO DA
    |Imagem| POSTAGEM
    |______|
    ———————

    Tem como? Espero resposta!
    A propósto, parabéns pelo blog. ^^

  11. .:: Clau ::. disse:

    Alexandrina
    É só vc verificar se no seu código está: "text-align:center"
    Se tiver, altere o center por "justify".

    Show de Slide
    Eu já acrescentei essa informação no post. Dá uma olhada na parte "Estilos CSS".

  12. Show de Slide disse:

    Olá, parabéns pelo blog.
    Bem, fiz como o tutorial, mas o texto fica muito perto da margem, como faço para afastar.

  13. Alexandrina Oliveira disse:

    Clau como faço no caso que o meu leia mais o texto está ficando centralizado, como faço para texto ficae justificado no resumo da postagem???

  14. ::Clau:: disse:

    @pcdsjr
    Não tenho como ajudar e nem saber o q aconteceu no seu template.

  15. pcdsjr disse:

    Eu consegui instalar o hack, porém em algumas postagens não aparece o link leia mais.

  16. ::Clau:: disse:

    @Orichalcum the Hedgehog:
    Realmente, ia dar erro mesmo, pois o erro estava no código que eu postei.
    Ficou faltando alguns elementos que enão estavam aparecendo no box com o código que disponibilizei, mas já corrigi.
    Copia o código novamente e tenta de novo que agora vai dar certo.
    Desculpa =P

  17. Orichalcum the Hedgehog disse:

    Bom dia, estou com um problema: eu passei o código para o HTML do meu template como foi explicado no post. Cliquei em Visualizar e o Blogger informou:

    The element type "b:if" must be terminated by the matching end-tag "".

    Aí o código não funciona. Já tentei fechar com a tag mas isso faz com o código apareça no topo do meu template… Pode me ajudar?

    Agradeço desde já.

  18. ::Clau:: disse:

    @Dr. Flash:
    Tente fazer o inverso, seguindo este tutorial.

  19. luqinhas disse:

    Como Retirar O Hack leia mais ? eu botei seu template (Night Shadow) e vinha automatico. como tiro ?

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.