Postagens Vanessa S.
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 != "item"'>
<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 != "item"'>
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
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?
Já consegui resolver o problema aqui. 🙂
Obrigado.
Lamento, mas ou vc fez algo errado ou pode ser algum problema relacionado ao seu template. Não tenho como te ajudar.
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!
Sobre as imagens? Como elas ficam pequenas e depois grandes?
vai la em modelos, personalizar e aplica de novo o estilo que estava antes, que ele volta sem o hack
Lamento, mas aqui não funcionou, seria bom se fosse aplicavel em todos os templates do blogger…
Parabéns Clau pelo post, fantástico!!!
Show de bola…
Obrigado.
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?
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 😉
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.
[]
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. ^^
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".
Olá, parabéns pelo blog.
Bem, fiz como o tutorial, mas o texto fica muito perto da margem, como faço para afastar.
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???
@pcdsjr
Não tenho como ajudar e nem saber o q aconteceu no seu template.
Eu consegui instalar o hack, porém em algumas postagens não aparece o link leia mais.
@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
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á.
@Dr. Flash:
Tente fazer o inverso, seguindo este tutorial.
Como Retirar O Hack leia mais ? eu botei seu template (Night Shadow) e vinha automatico. como tiro ?