isFirstPost - um estilo diferente para o primeiro post

Uma nova condicional do Blogger chamou minha atenção dois meses atrás, mas só agora tive tempo de fazer alguns testes com ela: a condicional isFirstPost.

A tag <b:if cond='data:post.isFirstPost'> é uma condição para o primeiro post visível de uma página, seja a página inicial ou de arquivos/marcadores. Percebendo isso, vislumbrei a possíbilidade de destacar o primeiro post da home (coisa que queria muito  há bastante tempo, o que me levou a fazer as experiências mais escabrosas com o pobre Mínima antes da nova tag :D ), diferenciando-o dos demais.
Para que vocês possam entender logo do que estou falando, segue 3 exemplos com os testes que fiz nos últimos dias:

Exemplo 1
Exemplo 2
Exemplo 3

Vou ensinar primeiro o método mais simples para destacar o primeiro post. Quero lembrar antes que qualquer experiência deve ser feita sempre em um blog de testes, nunca faça nenhuma modificação diretamente em seu blog oficial.

Vá em Editar HTML e clique em Expandir Modelo de Widget. Procure pelo seguinte trecho do código:

<b:include data='post' name='post'/>

Substitua o trecho pelo seguinte código:

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

<div id='first'>

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='first-body'>
<p><data:post.body/></p>
</div>

<div class='post-footer'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>
</div>

<b:else/>
<b:include data='post' name='post'/>
</b:if>

<b:else/>
<b:include data='post' name='post'/>
</b:if>

O que eu fiz foi criar uma nova div (#first) e colocá-la sob duas condicionais, isFirstPost e homepageUrl, ou seja, ela só é válida para o primeiro post da home page. Dentro da div First inseri o título e o link para os comentários.
Fora das condições especificadas, os posts devem aparecer normalmente.

Para dar estilo a First, acrescente no CSS (acima da tag ]]></b:skin>):

#first{ /* aqui especificações para a div first */
margin: 0px 0px 10px 0px;
padding:0px;
float:left;
background: #111;
border: 1px solid #1b1b1b;
}

.first-body{/* Aqui especificações para o text do post */
margin: 0px;
padding: 10px 10px;
line-height:1.5em;
text-align:justify;
color:#ccc;
}

#first h3{ /* Aqui estilo para o título do post */
display:block;
margin: 10px auto;
width: 95%;
font-size: 19px;
padding: 0px 0px 4px 0px;
font-family: 'Palatino Linotype';
text-align:center;
line-height:1.4em;
color: #f5f5f5 }

#first h3 a, #first h3 a:visited{color:#fff} /* cor do título */
#first h3 a:hover{color:#fff} /* cor do título no estado hover */

.first-body img{ /* estilo para as imagens */
padding:10px;
background:#fff;
border: 1px solid #333}

#first .comment-link{ /* estilo para o link comentários */
float:right;
padding: 0px 5px 15px 0px}

Este é o procedimento básico e o resultado é este: Exemplo Básico.

Partindo do princípio básico, mostrarei como conseguir o efeito dos 3 exemplos que coloquei no início do post:

Exemplo 1

Obs: Para este exemplo trabalhei com as seguintes medidas:
#Outer-wrapper width:990px;
#main-wrapper width: 780px;
#sidebar-wrapper width: 200px;

No exemplo 1, apliquei o hack de resumo automático de postagens, menos no primeiro post. Para conseguir este efeito é preciso que primeiro você aplique o código para os resumos automáticos, que você encontra neste post do BloggerSphera. O arquivo JavaScript que deve ser hospedado, pode ser colocado diretamente no código do template da seguinte maneira:

<script type='text/javascript'>
//<![CDATA[
// <!-- Summary Posts with thumbnails for Blogger/Blogspot version 3.0 (C)2008 by Anhvo -->
// <!-- http://www.vietwebguide.com/ -->
// <!-- See the tutorial (in portuguese) to install on http://bloggersphera.blogspot.com -->
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Feita a instalação do hack de resumos automáticos, vá em Editar HTML, clique em Expandir Modelo de Widget e faça os passos para o Exemplo Básico e salve as modificações. Agora coloque os estilos para os resumos na página inicial, abaixo de ]]></b:skin>:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>

.post{
width:185px;
height:240px;
margin:0px 10px 23px 0px;
float:left;
overflow:hidden;
padding:10px;
line-height:1.4em;
font-size:13px;
color: $textcolor;
background: url(http://i31.tinypic.com/2llg4jr.jpg) no-repeat top left;}

.post h3{
margin:0px;
padding:0px 0 5px 0px;
line-height:1.4em;
color:$titlecolor;
letter-spacing:1px;
border:none;
font-size: 15px;
background: url(http://i25.tinypic.com/ra2lub.jpg) repeat-x bottom left }

.post h3 a, .post h3 a:visited, .post h3 strong{
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
border:none; padding:0 0 0}

.date-header{display:none}

.post img{ border:none}

.post-body{padding: 0px; margin:0px;line-height:1.4em;}

#showlink{padding: 5px 10px 0 0; float:right;}

</style>
</b:if>

Não se esqueça de especificar um número baixo de caracteres para os resumos, ou o texto sairá do espaço. Neste exemplo eu usei a seguinte numeração:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 220;
summary_img = 120;
img_thumb_height = 100;
img_thumb_width = 100;
</script>


Agora, acima da tag ]]></b:skin> coloque o estilo para o FirstPost, como no Exemplo Básico, mas com width:540px;

#first{
width: 540px;
margin: 0px 15px 10px 0px;
padding:0px;
float:left;
background: #111;
border: 1px solid #1b1b1b;
clear:both
}

Agora, para que o post-footer (tudo o que vai no rodapé do post, como nome do autor, marcadores, etc) não apareça nos resumos, procure o seguinte trecho:

<div class='post-footer'>

e acrescente logo abaixo dele:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

e para fechar a condicional, procure por este trecho e acrescente o que está em vermelho:

<div class='post-footer-line post-footer-line-3'>    
........

</div>
</b:if>
</div>
</div>
Para que as datas só apareçam nas páginas internas e não interfiram com os resumos, busque por este trecho e acrescente o que está em vermelho:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

</b:if>

Neste Exemplo 1 os posts aparecerão resumidos na Home Page, na lista de Marcadores e na lista de Arquivos.


Para que este post não se estenda demais, amanhã explicarei como proceder para obter o efeito do Exemplo 2 e Exemplo 3.