fonte e créditos:
http://gemablog-.blogspot.com/
2009/02/anadir-enlazar-configurar-menus.html



...

"   Añadir, enlazar, configurar menús"

Entre las consultas que recibo hay una que se repite constantemente, se trata de añadir un menú al blog y que enlace cualquier entrada o etiqueta.

Lo primero que haremos será buscar ese menú, hay muchas páginas donde hacerlo y seguro que ya tenéis alguno en mente.

• Home
• Etiqueta1
• Etiqueta2
• Etiqueta3

Vamos a añadir un menú con CSS esto quiere decir que consta de los estilos y el código para los enlaces únicamente.

Para ejemplo añadí el que veis en la parte superior de la entrada.
Los estilos los añadiremos justo antes de ]]></b:skin>

.red #slatenav {
position: relative;

display: block;

height: 42px;

background: transparent url(url-de-imagen-gif) repeat-x top left;

text-transform: uppercase;

font: bold 11px Arial, Verdana, Helvitica, sans-serif;

}

.red #slatenav ul {

margin: 0;

padding: 0;

list-style-type: none;

width: auto;

}

.red #slatenav ul li {

display: block;

float: left;

margin: 0 1px 0 0;

}

.red #slatenav ul li a {

display: block;

float: left;

color: #FECCC3;

text-decoration: none;

padding: 14px 22px 0;

height: 28px;

}

.red #slatenav ul li a:hover,
.red #slatenav ul li a.current {

color: #fff;

background: transparent url(url-de-imagen-HOVER.gif) no-repeat top center;

}

En este menú tenemos dos imágenes:
La opacidad

El efecto hover

Para añadirlas estas o cualquier otra imagen nos fijaremos que el nombre de la imagen corresponda con el lugar donde tenemos que añadirla en los estilos del menú.

Es decir, guardamos o descargamos las imágenes a nuestro PC las subimos a nuestro servidor o a una entrada del blog que dejaremos en borrador y copiamos la url de la imagen para añadirla en el sitio que corresponda.

Podría ser que no contenga imágenes y que en lugar de decir background: transparent url(url-de-cualquier imagen);fuera un color en este caso sería algo así background:#ccc; o background-color:#ccc; eso nos daría la posibilidad de sustituir el color por cualquier otro.

Ya tenemos el código de los estilos en la plantilla, las imágenes añadidas o el color de nuestro agrado.

Guardamos los cambios y nos situamos en plantilla de diseño, allí editamos un nuevo gadget y escogemos la pestaña de HTML...

En las páginas de menús también nos proporcionan el código HTML para los enlaces del menú, para este del ejemplo es el siguiente:

<div class="red">
<div id="slatenav">
<ul>
<li><a href="url-página" class="current" title="descripción">Home</a></li>
<li><a href="url-página" title="descripción">Enlace1</a></li>
<li><a href="url-página" title="descripción">Enlace2</a></li>
<li><a href="url-página" title="descripción">Enlace3</a></li>
</ul>
</div>
</div>

*Donde dice url-página añadimos la url de la página que vamos a enlazar.

*En descripción es el texto que se muestra al pasar el cursor sobre el enlace.

*El texto Home lo añadí para tener una página de inicio.

*Etiqueta1- 2- 3 serán el nombre de los enlaces, es decir el texto que visualizamos.

Completamos esos detalles y guardamos los cambios para no perderlos.

» Para enlazar una entrada en concreto «

Lo que haremos será visualizar la entrada completa. Podemos hacerlo de varias formas...

» Haciendo click en el título de la entrada.
» Desde una confirmación de comentario en el correo.
» En el enlace de (x comentarios)
» En un título de los archivos.
» Desde un gadget de últimas entradas.
» El gadget de últimos comentarios.

Una vez visualizamos la entrada completa copiamos la url que aparece en la barra del navegador. Esa es la url de la entrada que pegaremos en el código del menú.

» Enlazar una categoría o etiqueta «

Esta vez haremos clikc sobre la etiqueta en concreto. Se mostrarán en este caso todas las entradas con una misma etiqueta o los títulos de las entradas con una misma etiqueta si así lo tenemos establecido.

Copiaremos la url de la barra del navegador y esa es la url de nuestra etiqueta que pegaremos en el código de nuestro menú.

» Enlazar el perfil de autor «

En este caso nos dirigimos a nuestro perfil y realizamos la misma operación, copiar la url y pegar en el menú.

» Enlace a envío de correo «

Aquí cambiamos porque vamos a enlazar con la dirección de nuestro correo.

Sería algo así:

<a href="mailto:aquí tu dirección de correo" target="_blank" title="aquí descripción>ENLACE</a>

Enlazar una página externa sería más de lo mismo, copiar la url de la página y pegarla en nuestro código donde "a href"

Espero que esto conteste tus dudas "El blog gracioso"

¡Suerte!!

2/19/2009

♡

Si te ha gustado ¡ Compártelo !

Adicionar, conectar, configurar menus

"Entre as consultas que recebo é aquela que é constantemente repetido, tentando adicionar um link do menu para o blog e que qualquer entrada ou o rótulo.

