Menu / abas | #blogdicasblogueiros ...bdb... blog dicas blogueiros

Menu / abas

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
No os será dificil reconocer cual es cada imagen ya que se llaman tableft y tabrightB, tabrightB

Guardamos los cambios.
para obtener su url. respectivamente y terminan con una letra que identifica cada pareja: tableft


[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://elescaparatederosa.blogspot.com/"><span>EL ESCAPARATE</span></a></li>
</ul>
</div>

Es aquí donde
editaremos los enlaces del menú y la información que se mostrará en las pestañas.
Después arrastramos el gadget a debajo del header o a la parte del croscoll  por ejemplo.
Si necesitamos un espacio extra en esa zona podemos consultar como añadir elementos adicionales en Diseño o ver también como aprovechar la zona del croscoll.



fonte e créditos:
http://elescaparatederosa.blogspot.com

 traduzind0:


guias Menu

 
Algum tempo atrás eu postei como instalar um menu de abas Blogger utilizando rótulos.
Neste menu, cada vez que uma entrada é marcada, uma nova guia aparece automaticamente no menu, o que torna a apresentação do menu deixam muito a desejar quando o blog usamos rótulos demais.

Com base na mesma idéia e usando quase o mesmo código, vamos instalar um menu que parece que o guia rotulada, mas em que o curso inclui links.



Menú de pestañas

Antes de começar, você pode ver um exemplo de trabalho em Este teste blogs instalados nas entradas.

[1]
Uma vez no nosso painel vamos Blogger Edição de HTML e colocar o CSS necessário para o menu.
O lugar certo para colocar qualquer código CSS está sempre entre as marcas  
<b:skin> <! [CDATA [/ * e
]]>% Lt; / b: skin> nossa equipe.

Neste caso, seria bom para colocá-lo após a seção de cabeçalho, 
mais ou menos antes / * Outer-Wrapper -------- * / 
Por exemplo:

/ * Menu * guias /

# {Tabsmenu
float: left;
width: 100%;
font-size: 13px;
border-bottom: 1px solid # 2763A5;
line-height: normal;
}
# Ul {Tabsmenu
margin: 0;
padding: 10px 10px 0 50px;
list-style: none;
}
Tabsmenu li # {
display: inline;
margin: 0;
padding: 0;
}
Tabsmenu # um {
float: left;
url ("imagem da esquerda (LEFT)") no-repeat superior esquerdo;: fundo
margin: 0;
padding: 0 0 0 4px;
text-decoration: none;
}
# Tabsmenu span a {
float: left;
display: block;
url ("direito de imagem (direita)") no-repeat superior direito;: fundo
padding: 5px 14px 4px 4px;
color: # 24618E;
}
/ * Comentado Backslash Hack regra esconde-Mac IE5 \ * /
# Tabsmenu uma extensão {float: none;}
/ * Fim IE5-Mac hack * /
# Tabsmenu a: hover {
background-position: 0%-42px;
}
# Tabsmenu a: hover {span
background-position: 100%-42px;
}

[2] Como você pode ver no código Leva duas imagens para formar as abas, que vai continuar "Imagem da esquerda (LEFT)"E outra"DIREITO DE IMAGEM (DIREITO".

Você pode baixar as imagens em várias cores esse formato de arquivo zip. e uma vez escolhidos eles vão usar a ir até uma Hospedagem imagens ou no Blogger mesmo para obter o seu url.
Não é difícil reconhecer o que é cada imagem, como é chamado tableft e tabrightB, TabrightB
respectivamente, e terminam com uma letra que identifica cada par: tableft


Salve as alterações.

[3] Passamos agora à parte Design do nosso painel, clique em Adicionar novo gadget HTML e colar neste código:

id="tabsmenu"> <div
<ul>
<li> <a href="#"> <span> HOME </ span>
</ A> </ li>
<span> e-mail "> <li> <a href =" mailto: <CONTATO direccion / span> </ a> </ li>
BLOGGER <span> <li> <a href="http://www.blogger.com/"> </ span> </ a> </ li>
<li> <a href="http://www.google.es"> <span> Google </ span> </ a> </ li>
<li> href="http://elescaparatederosa.blogspot.com/"> <span> DA MOSTRA </ span> </ a> </ li>
</ Ul>
</ Div>

Este é o lugar onde editar os links do menu e informações a serem exibidas nas guias.
Em seguida, arraste o gadget para abaixo do cabeçalho ou parte dos croscoll por exemplo.
Se precisar de espaço extra nessa área, podemos ver como a adição de elementos adicionais de design ou ver também usar a área como croscoll.




você está em:

http://noticiashoje3x.blogspot.com

flo

http://blogdicasblogueiros.blogspot.com.br/

Nenhum comentário:

Postar um comentário

Mensagem do formulário de comentário: