" Menu vertical con botones usando la lista de enlaces blogger"

saiba como é feito:..."botões de menu vertical à lista de links blogger"

fonte  e créditos:

http://compartidisimo.blogspot.com

/2011/01/menu-vertical-con-botones-usando-la.html

"  Menu vertical con botones usando la lista de enlaces blogger"

Crear un menú de navegación no es nada complicado, y menos si utilizamos el widget que blogger ofrece de lista de enlaces.

Basicamente lo que vamos a hacer, es agregar estilos a la lista de enlaces que blogger facilita, con el fin de crear botones para dichos enlaces, y para que estos luzcan más sofisticados, usaremos como fondo gradientes, aprovechando la existencia de este generador de gradientes, que en su código ya incluye un filtro, para que sea visualizado en Internet Explorer.

Ventajas

• Los enlaces lucirán como auténticos botones recién salidos de photoshop
• Puedes editar los colores de los botones las veces que quieras editando el valor del background
• Usarás lo que tienes en casa (lista de enlaces de blogger) y por lo tanto te ahorrarás el código HTML para crear los enlaces
  
• Puedes seguir agregando todos los enlaces que necesites editando el widget de lista de enlaces
• No usarás ninguna imagen, por lo que no necesitarás crear una  
• Puedes crear muchas listas de enlaces usando los mismos estilos u otros diferentes

DEMOSTRACION

Para decirte como aplicarlos, voy a usar como ejemplo gradientes negros.

Importante: Antes de empezar, es necesario decirte que en el código CSS abajo, estoy identificando a la lista de enlaces como si fuera la primer lista que agregas, blogger las va numerando de forma sucesiva, entonces, si es tu segunda lista de enlaces, en lugar de LinkList1 usarás LinkList 2 o si esla tercera LinkList3 y así sucesivamente. Ahora empecemos...


Paso 1. Ve a Diseño►Elementos de la página.

Paso 2. Haz click en añadir un gadget, en la parte de tu columna lateral, luego selecciona la opción lista de enlaces y agrega todos los enlaces que necesites.

Paso 3. Ve Diseño►Diseñador de plantillas►Avanzado►Añadir CSS

Paso 4. Agrega los estilos para la lista de enlaces (código CSS), y será algo como esto:

#LinkList1 ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#LinkList1  li {
margin: 0;
border: none;
}

#LinkList1 li a {
/*estos son los estios para los enlaces*/
display: block;
width: 180px;
padding: 8px 8px 8px 10px;
border: 1px solid #000000;
background: #45484d; /* old browsers */
background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* ie */
text-decoration: none;
text-align: left;
text-shadow: 1px 1px 1px #777;
}

#LinkList1 a:link, #LinkList1 a:active, #LinkList1 a:visited {
color: #000000;
}

#LinkList1 li a:hover {
/*efecto al poner el puntero sobre el enlace*/
background: #0e0e0e; /* old browsers */
background: -moz-linear-gradient(top, #0e0e0e 3%, #7d7e7d 99%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#0e0e0e), color-stop(99%,#7d7e7d)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#7d7e7d',GradientType=0 ); /* ie */
color: #ffffff;
}

NOTA: Recuerda que al pegar código en Añadir CSS, en un principio, no es identificado,  para solucionar eso, ubicate después de esta llave {  por ejemplo, y luego haz click en la tecla enter, verás que inmediatamente es interpretado lo que has agregado y podrás ver los botones.

Paso 5. Ahí abajo puedes ver como lucen tus botones, una vez que te gusten los resultados, haz click en APLICAR AL BLOG.

Ahora los botones lucen así

• Enlace 1
• Enlace 2
• Enlace 3

Aquí les tengo diferentes estilos de botones, pueden verlos en el DEMO, si les gusta alguno, solo copien el código CSS y agreguenlo en añadir CSS, como les decía allá arriba, o bien armen los propios según sus gustos y/o necesidades :).

Botones Morados

#LinkList1 ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#LinkList1  li {
margin: 0;
border: none;
}

#LinkList1 li a {
/*estos son los estilos para los enlaces*/
display: block;
width: 180px;
padding: 8px 8px 8px 10px;
border: 1px solid #a849a3;
background: #e570e7; /* old browsers */
background: -moz-linear-gradient(top, #e570e7 0%, #c85ec7 47%, #a849a3 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e570e7), color-stop(47%,#c85ec7), color-stop(100%,#a849a3)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 ); /* ie */
text-decoration: none;
text-align: left;
text-shadow: 1px 1px 1px #ccc;
-webkit-border-radius:  16px;
-moz-border-radius: 16px;
border-radius: 16px;
-moz-box-shadow: 1px 1px 4px #777;
-webkit-box-shadow: 1px 1px 4px #777;
 box-shadow: 1px 1px 4px #777;
}