A primeira coisa que vamos encontrar esse menu existem muitos sites seguros onde você já tem uma em mente."

• Início
• Label1
• Label2
• Etiqueta3

"  Vamos adicionar um menu com CSS, isso significa que consiste em os estilos eo código para o único elo.

Por exemplo, eu adicionei você vê na parte superior da entrada."


Os estilos vão adicionar um pouco antes 
 ]]></ B: skin>

. Slatenav Red # {
position: relative;

display: block;

height: 42px;

background: url transparente (url-de-gif-) Repeat-x superior esquerdo;

text-transform: uppercase;

font: bold 11px Arial, Verdana, Helvitica, sans-serif;

}

. Ul slatenav Red # {

margin: 0;

padding: 0;

list-style-type: none;

width: auto;

}

. Vermelho # li ul {slatenav

display: block;

float: left;

margin: 0 0 0 1px;

}

. Vermelho # li ul {slatenav

display: block;

float: left;

color: # FECCC3;

text-decoration: none;

padding: 14px 22px 0;

height: 28px;

}

. Vermelha li ul # slatenav a: hover

. Vermelho # slatenav a.current ul li {

color: # fff;

background: url transparente (url-de-imagem-HOVER.gif) No-repeat center top;

}

Neste menu, você tem duas imagens:
Opacidade

O efeito hover

"  Para adicionar estes ou qualquer outra imagem que vou postar o nome da imagem corresponde ao local onde temos de acrescentar no menu de estilos."

"  Isto é, guardar ou fazer download de imagens para o seu PC a subida para o nosso servidor, ou uma entrada de blog que vai redigir e copiar o url da imagem para adicioná-lo ao local adequado."

"   Não poderia conter imagens e em vez de dizer background: url transparente (url-da-imagem de todos);  fosse uma cor, neste caso seria algo background: # ccc; ou background-color: # ccc; que nos daria a possibilidade de mudar a cor de qualquer outro."

"   Nós já temos o código do modelo em estilos, imagens ou cores adicionado ao nosso gosto."

"   Salve as mudanças e nos movemos para o modelo de design, onde publicamos um novo gadget e escolha a aba HTML ...

Nas páginas de menus também nos fornecer o código HTML para os links do menu para este exemplo é:

class= <div

id="slatenav"> <div

<ul>

<li> <a href = "url-page"Class =" "title =" atualdescrição">Início</ A> </ li>

<li> <a href = "URL da página"Title ="descrição">Enlace1</ A> </ li>

<li> <a href = "URL da página"Title ="descrição">Enlace2</ A> </ li>

<li> <a href = "URL da página"Title ="descrição">Enlace3</ A> </ li>

</ Ul>

</ Div>

</ Div>

* Quando se diz URL da página adicionar o URL da página que você está indo para link.

* Em descrição é o texto que é exibido quando você passa o mouse sobre o link.

* Texto Início Eu adicionei ele para ter uma homepage.

* Label1-2-3 será o nome dos links, ou seja, para visualizar o texto.

Completamos essas informações e salvar as alterações para evitar perdê-los.

"Para criar um link de uma entrada especial"

O que veremos a entrada inteira. Fazemos isso de várias maneiras ...

"Ao clicar no título do post.
"A partir de um comentário no email de confirmação.
"  No link (x comentários)
"  Em um título do arquivo.
"   A partir de uma entrada mais recente gadget.
"   Os últimos comentários gadget.

Uma vez que a entrada inteira visualizar copiar a URL na barra de endereços. Essa é a url da entrada que vai ficar no código do menu.

"  Associando uma categoria ou tag"

Desta vez nós clikc no rótulo específico. Será mostrado neste caso todas as entradas com o mesmo rótulo ou entradas de título com o mesmo rótulo, se estabeleceram.

Copiar na barra de URL do seu navegador e que é a url do nosso selo que vai ficar no código do nosso menu.

"   Vincular o perfil do autor"

Neste caso, vamos ao nosso perfil e executar a mesma operação, copie e cole a URL no menu.

»Link para enviar e-mail '

Aqui vamos mudar, porque nós faremos um link para o nosso endereço de e-mail.

Seria algo como:

correo" <a href="mailto:aquí seu endereço target="_blank" title="aquí description> LINK </ a>

Vinculando um site externo seria mais do mesmo, copiar o url da página e colá-lo em seu código onde "   a href  " 

"   Espero que este responde às suas perguntas "   O blog engraçado"

Sorte!"

obs.:

imagem de menu efeito hover                             

<img border="0" src="http://3.bp.blogspot.com/_q4j3j-JA2ro/SZy2uQTnzaI/AAAAAAAAJR4/QvVuVdNbQUk/s000/backgroundHOVER.gif" class="sinborde">




imagem de menu  opacidade                             

<img border="0" src="http://4.bp.blogspot.com/_q4j3j-JA2ro/SZy3fVq8iaI/AAAAAAAAJSA/q9Rl2OVBmwI/s000/background-gif.gif" class="sinborde">