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 Estilo 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 pagina inicial
Entre na aba 'Design' → '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.