isFirstPost - Como usar a nova tag

Essa nova tag do Blogger, conforme mencionei no post anterior possibilita diversas aplicações de estilos. Como me solicitaram alguns exemplos, mas os que eu tinha prontos eram exclusivos, resolvi aproveitar a vontade de mudar o template do BloggerSPhera para a demonstração de um deles.

Como vocês podem ver, coloquei o primeiro post da página flutuando à esquerda e mais 3 outros posts flutuando à direita. Apliquei estilos de forma que o primeiro post tivesse uma imagem maior, título diferenciado, etc.

Como usar a tag

Uma maneira que se vê muito em templates convertidos do Wordpress para aplicar estilos diferentes entre os posts das páginas index e os posts das páginas individuais é atribuindo "class" ou "id" diferentes a cada um deles. Vejamos com exemplo, pra facilitar:

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!-- Condicional para páginas índex --> 
<div id='index-post'> <!-- id para os posts das páginas índices -->
<a expr:name='data:post.id'/>   
<div class='post-title'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<!-- resto do código do título para páginas index -->
</h2>
</b:if>
</div> <!-- fim post-title -->

<div class='post-body entry'> <!-- corpo do post nas páginas index -->
<data:post.body/> 
<div style='clear: both;'/> <!-- clear for photos floats -->
</div> <!-- fim post-body -->

<b:else/> <!-- fim condicional para os posts das páginas index -->

<!-- repetimos então o código, atribuindo outra id para os posts individuais -->

<div id='single-post'> <!-- id para os posts das páginas individuais -->
<a expr:name='data:post.id'/>   
<div class='post-title'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<!-- resto do código do título para páginas individuais -->
</h2>
</b:if>
</div> <!-- fim post-title -->

<div class='post-body entry'> <!-- corpo do post nas páginas individuais -->
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div> <!-- fim post-body -->

<div class='post-footer'>
<!-- código do footer -->

</div> <!-- fechamento da última linha do footer (normalmente post-footer-line-3) -->
</div> <!-- fechamento do post-footer -->
</div> <!-- fim single-post -->
</b:if> <!-- fim condicionais -->

</div> <!-- final do código para post hentry uncustomized-post-template -->
</b:includable>

Aplicamos então os estilos para cada "id":

#index-post {
/* estilos */ }

#index-post .post-title h2 {
/* estilos */ }

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

#index-post .post-body img {
/* estilos */ }


#single-post {
/* estilos */ }

#single-post .post-title h2 {
/* estilos */ }

#single-post .post-body {
/* estilos */ }

#single-post .post-body img {
/* estilos */ }

Acrescentando mais um pouco de código, teremos a possibilidade de colocar estilos para o primeiro post da página:

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!-- Condicional para páginas índex --> 
<b:if cond='data:post.isFirstPost'> <!-- Condicional usando a nova tag --> 
<div id='first-post'>
<a expr:name='data:post.id'/>

<div class='post-title'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<!-- resto do código do título para o First Post -->
</h2>
</b:if>
</div> <!-- fim post-title -->

<div class='post-body entry'> <!-- corpo do First Post -->
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div> <!-- fim post-body -->
</div> <!-- fim first-post -->
<b:else/> <!-- fim condicional First Post -->

<div id='index-post'> <!-- id para os posts das páginas índices -->
<a expr:name='data:post.id'/>   
<div class='post-title'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<!-- resto do código do título para páginas index -->
</h2>
</b:if>
</div> <!-- fim post-title -->

<div class='post-body entry'> <!-- corpo do post nas páginas index -->
<data:post.body/> 
<div style='clear: both;'/> <!-- clear for photos floats -->
</div> <!-- fim post-body -->
</b:if>

<b:else/> <!-- fim condicional para os posts das páginas index -->

<!-- repetimos então o código, atribuindo outra id para os posts individuais -->

<div id='single-post'> <!-- id para os posts das páginas individuais -->
<a expr:name='data:post.id'/>   
<div class='post-title'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<!-- resto do código do título para páginas individuais -->
</h2>
</b:if>
</div> <!-- fim post-title -->

<div class='post-body entry'> <!-- corpo do post nas páginas individuais -->
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div> <!-- fim post-body -->

<div class='post-footer'>
<!-- código do footer -->

</div> <!-- fechamento da última linha do footer (normalmente post-footer-line-3) -->
</div> <!-- fechamento do post-footer -->
</div> <!-- fim single-post -->
</b:if> <!-- fim condicionais -->

</div> <!-- final do código para post hentry uncustomized-post-template -->
</b:includable>

E acrescentamos também os estilos para o "First Post":

#first-post {
/* estilos */ }

#first-post .post-title h2 {
/* estilos */ }

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

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

No template atual, eu usei uma largura para o main wrapper suficiente para dividir a área de postagens em duas na página inicial. Assim pude flutuar o primeiro post à esquerda e os demais à direita, um exemplo:

#main-wrapper { width: 700px; float: left;}
#first-post { width: 345px; float: left; }
#index-post {width: 345px; float: right; }
#single-post {width: 690px; }

E para que o "First Post" só apareça com esses estilos na página inicial, coloquei mais uma condicional no início do código:

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!-- Condicional para páginas índex --> 

<b:if cond='data:post.isFirstPost'>
<!-- Condicional para o First Post -->

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

<div id='first-post'>
<!-- Código do First Post -->
</div> <!-- fim first-post -->

</b:if> <!-- Fim Conditional Home Page -->
<b:else/> <!-- Fim Conditional First Post --> 

<!-- resto dos códigos -->

Após a tag ]]></b:skin>

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

<style type='text/css'>
#index-post { float: left; width: 690px; }
</style>

</b:if>

Quanto ao novo template

Vou pedir um pouquinho de paciência à vocês enquanto continuo "arrumando" o novo template.

Nele coloquei algumas novidades que aos poucos irei ensinando como fazer...