Lista de los títulos de entradas en página de etiquetas

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Kassy me ha dejado un comentario en la entrada donde podemos encontrar los pasos para mostrar los títulos de entradas en las páginas de etiquetas:

Te quería preguntar si hay una manera mas sencilla de hacerlo es que yo no me aclaro con tantos códigos.


La forma de lograr algo parecido a este efecto que veíamos en esa entrada anterior y de forma más sencilla, está explicado con total claridad en una entrada de Ariane de Templates Novo Blogger, prácticamente lo que voy a tratar de hacer en esta entrada es traducir la suya al español, ya que han sido varias personas además de Kassy las que me lo han pedido algo similar.


[1] Desde nuestro panel de Blogger nos situamos en la pestaña de Edicion HTML y marcamos la casilla de Expandir las plantillas de artilugios, para localizar esta línea de código:

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

[2] Sustituimos esa línea por todo este código:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='titulos'><ul><li>
<a expr:href='data:post.url'><data:post.title/></a>
</li></ul>
</div>

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

[3] Colocamos ahora una porción de CSS para dar estilo a la lista de los títulos, lo hacemos antes de ]]></b:skin>:

#titulos{ /*estilo para el espacio ocupado por la lista */
margin:6px 0px;
background:#fff;
padding:6px;
border:1px solid #e3e2e3}

#titulos ul{ /*estilo de la lista */
margin:0px;
list-style-type:none;
background:#eeeded;
padding:3px;}

#titulos li{ /* estilo para cada item (título) de la lista */
background: #fff url(url_del_icono);
padding:15px 0px 3px 40px;
font-weight:bold}

[4] Hacemos ahora que la fecha de las entradas no se muestre en esas páginas y así no aparezca sobre los títulos de la lista, para hacerlo localizamos el código de la fecha de las entradas:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Y lo sustituimos por este otro:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:post.dateHeader'>
<div class='date-header'><data:post.dateHeader/></div>
</b:if>

<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.dateHeader'>
<div class='date-header'><data:post.dateHeader/></div>
</b:if></b:if></b:if>

Ejemplo:

En la entrada de Ariane no se dice como añadir el icono delante de cada título de entrada, pero es tan sencillo como añadir en el CSS, donde dice "url_del_icono" la dirección del icono que vamos a usar.

Entrada original en: Templates Novo Blogger