#LinkList1 li a:link, #LinkList1 li a:active, #LinkList1 li a:visited {
color: #000000;
}

#LinkList1 li a:hover {
/*efecto al poner el puntero sobre el enlace*/
background: #c85ec7; /* old browsers */
background: -moz-linear-gradient(top, #c85ec7 47%, #e570e7 98%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(47%,#c85ec7), color-stop(98%,#e570e7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c85ec7', endColorstr='#e570e7',GradientType=0 ); /* ie */
color: #ffffff;
text-shadow: 1px 1px 1px #000;
}

Botones plateados

#LinkList1 ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#LinkList1  li {
margin: 0;
border: none;
}

#LinkList1 li a {
/*estos son los estilos para los enlaces*/
display: block;
width: 180px;
padding: 8px 8px 8px 10px;
border: 1px solid #e5e5e5;
background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* ie */
text-decoration: none;
text-align: left;
text-shadow: 1px 0px 1px #e5e5e5;
-webkit-border-radius:  16px;
-moz-border-radius: 16px;
border-radius: 16px;
-moz-box-shadow: 1px 1px 3px #ccc;
-webkit-box-shadow: 1px 1px 4px #ccc;
 box-shadow: 1px 1px 4px #ccc;
}

#LinkList1 li a:link, #LinkList1 li a:active, #LinkList1 li a:visited {
color: #000000;
}

#LinkList1 li a:hover {
/*efecto al poner el puntero sobre el enlace*/
background: #e5e5e5; /* old browsers */
background: -moz-linear-gradient(top, #e5e5e5 2%, #ffffff 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#e5e5e5), color-stop(100%,#ffffff)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 ); /* ie */
text-shadow: 1px 1px 1px #000;
}

Botones Azules

#LinkList1 ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#LinkList1  li {
margin: 0;
border: none;
}

#LinkList1 li a {
/*estos son los estilos para los enlaces*/
display: block;
width: 180px;
padding: 8px 8px 8px 10px;
background: #a9e4f7; /* old browsers */
background: -moz-linear-gradient(top, #a9e4f7 0%, #0fb4e7 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); /* ie */
text-decoration: none;
text-align: left;
text-shadow: 1px 0px 1px #c8c8c8;
-webkit-border-radius:  16px;
-moz-border-radius: 16px;
border-radius: 16px;
-moz-box-shadow: 1px 1px 3px #777;
-webkit-box-shadow: 1px 1px 4px #ccc;
 box-shadow: 1px 1px 4px #ccc;
}

#LinkList1 li a:link, #LinkList1 li a:active, #LinkList1 li a:visited {
color: #000000;
}

#LinkList1 li a:hover {
/*efecto al poner el puntero sobre el enlace*/
background: #FF11EB; /* old browsers */
background: -moz-linear-gradient(top, #FF11EB 2%, #F7AFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#FF11EB), color-stop(100%,#F7AFFF)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF11EB', endColorstr='#F7AFFF',GradientType=0 ); /* ie */
text-shadow: 1px 1px 1px #777;
}

Probado en : Internet Explorer incluyendo IE6, Firefox, y Google Chrome, los botones que tienes esquinas redondeadas lucen rectos en IE.


Referencias  w3schools

traduzido

"  botões de menu vertical à lista de links blogger

"

Criar navegação não é complicado, e menos se usar o widget para blogger oferece blogroll.


Basicamente o que vamos fazer é adicionar estilos para a lista de links blogueiro desde que, para criar botões para estas ligações, e assim que olhar mais sofisticado, usaremos como os gradientes de fundo, aproveitando a existência deste gerador de gradiente, Que em seu código, e inclui um filtro, para ser visualizado no Internet Explorer.

Vantagens

• Os links irão aparecer como a nova e autêntica de botões photoshop
• Você pode editar as cores dos botões quantas vezes quiser, editando o valor do fundo
• Use o que você tem em casa (links blogueiro lista) e, portanto, você vai salvar o HTML para criar links
• Você pode continuar a adicionar todos os links que você precisa, editando a lista de links widget
• Você não vai usar todas as imagens, então não há necessidade de criar um
• Você pode criar quantas listas de links usando os estilos iguais ou diferentes

DEMONSTRAÇÃO

Para te dizer como se candidatar, eu vou usar como exemplo gradiente de preto.


