Tutorial para personalizar los metadatos de tus posts en Blogger.
Si es la primera vez que visitas este sitio, no olvides suscribirte al feed RSS o participar como blogger invitado. Gracias por tu visita!
Una de las zonas más características del diseño de una plantilla, es aquella en la que se detalla la información sobre el autor, las etiquetas y el enlace para publicar comentarios en los posts del blog. A menudo, no se suele tener muy encuenta a la hora de personalizar el diseño de la página, sin embargo, éste es uno de esos pequeños detalles que marcan la diferencia entre la excelencia y la mediocridad.
Antes de comenzar con las instrucciones para modificar el formato, la posición o la apariencia de esta sección, es necesario precisar someramente las distintas partes en las que se dividen cada uno de los posts publicados en Blogger. Si entras en tu panel de edición HTML y activas la casilla “Expandir plantillas de artilugios”, descendiendo por el código del blog encontrarás una etiqueta div con la clase “post”, donde se incluye la identificación y el título de la entrada.
Unas líneas más abajo, verás una etiqueta con la clase “post-header-line-1″. Como se puede deducir por su nombre, ésta parte del post se sitúa justo debajo del título y antes del cuerpo del post. En algunas plantillas, suele contener el enlace de los comentarios o la información sobre el autor de la entrada.
Si continúas explorando por el código hallarás la etiqueta “post-body”, que hace referencia al cuerpo del post o al texto de la entrada, y la etiqueta “post-footer”, en la que se detallan los datos ubicados en el pie de página relativos a las etiquetas del post o el vínculo para enviar la entrada por e-mail (en caso de que esté activada). A su vez, el post-footer se divide en varias subsecciones delimitadas por etiquetas de párrafo <p>, a las que se les asignan las clases “post-footer-line-1″, “post-footer-line-2″ y “post-footer-line-3″.
Blogger te brinda la posibilidad de editar este tipo de opciones en la sección de elementos de página a través del bloque de entradas del blog. Al editar esta sección puedes personalizar, activar y reemplazar algunas opciones como el formato de la fecha o el texto que quieres añadir en el vínculo de comentarios, autores o etiquetas. No obstante, si lo que deseas es alterar la posición de los distintos bloques, también tendrás que hacerlo a través del código HTML de la plantilla, trasladando cada código del “post-footer-line-1,2 ó 3″ al “post-header-line-1″ o viceversa.
A continuación, puedes identificar el código de cada uno de los elementos expuestos en la imagen anterior.
Fecha principal.
En este post puedes consultar cómo optimizar el formato de la fecha principal de tus posts en Blogger y añadirle una imagen de fondo.
Autor.
<b:if cond=’data:top.showAuthor’>
<span class=’fn’><data:post.author/></span>
</b:if>
</span>
Fecha secundaria.
También utilizada para señalar la hora en que se ha publicado el post.
<b:if cond=’data:top.showTimestamp’>
<data:top.timestampLabel/>
<b:if cond=’data:post.url’>
<a class=’timestamp-link’ expr:href=’data:post.url’ rel=’bookmark’ title=’permanent link’><abbr class=’published’ expr:title=’data:post.timestampISO8601′><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
Enlace de comentarios.
<b:if cond=’data:blog.pageType != “item”‘>
<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 <b:else/><data:post.numComments/></b:if></a>
</b:if>
</b:if>
</span>
<!– backlinks –>
<span class=’post-backlinks post-comment-link’>
<b:if cond=’data:blog.pageType != “item”‘>
<b:if cond=’data:post.showBacklinks’>
<a class=’comment-link’ expr:href=’data:post.url + “#links”‘><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>
Etiquetas.
<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 != “true”‘>,</b:if>
</b:loop>
</b:if>
</span>
Reconocidos cada uno de los bloques de código relacionados con el elemento en cuestión, puedes modificar su ubicación y transportarlo de una zona del post a otra mediante la edición de las entradas del blog, en la sección de edición de elementos de página. Posteriormente, tendrás que buscar el bloque de código correspondiente, cortarlo y pegarlo en el “post-header-line-1″, o en el lugar en el que quieras que se muestre.
Por último, debes tener en cuenta que en algunas ocasiones el “post-header-line-1″, delimitado por las etiquetas <div>, se encuentra cerrado de la siguiente forma si no contiene ninguno de estos componentes:
<div class=”post-header-line-1″/>
… en lugar de…
<div class=”post-header-line-1″></div>
En tal caso, tendrías que abrirla e incluir el código, de forma que te quedara así:
—- Código del elemento —-
</div>
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
12 Comentarios
Me alegro de que te pueda servir de ayuda. Por cierto, tienes un blog bastante interesante para los usuarios de esa consola.
Saludos 
Muito bom esse tutorial, ainda nao tinha visto!!
Continua assim… seu blog é show!!
La verdad que es mas que interesante todo esto, pero tengo un problema que intenté solucionar pero no pude. Lo que pasa es que estoy usando un Skin, y para poder instalarlo tube que ir a una opcion y ahora no me permite activar a casilla “Expandir plantillas de artilugios”. Por ese motivo es que tengo una codificacion diferente, y nose en que lugar colocar los codigos para poder tener coments y autor debajo de mis nuevas entradas :S
Por favor. Agradecería tu respuesta.
@Hi. ¿A qué opción te refieres para que no te permita activar las plantillas de artilugios? No conozco ninguna opción que haga esto en Blogger xD. Te podré ayudar más fácilmente si dejas la dirección de tu blog y me dices que plantilla estás utilizando.
Gracias por comentar
Un saludo!
http://temporarilydown.blogspot.com
Ese es mi blog, y a lo que me referia es que mi skin no tiene ninguna codificacion con esos nombres(ej:“post-footer-line-1?, “post-footer-line-2? y “post-footer-line-3)
Entonces, cuando tengo que aplicar los codigos para tener coments nose en donde colocarlos, porque los coloque pero no se ven :S
Tengo un blog que ya trae lo de “post relacionados” pero no se muestra nada como aqui en el tuyo.. qué debo hacer o qué modificar?
Puedo cambiarlo por lo que escribí ahce un año atrás?.. y que salga automáticamente. Lo he visto en otro blog, pero no puedo descubrir cuál es el código
Necesitaría una respuesta por favor 
@Rsp. Hola! Siento mucho la tardanza en contestar. Siempre leo todos los comentarios, pero algunos por desgracia se me quedan en el tintero. Tu plantilla tiene una codificación bastante extraña, que nunca había visto en otros diseños.
Si quieres puedes enviármela por email y yo mismo te introduciré los códigos necesarios para que puedas insertar comentarios, etiquetas o lo que desees en esas secciones del post-footer. De esta forma me resultaría muchísimo más fácil y rápido ayudarte. Puedes enviarme la plantilla a través de la página de contacto de este blog.
@Ivonne. Hola! Una pregunta, ¿tu blog está funcionando bajo WordPress o está alojado en Blogger? Si lo gestionas a través de WordPress, los plugins que puedes utilizar para los posts relacionados y para mostrar lo escrito un año atras son WordPress Related Posts y One Year Ago
Espero que te sirva de ayuda
Un saludo!
Hola,
Venía en busca de ayuda con unas cuantas preguntas, estoy usando actualmente el tema Dreamwork Redux pero al cargarlo se me perdieron varios elementos, como puedo hacer para que no se pierdan?
Y la otra pregunta está relacionada con este misma plantilla y el post-footer, porqué esa plantilla no tiene post-footer? Puede haber desaparecido cuando la carga de esos elementos? supongo que no porque es parte de la plantilla no son “Widgets” por llamarlos de alguna forma pero el caso es que no aparece….hay algún equivalente al post-footer en esa plantilla?
Es que quería meterle cosas como Digg This, Share This y demás pero al no tener post-footer no puedo.
Un saludo y muchas gracias.
me viene al pelo este tuto, ya que actualmente estoy trabajando en un blog con este tipo de CMS.
Muchas Gracias.