Asides en Blogger

¡Actualización!: He encontrado una mejor y más eficaz manera de integrar miniposts en Blogger. Aquí el tutorial mejorado: miniposts en blogger.

Gracias a un tutorial en Vagabundia pude poner asides en mi blog, es decir, post cortos y con una apariencia diferente a los demás posts.

Sin embargo creo que ese tutorial es demasiado amplio: aunque explica muy claramente todo, al final ne te queda muy claro por donde empezar. Por eso intento hacer este tutorial un poco más específico que el de Jmiur para poner asides en un blog de Blogger.

Lo primero que debemos entender es que, en Blogger, cada post tiene un número de identificación único, el cual vamos a aprovechar para cambiar la apariencia de un post en particular.

1. Vamos a la ‘Edición HTML’ de tu plantilla y expandimos los artilugios.
2. Buscamos (con ctrl+f) algo parecido a esto:

<div class=’post’>

Agregamos un poco de código:

<div class=’post’ expr:id=’”post-” + data:post.id’>

Con esto le estamos agregando un identificador especial a nuestro post formado por: post- + el número de identificación.

3. Repetimos esto con las demás partes del post:

Buscamos la fecha (o algo parecido según cada plantilla):

<h2 class=’date-header’>

Y le agregamos su identificador:

<h2 class=’date-header’ expr:id=’”fecha-” + data:post.id’>

Buscamos el título:

<h3 class=’post-title’>

Y le agregamos su identificador:

<h3 class=’post-title’ expr:id=’”titulo-” + data:post.id’>

Buscamos el footer:

<div class=’post-footer’>

Y le agregamos su identificador:

<div class=’post-footer’ expr:id=’”footer-” + data:post.id’>

Buscamos el cuerpo del post:

<div class=’post-body’>

Y le agregamos su identificador:

<div class=’post-body’ expr:id=’”body-” + data:post.id’>

Guardamos. Ahora nuestra plantilla está lista. Todo lo demás se hará en cada post.

4. Escribimos y publicamos como borrador un post corto. Luego vamos a ‘Creación de Entradas’ / ‘Editar Entradas’ y hacemos clic en ‘Editar’.

5. En la edición HTML, al principio del post pegamos este código:

<style>
h3#titulo-numerodelpost {
font-size:100%;
color:#ff8800;
}

h2#fecha-numerodelpost {
display:none;
}

div#footer-numerodelpost {
display:none;
}

div#post-numerodelpost {
margin:15px 10px;
border:1px dashed #ff8800;
background:url(‘http://i495.photobucket.com/albums/rr315/THEbatzuk/avatar-comen.gif’) no-repeat right bottom;
}

div#body-numerodelpost {
margin-right:55px;
padding:2px;
}
</style>

Sustituyendo “numerodelpost” por el número de identificación de ese post, que pueden copiar de la barra de direcciones de su navegador:

Así es como se ven los asides en mi blog. Al título le redujimos el tamaño (de 120% a 100%), la fecha y el footer los ocultamos. Al post le pusimos un borde naranja de 1px y le pusimos una imagen de fondo. Al cuerpo del post (el texto) le dejamos un gran espacio a la derecha, para dejarle espacio a la imagen. Claro que sería su deber modificar este código para que se adaptara a su blog.

Ya que lo modificaron a su gusto hay que quitarle todos los saltos de línea, para que quede algo así:

<style> h3#titulo-numerodelpost {font-size:100%; color:#ff8800; margin:0; border:0; padding:0;} h2#fecha-numerodelpost {display:none;} div#footer-numerodelpost {display:none;} div#post-numerodelpost {margin:15px 10px; border:1px dashed #ff8800; background:url(‘http://i495.photobucket.com/albums/rr315/THEbatzuk/avatar-comen.gif’) no-repeat right bottom; } div#body-numerodelpost {margin-right:55px; padding:2px;} </style>

6. Y ahora sí, publicamos nuestro aside.

Si ya quedaron contentos con sus asides, guarden el código en alguna parte (el bloc de notas). Y cada vez que quieran publicar un aside:

1. Lo escribes y lo publicas como borrador.
2. Lo abres para editarlo.
3. Pegas el código.
4. Sustituyes “numerodelpost” por el número de identificación del post.
5. Publicas el aside.

Bueno espero que haya quedado claro y si no pues pregunten con confianza.