Importante: Antes de começar, você precisa dizer-lhe que o código CSS abaixo, eu estou identificando a lista de links, como a primeira lista que você adicione, o blogueiro é numerado sequencialmente, então, se a sua segunda lista de links, Linklist site LinkList1 vai usar 2 ou LinkList3 Esla terceiro e assim por diante. Agora vamos começar ...



Passo 1. ► Vá para elementos de layout de página.

Passo 2. Clique adicionar um gadget na parte da barra lateral, em seguida, selecione blogroll e adicionar todos os links que você precisa.

Etapa 3. Designer Ir Modelos Design ► ► ► Adicione CSS Avançado

Etapa 4. Adicionar estilos para a lista de links (CSS) e será algo parecido com isto:

# LinkList1 ul {
margin: 0;
padding: 0;
list-style-type: none;
}

# LinkList1 li {
margin: 0;
border: none;
}

# LinkList1 li a {
/ * Estes são os estimadores para os links * /
display: block;
width: 180px;
padding: 8px 8px 8px 10px;
border: 1px solid # 000000;
background: # 45484d; / * antigos navegadores /
background:-moz-linear de gradiente (de cima, # 45484d 0% 100% # 000000), / * firefox * /
background:-webkit-gradiente (linear, esquerda esquerda, superior e inferior cor-stop (0%, # 45484d), cor-stop (100%, # 000000)) / * webkit * /
Filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr endColorstr = '# 45484d' = '# 000000', GradientType = 0) / * IE * /
text-decoration: none;
text-align: left;
text-shadow: 1px 1px 1px # 777;
}

# LinkList1 a: link, # LinkList1 a: active, # LinkList1 a: visited {
color: # 000000;
}

# LinkList1 li a: hover {
/ * Fim de colocar o ponteiro do mouse sobre o link * /
background: # 0e0e0e, / * antigos navegadores /
background:-moz-linear de gradiente (de cima, 0e0e0e # 3% # 7d7e7d 99%); / firefox * / *
background:-webkit-gradiente (linear, esquerda esquerda, superior e inferior cor-stop (3%, # 0e0e0e), cor-stop (99%, # 7d7e7d)) / * webkit * /
Filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 0e0e0e' endColorstr = '# 7d7e7d' GradientType = 0) / * IE * /
color: # ffffff;
}

NOTA: Lembre-se que quando você colar o código CSS para adicionar, em primeiro lugar não identificadoPara resolvê-lo, pegue situado após essa chave {por exemploE, 
em seguida, clique no botão entrarVocê notará imediatamente é interpretado o que você adicionou e você vai ver os botões.

Etapa 5. Lá embaixo você pode ver como seus botões olhar, uma vez que você gostar do resultado, clique em APLICAR AO BLOG.

Os botões de aparência

• Link 1
• Link 2
• Link 3

Eu tenho aqui são estilos diferentes de botões, pode ser visto na DEMOSe você gosta de um, basta copiar o código CSS CSS e Adicionar-lo para acrescentar, como eu disse lá em cima, ou armar-se de acordo com seus gostos e / ou necessidades:).

Roxo Botões

# LinkList1 ul {
margin: 0;
padding: 0;
list-style-type: none;
}

# LinkList1 li {
margin: 0;
border: none;
}

# LinkList1 li a {
/ * Estes são os estilos para os links * /
display: block;
width: 180px;
padding: 8px 8px 8px 10px;
border: 1px solid # a849a3;
background: # e570e7, / * antigos navegadores /
background:-moz-linear de gradiente (de cima, e570e7 # 0%, # c85ec7 47%, # a849a3 100%); / firefox * / *
background:-webkit-gradiente (linear, esquerda esquerda, superior e inferior cor-stop (0%, # e570e7), cor-stop (47%, # c85ec7), cor-stop (100%, # a849a3)); * webkit /
Filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr endColorstr = '# e570e7' = '# a849a3' GradientType = 0) / * IE * /
text-decoration: none;
text-align: left;
text-shadow: 1px 1px 1px # ccc;
-Webkit-border-radius: 16px;
-Moz-border-radius: 16px;
border-radius: 16px;
-Moz-box-shadow: 1px 4px 1px # 777;
-Webkit-box-shadow: 1px 4px 1px # 777;
box-shadow: 1px 4px 1px # 777;
}

# LinkList1 li a: link, # LinkList1 li a: active, # LinkList1 li a: visited {
color: # 000000;
}

