Aplicar estilos somente a página inicial do blog – personalizar a home

Para quem gosta de personalizar template, afim de deixá-lo com um estilo próprio, já deve ter notado em alguns blogs, que a página inicial é diferente das outras páginas (interna,marcadores e arquivo).
Só que a grande maioria, se depara com uma certa dificuldade, ou não sabem como fazer com que sua página inicial se apresente de forma diferente das demais páginas.
Hoje vou ensinar como definir estilos e personalizar os posts apenas na página inicial.
Para isto será necessário o uso e aplicação de condicionais e você poderá definir as classes(.) ou id(#) que deseja ocultar ou não na sua Home.

Você já conferiu as condicionais no artigo: Ocultar Elementos em Página Específica e já viu que é possível definir, através de uma condicional, em quais páginas os widgets/gadgets ou qualquer outro ítem apareçam e já conferiu também a condicional para aplicar estilos ás páginas estáticas.

Agora veremos como aplicar a condicional para a página inicial e nela definir o que ficará oculto, e quais os estilos que seus posts deverão apresentar.
[dica]Todos os estilos que serão demonstrados neste tutorial serão aplicados somente á pagina inicial, e sua utilização requer um conhecimento, no mínimo intermediário em html e css.[/dica]

Como existem muitas variações de estilos a serem aplicados á página inicial,e não há uma maneira de ensinar individualmente, até porque cada um tem um gosto diferenciado, o que farei aqui, é explicar a vocês cada elemento, para que vocês possam entender e escolher o que ficará oculto ou como seus posts deverão aparecer na página inicial do seu blog.
Portanto, vocês mesmos irão usar a criatividade e aplicar os estilos de acordo com o gosto de vocês.

A condicional para página inicial é esta:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

esta condicional deve ser fechada corretamente e a tag de fechamento dela é:

</b:if>

Portanto, tudo o que você incluir dentro desta condicional será mostrado apenas na página inicial do seu blog.

Entendendo os elementos do post:
Nos templates padrões antigos do Blogger (Minima) e na grande maioria dos templates a área de post está representada por estas tags abaixo:

.post { /* --espaço ocupado pela postagem--*/
.post-body { /*--corpo do post--*/

Existe uma pequena diferença no código da área de post nos novos templates designer de modelo, a tag que representa o espaço ocupado pela postagem se apresenta desta maneira:

.post-outer {/* --espaço ocupado pela postagem--*/

Neste elemento você pode definir cores, bordas, aplicar o efeito de Bordas arredondadas, efeito sombreado, e até mesmo colocar uma imagem de fundo (background) diferente para o espaço ocupado pela postagem apenas da página inicial.
Se caso você optar a inserir uma imagem de fundo para a área de postagem na página inicial, você deverá estipular a largura(width) e a altura(height) da imagem que for utilizar.

Uma dica:
Se, por exemplo, você vai utilizar uma imagem no tamanho 300×300, deverá incluir os valores referente a altura e largura da área de post, dentro da tag que representa o espaço ocupado pela postagem para que a imagem ocupe a área toda, desta forma:
background: url(ENDEREÇO-DA-IMAGEM) no-repeat; widht:300px; height:300px;

O titulo do post está representado por:
.post h3 –> templates antigos
ou
h3.post-title –> designer de modelo

Neste elemento você também pode acrescentar imagem, borda, tamanho da fonte, cor da fonte, alinhamento do texto etc.

Todos os estilos CSS que você definir dentro desta linhas de códigos, serão aplicados automaticamente a todos os posts no blog.
Mas se você incluir estilos a estes trechos dentro da condicional para a página inicial,eles serão aplicados somente na página inicial, diferenciando-se dos demais posts (páginas internas, marcadores e arquivo).

Tudo o que você quiser ocultar em sua página inicial, deverá estar contido no código, as classes(#) ou id(.) e sempre separarando os elementos por vírgulas.
O comando “display:none” serve para ocultarmos elementos.

Agora que você já entendeu, vou mostrar um exemplo do código dentro da condicional, para você ver como deverá aplicar no seu blog. Não vou aplicar estilos, apenas vou destacar cada elemento informando o que cada um representa. Os estilos deverão ser aplicados por você.

No painel do Blogger, acesse o menu “modelo ? editar html”,clique em ‘expandir modelo de widget’, e procure pela tag: ]]></b:skin>

A condicional para a home e o código CSS deverão ser colados logo ABAIXO dela, definindo os estilos á sua escolha para cada elemento contido no código:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.post {
<!--coloque aqui os estilos que você quer que sejam aplicados ao espaço ocupado pelo post-->
}
.post-body {
<!--coloque aqui os estilos que você quer que sejam aplicados ao corpo do post-->
}
.post h3{
<!--coloque aqui os estilos que você quer que sejam aplicados ao titulo do post-->
}
.post h3 a, .post h3 a:visited, .post h3 strong{
<!--coloque aqui os estilos que você quer que sejam aplicados ao titulo do post como link ativo e visitado-->
}
.post-footer {
<!--coloque aqui os estilos que você quer que sejam aplicados ao rodapé do post-->
}
</style>

</b:if>

Se estiver usando o Designer de modelo:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.post-outer {
<!--coloque aqui os estilos que você quer que sejam aplicados ao espaço ocupado pelo post-->
}
.post-body {
<!--coloque aqui os estilos que você quer que sejam aplicados ao corpo do post-->
}
h3.post-title{
<!--coloque aqui os estilos que você quer que sejam aplicados ao titulo do post-->
}
h3.post-title a, h3.post-title a:visited, h3.post-title strong{
<!--coloque aqui os estilos que você quer que sejam aplicados ao titulo do post como link ativo e visitado-->
}
.post-header {
<!--coloque aqui os estilos que você quer que sejam aplicados a linha abaixo do título do post-->
}
.post-footer {
<!--coloque aqui os estilos que você quer que sejam aplicados ao rodapé do post-->
}
</style>

</b:if>

Lembrando que se você quiser ocultar algum elemento em sua página inicial, deverá incluir no código, as classes(#) ou id(.) seguidos do comando “display:none”.
Veja exemplo:
Ocultar o rodapé do post:
.post-footer{display:none;}

Se você quiser que os estilos sejam aplicados não APENAS na Página Inicial, mas também na de Marcadores e de Arquivos, substitua:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

por:

<b:if cond='data:blog.pageType != "item"'>

Desta forma os estilos definido por você aparecerão também quando o leitor clicar nas páginas dos marcadores e de arquivo.