En esta entrada quiero abarcar no sólamente la modificación del primer artículo de nuestro blog, sino también mostrarles algunas alternativas de personalización que con algunos experimentos he conseguido.
Para este tutorial recomiendo encarecidamente que respaldes la plantilla de tu blog ya que cualquier error o modificación incorrecta puede impactar negativamente la forma como se visualisen los posts.
Personalizar el primer post individualmente:
Con este método haremos que el primer post del índice tenga un bloque individual en el cual se puedan trabajar cualquier otro elemento, para ello tendremos que recrear toda la zona e incluir el código dentro de la condicional "
data:post.isFirstPost".
El procedimiento es relativamente fácil, pero para no complicarles la existencia pueden utilizar el fragmento que les propongo a continuación.
Para ello, busca el siguiente código:
<b:include data='post' name='post'/>
Selecciona este
<b:include /> y reemplázalo con el siguiente código:
<b:if cond='data:post.isFirstPost'> <!-- Empezamos con la recontrucción -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='primer-post' class="post"> <!-- Contenedor del post -->
<b:if cond='data:post.title'> <!-- Título de la entrada (Formato H1) -->
<h1 class='post-title entry-title primer-titulo'>
<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>
</h1>
</b:if>
<div class='primer-body post-body'> <!-- Cuerpo de la entrada -->
<data:post.body/>
</div>
<div class="post-footer pie-primer-post"> <!-- Footer de la entrada -->
<b:if cond='data:post.hasJumpLink'>
<a class="jump-link primer-jump-link" expr:href='data:post.url'><data:post.jumpText/></a> <!-- Leer más -->
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link primer-comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <!-- X Comentarios -->
<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>
<div style="clear:both;" /> <!--Clearfix -->
</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Previsualiza la plantilla y si el cambio es satisfactorio puedes guardar la modificación.
Para personalizar ahora los elementos del nuevo post, deberás utilizar los selectores que se han comentado en el código anterior, si tienes dudas puedes usar este ejemplo:
#primer-post {
/*Atributos CSS del contenedor del primer post*/
background:#FCFCFC;
color:#999;
text-shadow:0 0 1px #CCC;
}
.primer-titulo {
/*Atributos CSS del título de la primera entrada*/
font-size:28px;
}
.primer-titulo a {
/*Atributos CSS del enlace del primer título*/
color:#2e4769;
}
.primer-body {
/*Atributos CSS del cuerpo de la primera entrada*/
line-height: auto;
}
.pie-primer-post {
/*Atributos CSS del pié de la entrada*/
width:96%;
margin:0 auto;
background:#F7F7F7;
box-shadow:0 0 1px #CCC;
border:1px solid white;
}
.primer-jump-link {
/*Atributos CSS del leer más*/
float:left;
color:#2e4769;
}
.primer-comment-link {
/*Atributos CSS del contador de comentarios*/
float:right;
color:#2e4769;
}Importante: El código incluye algunos selectores primitivos de Blogger, así que los elementos heredarán algunos atributos que posiblemente no desees, para ello suprime las clases genéricas.Nota: En
EmilioCobos.net nos detallan un método muy sencillo de manipular los post mediante "
index="postNum"", un atributo muy útil para modificar los posts según el órden que adopten en el índice del blog, puede usarse de la misma manera para personalizar el primer post, o el segundo, o el tercero, etc.
Personalizar un post según su ID:
Todo post en Blogger tiene un ID numérico e irrepetible, a veces necesitamos hacer modificaciones puntuales en algún post y para ello podemos recurrir a este identificador. En lo personal nunca he tenido que verme en esta situación, pero nunca está de más conocer otros métodos.
Para obtener el ID del post puedes hacerlo pegando el siguiente código arriba de <data:post.body />, deberá aparecer un código numérico arriba del cuerpo del post, que únicamente podrá ver el administrador del blog:
<span class='item-control blog-admin'>El ID de este post es: <i><data:post.id /></i>
</span>
Obviamente es una forma un tanto "rústica", pero bastante cómoda ya que en lugar de obtener el ID desde el código fuente, podrás verlo directamente desde la entrada.
Para aplicar atributos al post en cuestión, bastaría con hacerlo de la siguiente manera:
#354041916720973270 {
/*Atributos del post ID 354041916720973270*/
}Importante: Si al hacer esto no hay ningún cambio en la entrada, deberás añadir la ID en el <div> de la entrada, reemplaza esto:
<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
Por esto:
<div class='post hentry' itemscope='itemscope' expr:id="data:post.id" itemtype='http://schema.org/BlogPosting'>
Personalizar los posts según su etiqueta:
Además, en lugar de usar el ID propio de las entradas de Blogger, podemos utilizar la etiqueta como una clase mediante el bucle de éstas, este método es muy útil para añadir íconos por categorías, o para aplicar estilos según su clasificación. Para ello reemplazaremos el siguiente código:
<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
Por este:
<div itemscope='itemscope' itemtype='http://schema.org/BlogPosting' class="post <b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == "true"'><data:label.name/></b:if></b:loop>">
Y el cierre de este elemento deberás dejarlo parseado, (Busca el cierre y reemplazarlo por </div> )
Ahora para editar los posts mediante su etiqueta, deberás hacerlo de la siguiente forma:
.etiqueta1 {
/*Atributos de los posts que lleven la etiqueta1*/
}
.etiqueta2 {
/*Atributos de los posts que lleven la etiqueta2*/
}
Nota: Si no consigues encontrar el cierre y te arroja error de síntaxis, éste se encuentra en:
</div> <!-- Esta es la etiqueta a reemplazar -->
</b:includable>
<b:includable id='comment_picker' var='post'>
Debería quedar así:
</div>
</b:includable>
<b:includable id='comment_picker' var='post'>
Lo más lindo es el cartelito de "Cargando" que se ve cada dos por tres; muy simpático. Uno va a hacerse un café, vuelve y allí sigue; amarillito y pequeñito ¿Recargamos la página con el botón del navegador? Bueno, a veces anda, a veces no porque muchas de las páginas internas se deben cerrar con un botón interno. UFA.
