Blog

PRUEBAS INICIALES

Entrada destacada

PÁGINA DE BIENVENIDA

PÁGINA DE BIENVENIDA

MENÚ VERTICAL DE COLORES CON CSS

by - agosto 03, 2019

MENÚ VERTICAL DE COLORES CON CSS .




Para los que querais poner en vuestro blog o web un menú vertical colorido y chulo, aqui teneis uno que os gustara. Para añadirlo solo tienes que seguir estos dos pasos:

Para ponerlo a nuestro blog, editamos un gadget de HTML y en su interior añadimos:

1-Un clic en “Diseño”

                                                                         

2-Clic en “Añadir un gadget”

                                                                   

3-Busca el widget que dice “HTML-Javascript” y ábrelo

                                                                               

4-Coloca el siguiente codigo en el interior

                                                                               





<div id="menucolor"> <ul> <li><a href="URL">ENLACE 1</a></li>  <li><a href="URL" class="green">ENLACE 2</a></li>  <li><a href="URL" class="blue">ENLACE 3</a></li>  <li><a href="URL" class="orange">ENLACE 4</a></li>  <li><a href="URL" class="brn">ENLACE 5</a></li>   </ul></div>


Despues de haber insertado el código, un clic en  "Guardar"



Si queremos añadir más enlaces bastará con añadir tantas lineas como enlaces deseamos añadir.
---------------------------------------------------
<li><a href="URL">ENLACE 1</a></li>
<li><a href="URL">ENLACE 2</a></li>
---------------------------------------------------

Guardamos los cambios y para añadir todos lso colores en el Menú tendreis que colocae estas lineas de codigo en la plantilla edición de HTML justo antes de ]]></b:skin> añadimos los estilos:

1 Un clic en “Plantilla”

                                                                                       



   2 Un clic en “Editar HTML”  

                                                                         


  Ahora se te abrirá el Editor HTML de tu plantilla

                                                                                     


En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, 

                                                                                  

3 Busca el siguiente código


]></b:skin> 

                                                                                      


4 Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo antes  del código que encontraste


{ margin:0;  padding:0; } body{  background:#fff;  color:#666;   font:18px/18px Tahoma, Arial, Helvetica, sans-serif;  }  #menucolor{  background:#fff;;  width:250px;  }  #menucolor ul{  list-style:none;  }  #menucolor li{  list-style:none;  margin:0px 0;  }  #menucolor li a{  list-style:none;   background:#82837c;  color:#fff;  text-transform:uppercase;  font-size:11px;  font-weight:bold;  text-decoration:none;  border:solid #777776;  border-width:0 6px 0 6px;  display:block;  height:30px;  line-height:30px;  padding:0 0 0 10px;  }  #menucolor li a:hover{  background:#777776;  color:#fff;  text-decoration:none;  }  #menucolor li a.green{  background:#83ad3e;  border:solid #6f9234;  border-width:0 6px 0 6px;  }  #menucolor li a:hover.green{  background:#6f9234;  }  #menucolor li a.blue{  background:#4396bd;  border:solid #377e9f;  border-width:0 6px 0 6px;  }<br />  #menucolor li a:hover.blue{  background:#377e9f;  }  #menucolor li a.orange{  background:#ff7327;  border:solid #d65611;  border-width:0 6px 0 6px;  }  #menucolor li a:hover.orange{  background:#d65611;  }  #menucolor li a.brn{  background:#a53cbe;  border:solid #87249f;  border-width:0 6px 0 6px;  }  #menucolor li a:hover.brn{  background:#87249f;  }

Añadimos nuestros enlaces editando el gadget de HTML y sustituyendo el texto que hará de enlace por nuestro texto, dode pone URL lo sustituimos por la url del sitio que vamos a enlazar.



Fecha de la Publicación;03-08-2019

 Fuente; redeando

 Publicado por;                                                                         







You May Also Like

0 Comments

Paginacion