Como diferenciar el primer post en blogger usando "isFirstPost"

Como diferenciar el primer post o entrada de un blog en blogger con un estilo diferente.

Hacía mucho tiempo que venía buscando la forma de diferenciar el primer post del blog del resto, es decir cómo hacer para que el post o entrada en Blogger se viera de una manera distinta y diferenciada al resto de las entradas o post. Algo muy común en las plantillas de Wordpress para magazine. Ver Ejemplo en Blogger.

Invesitgando este tema en la web, me encontré hace poco en Vagabundia con un post sobre la nueva etiqueta de blogger "isFirstPost " y sus utilidades, una de ellas poder diferenciar la primera entrada usando los condicionales en blogger "if." Luego me topé con otro artículo, el de Chica Blogger sobre "Blogger: el primer post con un estilo diferente". Donde recomienda leer el artículo de Bloggersphera sobre el tema.

De los artículos leidos, los caules recomeniendo para entender el funcionamiento del hack, pude diferenciar el primer post del resto en blogger.

Lo primero que hay que buscar, es esta parte del código

<b:includable id='post' var='post'>
Código-post
</b:includable>

Como bien explica ChicaBlogger en otro post sobre el tema, la parte llamada " Código-post" que son varias líneas de código, muestran: el título de un post, el cuerpo del post, y el footer del post, donde aparecen los meta-datos: autor del post, hora, comentarios, etiquetas y otros. Entonces, el procedimiento a seguir es el siguiente: copiar ese código de los posts utilizando condicionales, y lo haremos con un ejemplo de esta forma:

buscamos:

<b:includable id='post' var='post'>

y lo sustituimos por:

<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>

Luego, para dar el estilo al primer post, copiamos los estilos CSS sobre ]]></b:skin>:

#first{
margin: 0px 0px 10px 0px;
padding:0px;
float:left;
background: #eee;
border: 1px solid #505050;
}

.first-body{
margin: 0px;
padding: 10px 10px;
line-height:1.60em;
text-align:justify;
color:#000;
}

#first h3{
display:block;
margin: 10px auto;
width: 95%;
font-size: 200%;
padding: 0px 0px 4px 0px;
text-align:left;
line-height:1.5em;
}

#first h3 a, #first h3 a:visited{color:#FFA800;
}
#first h3 a:hover{color:#000;
}

.first-body img{
padding:5px;
background:#fff;
border: 1px solid #000;
}

#first .comment-link{
float:left;
padding: 0px 5px 15px 0px
}

Vemos la vista previa, y ya deberíamos ver el primer post de una manera diferente Ver Ejemplo en Blogger

Otros ejemplos: Demo 1 - Demo 2

Estos son los estilos básicos, cambiar el color, el texto del título, pero se pueden hacer mas cambios y adecuarlos a cada plantilla.