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.
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:
#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:
<li><a
</ul>
</div>
Enlaces para compartir en tu blog o pagina web.
![[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihK06o3qxRgndTN83gagg5xMy8Y0s4rg9GCiBabAgKpoFDpCUkp8Al_rfR6HKBuaEHmmst0IOnxKE7V2kHfX63AoPgzF_mZQ-nZ-Bkj4vdbhyphenhyphenPMU_bP1Dk_0ZJf_4_NgJh7dzseZHN7Okh/s72-c/calculadora.JPG "[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)")
cual es el widget que tenes para "te puede interesar" con icono y todo?
ResponderEliminarEl enlace para descargar no funciona
ResponderEliminar