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

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.