# LinkList1 li a: hover {
/ * Fim de colocar o ponteiro do mouse sobre o link * /
background: # c85ec7, / * antigos navegadores /
background:-moz-linear de gradiente (de cima, # c85ec7 47%, # e570e7 98%); / firefox * / *
background:-webkit-gradiente (linear, esquerda esquerda, superior e inferior cor-stop (47%, # c85ec7), cor-stop (98%, # e570e7)) / * webkit * /
Filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr endColorstr = '# c85ec7' = '# e570e7' GradientType = 0) / * IE * /
color: # ffffff;
text-shadow: 1px 1px 1px # 000;
}

botões de prata

# LinkList1 ul {
margin: 0;
padding: 0;
list-style-type: none;
}

# LinkList1 li {
margin: 0;
border: none;
}

# LinkList1 li a {
/ * Estes são os estilos para os links * /
display: block;
width: 180px;
padding: 8px 8px 8px 10px;
border: 1px solid # e5e5e5;
background: # ffffff; / * antigos navegadores /
background:-moz-linear de gradiente (de cima, # ffffff 0%, # e5e5e5 100%); / firefox * / *
background:-webkit-gradiente (linear, esquerda esquerda, superior e inferior cor-stop (0%, # ffffff) cor-stop (100%, # e5e5e5)) / * webkit * /
Filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff ', endColorstr =' # e5e5e5, GradientType = 0) / * IE * /
text-decoration: none;
text-align: left;
text-shadow: 0px 1px 1px # e5e5e5;
-Webkit-border-radius: 16px;
-Moz-border-radius: 16px;
border-radius: 16px;
-Moz-box-shadow: 1px 1px 3px # ccc;
-Webkit-box-shadow: 1px 1px 4px # ccc;
box-shadow: 1px 1px 4px # ccc;
}

# LinkList1 li a: link, # LinkList1 li a: active, # LinkList1 li a: visited {
color: # 000000;
}

# LinkList1 li a: hover {
/ * Fim de colocar o ponteiro do mouse sobre o link * /
background: # e5e5e5; / * antigos navegadores /
background:-moz-linear de gradiente (de cima, # e5e5e5 2%, # ffffff 100%); / firefox * / *
background:-webkit-gradiente (linear, esquerda esquerda, superior e inferior cor-stop (2%, # e5e5e5), cor-stop (100%, # ffffff)) / * webkit * /
Filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr endColorstr = '# e5e5e5' = '# ffffff', GradientType = 0) / * IE * /
text-shadow: 1px 1px 1px # 000;
}

Azul Botões

# LinkList1 ul {
margin: 0;
padding: 0;
list-style-type: none;
}

# LinkList1 li {
margin: 0;
border: none;
}

# LinkList1 li a {
/ * Estes são os estilos para os links * /
display: block;
width: 180px;
padding: 8px 8px 8px 10px;
background: # a9e4f7, / * antigos navegadores /
background:-moz-linear de gradiente (de cima, a9e4f7 # 0%, # 0fb4e7 100%); / firefox * / *
background:-webkit-gradiente (linear, esquerda esquerda, superior e inferior cor-stop (0%, # a9e4f7), cor-stop (100%, # 0fb4e7)) / * webkit * /
Filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr endColorstr = '# a9e4f7' = '# 0fb4e7' GradientType = 0) / * IE * /
text-decoration: none;
text-align: left;
text-shadow: 0px 1px 1px # c8c8c8;
-Webkit-border-radius: 16px;
-Moz-border-radius: 16px;
border-radius: 16px;
-Moz-box-shadow: 1px 1px 3px # 777;
-Webkit-box-shadow: 1px 1px 4px # ccc;
box-shadow: 1px 1px 4px # ccc;
}

# LinkList1 li a: link, # LinkList1 li a: active, # LinkList1 li a: visited {
color: # 000000;
}

# LinkList1 li a: hover {
/ * Fim de colocar o ponteiro do mouse sobre o link * /
background: # FF11EB, / * antigos navegadores /
background:-moz-linear de gradiente (de cima, FF11EB # 2% # F7AFFF 100%); / firefox * / *
background:-webkit-gradiente (linear, esquerda esquerda, superior e inferior cor-stop (2%, # FF11EB), cor-stop (100%, # F7AFFF)) / * webkit * /
Filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# FF11EB' endColorstr = '# F7AFFF' GradientType = 0) / * IE * /
text-shadow: 1px 1px 1px # 777;
}

Testado : Internet Explorer, incluindo o IE6, Firefox e Google Chrome, os botões têm cantos arredondados olhar direto no IE.


Referências W3Schools


você está em: http://slidedicas.blogspot.com