Mostrar El Primer Post De Forma Diferente En Blogger

Hace unos meses JMiur comentaba que Blogger había incluido una nueva etiqueta en sus códigos, <b:if cond='data:post.isFirstPost'>
isFirtsPost es un código que condiciona un evento cuando se trata del primer post del blog, es decir, el último que se ha publicado.
Ayer recordaba que cuando publiqué la entrada de cómo dejar un post siempre arriba del blog alguien me dijo por correo que aunque era muy efectivo el método para dejar la entrada siempre arriba no era muy útil para todos, pues la idea de muchos es dejar una entrada siempre arriba a modo de bienvenida o presentación, pero si esa primera entrada se ve igual al resto de las entradas entonces deja de parecer una presentación.
Así que me puse a investigar un poco y me encontré en Blogger Dikas una solución no sólo para quienes quieren tener una entrada siempre arriba y que tenga un estilo diferente, sino para quien quiera que el primer post se pueda diferenciar del resto de las entradas.
Puedes ver un ejemplo en este blog de pruebas, verás que el primer post tiene un color de fondo, borde y texto diferente.

Antes de hacer este hack haz un respaldo de tu plantilla, luego entra en Diseño > Edición de HTML y con la casilla marcada de Expandir plantillas de artilugios busca esta línea:

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

---

Selecciónala y sustitúyela por esto:

    <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>
    <b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
    </div>
    </b:if>
    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
    <span class='post-author vcard'>
    <b:if cond='data:top.showAuthor'>
    <data:top.authorLabel/>
    <span class='fn'><data:post.author/></span>
    </b:if>
    </span>

    <span class='reaction-buttons'>
    <b:if cond='data:top.showReactions'>
    <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
    <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
    <span class='reactions-label'>
    <data:top.reactionsLabel/></span>&#160;</td>
    <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
    </tr></table>
    </b:if>
    </span>

    <span class='post-comment-link'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&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>
    </b:if>
    </span>

    <span class='post-icons'>
    <!-- email post links -->
    <b:if cond='data:post.emailPostUrl'>
    <span class='item-action'>
    <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
    <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
    </a>
    </span>
    </b:if>
    </span>
    </div>

    <div class='post-footer-line post-footer-line-2'>
    <span class='post-labels'>
    <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
    </b:if>
    </span>
    </div>


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


Ahora vamos con los estilos, que es la parte que se encargará de darle un aspecto diferente.
Antes de ]]></b:skin> pega lo siguiente:

    /* Primer post
    ----------------------------------------------- */
    #first { /* Estilos del contenedor del primer post */
    margin: 0px 0px 10px 0px;
    padding: 0px;
    float: left;
    background: #F5A9D0;
    border: 1px solid #1b1b1b;
    }

    .first-body { /* Estilos para el texto del post */
    margin: 0px;
    padding: 10px 10px;
    line-height:1.5em;
    text-align: justify;
    color: #2E2E2E;
    }

    #first h3 { /* Estilos para el título del post */
    display:block;
    margin: 10px auto;
    width: 95%;
    font-size: 20px;
    padding: 0px 0px 4px 0px;
    font-family: 'Palatino Linotype';
    font-weight: bold;
    text-align:center;
    line-height: 1.4em;
    color: #f5f5f5;
    }

    #first h3 a, #first h3 a:visited { /* Color del título */
    color: #DF0174;
    }

    #first h3 a:hover { /* Color del título al pasar el cursor */
    color: #fff;
    }

    .first-body img { /* Estilo para las imágenes */
    padding:10px;
    background:#fff;
    border: 0px;
    }

    #first .comment-link { /* Estilo para el link de los comentarios */
    float:right;
    padding: 0px 5px 15px 0px;
    }


Ahí puedes cambiar los estilos que quieras, el color del fondo, el color del texto, del título, etc. Puedes agregar o quitar todos los estilos que desees; ayúdate con las anotaciones hechas a los lados para identificar a qué corresponde cada estilo.

De esta forma tendrás el primer post del blog mostrándose de una forma distinta al resto de las demás entradas.