Posts nas páginas de marcadores e arquivos

No artigo anterior, vimos como diferenciar os posts na home do Blogger. Hoje veremos alternativas para os posts das outras páginas index.


Se você quiser repetir o código que colocamos para a página inicial em todas as outras páginas index (marcadores, arquivos, resultado de busca...), só será necessário trocar a condicional do início do código.

De:

<!-- Condicional para a Home Page -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>

Para:

<!-- Condicional para a todas as páginas exceto a individual de posts -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>

Todo o resto do código do artigo anterior pode ser repetido.

Outra alternativa é ter duas classes de post para a página inicial (first-post e index-posts), uma só classe - repetindo a index-posts - nas páginas index, e nenhuma classe nomeada nas páginas individuais dos posts.

Nesse caso, precisaremos complicar um pouco o código, pois acrescentaremos mais uma condicional.

Em nosso código anterior:

A condicional para a página inicial:
<b:if cond='data:blog.url == data:blog.homepageUrl'>

A condicional para primeiro post:
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>

---------------- CÓDIGOS PRIMEIRO POST -----------------

Condicional "senão":
<b:else/>

---------------- CÓDIGOS POSTS RESTANTES -----------------

</b:if>

Condicional "senão":
<b:else/>

---------------- CÓDIGOS POSTS DAS OUTRAS PÁGINAS -----------------

</b:if>


Agora teremos 3 tipos distintos de páginas: Home, Outras Páginas Index, Páginas Individuais dos Posts.

Vamos entender o conceito do código que precisamos montar:
<b:if cond='data:blog.pageType != &quot;item&quot;'>

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

<b:if cond='data:post.isFirstPost == &quot;true&quot;'>

Quero o código para o first-post
<div class='first-post'>
CÓDIGOS DO FIRST POST
</div>

<b:else/>

Quero o código para os index-posts
<div class='index-posts'>
CÓDIGOS DOS INDEX POSTS
</div>

</b:if>

<b:else/>

Quero o código para os index-posts
<div class='index-posts'>
CÓDIGOS DOS INDEX POSTS
</div>

</b:if>

<b:else/>

Quero o código normal dos posts
Titulo
Post-Body
Post-Footer
</div> /div que fecha o post-footer

</b:if>

</div> /div que fecha a área dos posts.


Com esse código poderemos aplicar estilos:

/* estilos normais para os posts */
.post{
/* estilos */
}

.post h3{
/* estilos */
}

.post-body{
/* estilos */
}

/* estilos para o first-post */
.first-post{
/* estilos */
}

.first-post h3{
/* estilos */
}

.first-post .post-body{
/* estilos */
}

/* estilos para os index-posts */
.index-posts{
/* estilos */
}

.index-posts h3{
/* estilos */
}

.index-posts .post-body{
/* estilos */
}

No próximo artigo, criaremos classes diferentes para os posts das páginas diferenciadas, a fim de podermos brincar com os estilos em cada uma delas.