02 septiembre 2009

Menú de pestañas

 

Hace tiempo publiqué como instalar un menú de pestañas en Blogger usando las etiquetas.


En ese menú, cada vez que se etiqueta una entrada, una nueva pestaña aparece
de forma automática en el menú, esto hace que el aspecto del menú deje bastante que desear cuando en el blog usamos demasiadas etiquetas.



Basándonos en la misma idea y usando casi el mismo código, vamos a instalar un menú con el mismo aspecto que el de pestañas con etiquetas, pero en el que incluiremos los enlaces que creamos oportuno.



Menú de pestañas


Antes de empezar, podéis ver un ejemplo funcionando en
este blogs de pruebas instalado sobre las entradas.


[1] Una vez en nuestro panel de Blogger vamos a Edición HTML y colocamos el CSS necesario para el menú.



El lugar adecuado para colocar cualquier código CSS es siempre entre las etiquetas <b:skin><![CDATA[/* y ]]>%lt;/b:skin> de nuestra plantilla.



En este caso estaría bien ponerlo después de la sección del header, más o menos antes de
/* Outer-Wrapper-------- */ por ejemplo:


/* Menu pestañas*/

#tabsmenu {

float:left;

width:100%;

font-size:13px;

border-bottom:1px solid #2763A5;

line-height:normal;

}

#tabsmenu ul {

margin:0;

padding:10px 10px 0 50px;

list-style:none;

}

#tabsmenu li {

display:inline;

margin:0;

padding:0;

}

#tabsmenu a {

float:left;

background:url("IMAGEN IZQUIERDA (LEFT)") no-repeat left top;

margin:0;

padding:0 0 0 4px;

text-decoration:none;

}

#tabsmenu a span {

float:left;

display:block;

background:url("IMAGEN DERECHA (RIGHT)") no-repeat right top;

padding:5px 14px 4px 4px;

color:#24618E;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#tabsmenu a span {float:none;}

/* End IE5-Mac hack */

#tabsmenu a:hover {

background-position:0% -42px;

}

#tabsmenu a:hover span {

background-position:100% -42px;

}


[2] Como veis en el código, se necesitan dos imágenes para que formen las pestañas, una que irá en "IMAGEN IZQUIERDA (LEFT)" y otra en "IMAGEN DERECHA (RIGHT".



Podéis descargar las imagenes en varios colores en
este archivo en formato .zip y una vez escogidas las que vais a usar, las subís a un alojamiento de imágenes o al mismo Blogger para obtener su url.


No os será dificil reconocer cual es cada imagen ya que se llaman
tableft y tabrightrespectivamente y terminan con una letra que identifica cada pareja: tableftB, tabrightB


Guardamos los cambios.



[3] Vamos ahora a la parte de Diseño de nuestro panel, pinchamos en añadir un nuevo gadget HTML y pegamos dentro este código:


<div id="tabsmenu">
<ul>
<li><a href="#"><span>INICIO</span>
</a></li>
<li><a href="mailto:direccion
email"><span>CONTACTO</span></a></li>
<li><a
href="http://www.blogger.com/"><span>BLOGGER</span></a></li> <li><a href="http://www.google.es"><span>GOOGLE</span></a></li> <li><a
href="http:/recursosparawebmaster.blogspot.com/"><span>Recursos para webmaster</span></a></li>

</ul>

</div>



Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo