Lista de Títulos en las Etiquetas. (Mejorado)

Hoy veremos un tutorial que leí en el blog de El escaparate de Rosa, que me pareció muy interesante. Esto es que al pinchar las etiquetas de nuestro blog, o también llamadas categorías, saldrá una lista con los títulos del blog. Por que es interesante??? Bueno, simplemente porque todo esto se logra con condicionales, de modo que no es necesario llenar la plantilla de scripts que lo único que consiguen es ralentizar nuestro blog.
Se ha mejorado el tutorial de manera que no salga la lista en las páginas recientes/antiguas.


La única pega que le encuentro es que por defecto también se mostrarán resumidas las entradas recientes, entradas antiguas pero veremos si se puede solucionar y mas adelante actualizaré el post con la solución.

Lo primero que haremos será guardar nuestra plantilla por si no resultan bien los pasos que hemos seguido, yo los pruebo antes de postearlos pero muchas plantillas poseen códigos distintos.

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


Y cambiamos esa línea por todo este código:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <b:if cond='data:blog.searchLabel'>
<div id='titulos'><ul><li>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/></li></ul>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>


Antes de ]]></b:skin> pegamos lo siguiente, que serán los estilos que le daremos a nuestros títulos, estos pueden cambiarse.
#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;
padding:15px 0px 3px 40px;
font-weight:bold}

Lo último es esconder las fechas de las entradas, si piensas que queda bien con ellas entonces no hagas este paso.
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Y lo cambiamos por este:
<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>

Puedes darle tus propios estilos, agrandar las letras, etc. Recuerda siempre respaldar tu plantilla.

Si te gustó compártelo en tu red social o recomiéndalo en Google!!!

11 comentarios:

  1. Esta perfecto pero hay un problema...que no me salen todas las entradas....cuando pincho en la etiqueta "photoshop" me salen 3 entradas resumidas en lugar de las 16 que tengo con la etiqueta con ese nombre....¿Sabrias arreglarlo?

    ResponderEliminar
    Respuestas
    1. Hola Manuel.
      Tengo tu mismo problema. ¿Lo conseguiste arreglar? ¿Como?
      Gracias y un saludo.

      Eliminar
  2. http://mi-fotografiadigital.blogspot.com.es/search/label/photoshop

    se me olvido poner la direccion de mi blog

    ResponderEliminar
    Respuestas
    1. La verdad es que no tengo idea, lo tengo implementado en otros blogs sin problemas, podría ser desde que no tengas bien etiquetados los post, hasta na imcompatibilidad con algún script de los que tienes.
      Bueno, me ha gustado mucho tu blog. Lo dejo en mis favoritos.
      Saludos.

      Eliminar
  3. Excelente!
    un código muy sencillo y que funciona de maravilla
    muchas gracias

    ResponderEliminar
  4. Excelente!
    sencillo y eficaz
    muchas gracias

    ResponderEliminar
  5. Me gustaría que se vean las etiquetas luego de los títulos, se puede???

    ResponderEliminar
  6. Buenas, hay alguna manera de que el gadget de "etiquetas" que viene por defecto en blogger se muestre únicamente dentro del cuerpo de una página? Muchas gracias de antemano ;)

    ResponderEliminar
    Respuestas
    1. No que yo sepa pero puedes hacerlo con enlaces manuales. Ejemplo
      <a href="URL-DE-LA-ETIQUETA"> Nombre de la etiqueta</a>

      Eliminar

Tus comentarios ayudan a mejorar este Blog.