Menú en Blogger para Etiquetas


Ya vimos en una entrada anterior como poner en el blog un menú con las páginas que por defecto nos entrega Blogger.
Hoy veremos un nuevo menú, muy sencillo para poner en el blog con el link que nosotros queramos. Puede ser útil para las etiquetas o categorías por ejemplo, para darle un aspecto mas ordenado.
Lo primero que haremos es editar el código de mas abajo y agregarle nuestras url donde queremos que se dirija el lector. En donde dice TU URL, editas y pones las tuyas.
Luego copias todo el código vas a diseño | añadir un gadget | Html/javascript y lo pegas todo allí, por último lo arrastras donde quieres ponerlo. Y ya está el menú.

<style type='text/css'>
#menu {
background-color:#F5F5F5;
height:29px;
margin:3px auto 0;
width:900px;
}
#menu ul {
float:left;
font-family:'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', sans-serif;
list-style-type:none;
margin:0;
padding:0;
width:630px;
}
#menu ul li {
display:block;
float:left;
font-size:12px;
height:29px;
letter-spacing:1px;
line-height:18px;
margin-right:0;
padding:0;
text-transform:none;
}
#menu ul li:hover {
background-color:#DDDDDD;
}
#menu ul li a:link, #menu ul li a:visited, #menu ul li a:active {
color:#666666;
display:block;
float:left;
height:19px;
margin:0;
padding:5px 20px 0;
text-transform:none;
}
#menu ul li a:hover {
background: #fff;
height:25px;
text-decoration:none;
}
#menu ul li ul {
width:180px;
}
</style>
<div id='menu'>
  <ul>
<li><a href='TU URL'>Inicio</a></li>
<li><a href='TU URL'>Contacto</a></li>
<li><a href='TU URL'>Páginas Amigas</a></li>
<li><a href='TU URL'>Políticas</a></li>
</ul>
</div>

El diseño no es ninguna maravilla, pero es práctico y lo pueden editar totalmente a gusto. Si quieres mas pestañas copias <li><a href='TU URL'>Inicio</a></li>  tantas veces como sea necesario, cambiando los datos por los tuyos.


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.