Esta entrada es complementaria a la del post Cómo hacer Menú Horizontal para Blogger y otros. En esta te presento códigos CSS que puedes utilizar para probar o reemplazar los estilos si así lo deseas.
Puedes elegir un estilo diferente en cuanto a forma y tono de los elementos del menú.
Tienes 3 estilos predefinidos de acuerdo a la forma pero puedes editarlos realizando pequeñas modificaciones, adaptándolo al estilo de tu sitio.
Las imágenes te muestran el tono pre-definido y a continuación el código CSS.
Copia el estilo que elijas y regresa a la entrada Cómo hacer Menú Horizontal para Blogger y otros para que continúes con los pasos. (Te aconsejo que dejes esta pestaña abierta)
BOTONES CON SOMBRA
Estilo de menú #1.
BOTONES CON SOMBRA (TONO AZUL)
/* MENÚ CSS HORIZONTAL BOTONES CON SOMBRA (TONO AZUL) */
#CssMenu1
{
border: 0px #C0C0C0 solid;
background-color: #1E90FF;
}
#CssMenu1 ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#CssMenu1 li
{
float: left;
margin: 0;
padding: 4px 4px 4px 0px;
}
#CssMenu1 a
{
display: block;
float: left;
color: #FFFFFF;
border: 0px #FFFFFF solid;
background-color: #0000FF;
background-image: none;
font-family: Arial;
font-weight: bold;
font-size: 13px;
font-style: normal;
text-decoration: none;
height: 28px;
line-height: 28px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
text-align: center;
-moz-box-shadow: 2px 2px 0px #454545;
-webkit-box-shadow: 2px 2px 0px #454545;
box-shadow: 2px 2px 0px #454545;
}
#CssMenu1 li:hover a, #CssMenu1 a:hover
{
color: #000000;
background-color: #0000FF;
background-image: none;
border: 0px #FFFFFF solid;
}
#CssMenu1 li.firstmain
{
padding-left: 10px;
}
#CssMenu1 li.lastmain
{
padding-right: 4px;
}
#CssMenu1 li:hover, #CssMenu1 li a:hover
{
position: relative;
}
#CssMenu1 a.withsubmenu
{
padding: 0 5px 0 5px;
background-image: none;
}
#CssMenu1 li:hover a.withsubmenu, #CssMenu1 a.withsubmenu:hover
{
background-image: none;
}
#CssMenu1 ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
width: 160px;
height: auto;
border: none;
background-color: #FFFFFF;
-moz-box-shadow: 2px 2px 0px #454545;
-webkit-box-shadow: 2px 2px 0px #454545;
box-shadow: 2px 2px 0px #454545;
}
#CssMenu1 ul :hover ul
{
left: 0px;
top: 36px;
padding-top: 0px;
visibility: visible;
}
#CssMenu1 .firstmain:hover ul
{
left: 4px;
}
#CssMenu1 li li
{
width: 160px;
padding: 0 0px 0px 0px;
border: 0px #C0C0C0 solid;
border-width: 0 0px;
}
#CssMenu1 li li.firstitem
{
border-top: 0px #C0C0C0 solid;
}
#CssMenu1 li li.lastitem
{
border-bottom: 0px #C0C0C0 solid;
}
#CssMenu1 ul ul a, #CssMenu1 ul :hover ul a, #CssMenu1 ul :hover ul :hover ul a
{
float: none;
margin: 0;
width: 148px;
height: auto;
white-space: normal;
padding: 8px 6px 7px 6px;
background-color: #0000FF;
background-image: none;
border: 0px #CCCCCC solid;
border-radius: 1px;
color: #FFFFFF;
font-family: Arial;
font-weight: normal;
font-size: 13px;
font-style: normal;
line-height: 13px;
text-align: left;
text-decoration: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#CssMenu1 ul :hover ul .firstitem a, #CssMenu1 ul :hover ul :hover ul .firstitem a
{
margin-top: 0px;
}
#CssMenu1 ul ul :hover a, #CssMenu1 ul ul a:hover, #CssMenu1 ul ul :hover ul :hover a, #CssMenu1 ul ul :hover ul a:hover, #CssMenu1 ul ul :hover ul :hover ul :hover a, #CssMenu1 ul ul :hover ul :hover ul a:hover
{
background-color: #000000;
background-image: none;
border: 0px #696969 solid;
color: #FFFFFF;
}
#CssMenu1 ul ul a.withsubmenu, #CssMenu1 ul :hover ul a.withsubmenu, #CssMenu1 ul :hover ul :hover ul a.withsubmenu
{
width: 150px;
padding: 8px 5px 7px 5px;
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover, #CssMenu1 ul ul :hover ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover a.withsubmenu:hover
{
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul :hover ul ul, #CssMenu1 ul :hover ul :hover ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
#CssMenu1 ul :hover ul :hover ul, #CssMenu1 ul :hover ul :hover ul :hover ul
{
left: 160px;
top: 0px;
visibility: visible;
}
#CssMenu1 ul :hover ul .firstitem:hover ul, #CssMenu1 ul :hover ul :hover ul .firstitem:hover ul
{
top: 0px;
}
#CssMenu1 br
{
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}
/* Contenedor Formulario de busqueda */
#search {
width: 200px; /* Ancho del buscador */
height: 26px;
float: right;
text-align: center;
margin-top: 4px;
margin-right: 6px;
background:#ffffff;
border-radius:7px;
border-style:inset;
}
/* Caja de busqueda */
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
Estilo de menú #2.
BOTONES CON SOMBRA (TONO MELÓN)
El código CSS es el siguiente:
/* MENÚ CSS HORIZONTAL BOTONES CON SOMBRA (TONO MELON) */
#CssMenu1
{
border: 0px #FF4500 solid;
background-color: #CDA778;
}
#CssMenu1 ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#CssMenu1 li
{
float: left;
margin: 0;
padding: 4px 4px 4px 0px;
}
#CssMenu1 a
{
display: block;
float: left;
color: #000000;
border: 1px #CCCCCC solid;
background-color: #DEB887;
background-image: none;
font-family: Arial;
font-weight: bold;
font-size: 13px;
font-style: normal;
text-decoration: none;
height: 26px;
line-height: 26px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
text-align: center;
-moz-box-shadow: 2px 2px 0px #565656;
-webkit-box-shadow: 2px 2px 0px #565656;
box-shadow: 2px 2px 0px #565656;
}
#CssMenu1 li:hover a, #CssMenu1 a:hover
{
color: #000000;
background-color: #BC9A67;
background-image: none;
border: 1px #696969 solid;
}
#CssMenu1 li.firstmain
{
padding-left: 10px;
}
#CssMenu1 li.lastmain
{
padding-right: 4px;
}
#CssMenu1 li:hover, #CssMenu1 li a:hover
{
position: relative;
}
#CssMenu1 a.withsubmenu
{
padding: 0 5px 0 5px;
background-image: none;
}
#CssMenu1 li:hover a.withsubmenu, #CssMenu1 a.withsubmenu:hover
{
background-image: none;
}
#CssMenu1 ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
width: 160px;
height: auto;
border: none;
background-color: transparent;
-moz-box-shadow: 2px 2px 0px #565656;
-webkit-box-shadow: 2px 2px 0px #565656;
box-shadow: 2px 2px 0px #565656;
}
#CssMenu1 ul :hover ul
{
left: 0px;
top: 36px;
padding-top: 0px;
visibility: visible;
}
#CssMenu1 .firstmain:hover ul
{
left: 4px;
}
#CssMenu1 li li
{
width: 160px;
padding: 0 0px 0px 0px;
border: 0px #C0C0C0 solid;
border-width: 0 0px;
}
#CssMenu1 li li.firstitem
{
border-top: 0px #C0C0C0 solid;
}
#CssMenu1 li li.lastitem
{
border-bottom: 0px #C0C0C0 solid;
}
#CssMenu1 ul ul a, #CssMenu1 ul :hover ul a, #CssMenu1 ul :hover ul :hover ul a
{
float: none;
margin: 0;
width: 148px;
height: auto;
white-space: normal;
padding: 8px 6px 7px 6px;
background-color: #BC9A67;
background-image: none;
border: 0px #CCCCCC solid;
color: #000000;
font-family: Arial;
font-weight: normal;
font-size: 13px;
font-style: normal;
line-height: 13px;
text-align: left;
text-decoration: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#CssMenu1 ul :hover ul .firstitem a, #CssMenu1 ul :hover ul :hover ul .firstitem a
{
margin-top: 0px;
}
#CssMenu1 ul ul :hover a, #CssMenu1 ul ul a:hover, #CssMenu1 ul ul :hover ul :hover a, #CssMenu1 ul ul :hover ul a:hover, #CssMenu1 ul ul :hover ul :hover ul :hover a, #CssMenu1 ul ul :hover ul :hover ul a:hover
{
background-color: #DEB887;
background-image: none;
border: 0px #696969 solid;
color: #000000;
}
#CssMenu1 ul ul a.withsubmenu, #CssMenu1 ul :hover ul a.withsubmenu, #CssMenu1 ul :hover ul :hover ul a.withsubmenu
{
width: 150px;
padding: 8px 5px 7px 5px;
background-image: url(images/flechasubmenublack.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover, #CssMenu1 ul ul :hover ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover a.withsubmenu:hover
{
background-image: url(images/flechasubmenublack.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul :hover ul ul, #CssMenu1 ul :hover ul :hover ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
#CssMenu1 ul :hover ul :hover ul, #CssMenu1 ul :hover ul :hover ul :hover ul
{
left: 160px;
top: 0px;
visibility: visible;
}
#CssMenu1 ul :hover ul .firstitem:hover ul, #CssMenu1 ul :hover ul :hover ul .firstitem:hover ul
{
top: 0px;
}
#CssMenu1 br
{
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}
/* Contenedor Formulario de busqueda */
#search {
width: 200px; /* Ancho del buscador */
height: 26px;
float: right;
text-align: center;
margin-top: 4px;
margin-right: 6px;
background:#ffffff;
border-radius:7px;
border-style:inset;
}
/* Caja de busqueda */
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
Estilo de menú #3.
BOTONES CON SOMBRA (TONO GRIS)
El código CSS para definir el estilo es el siguiente:
/* MENU CSS HORIZONTAL BOTONES CON SOMBRA (TONO GRIS) */
#CssMenu1
{
border: 0px #C0C0C0 solid;
background-color: #C0C0C0;
}
#CssMenu1 ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#CssMenu1 li
{
float: left;
margin: 0;
padding: 4px 4px 4px 0px;
}
#CssMenu1 a
{
display: block;
float: left;
color: #000000;
border: 1px #CCCCCC solid;
background-color: #DCDCDC;
background-image: none;
font-family: Arial;
font-weight: bold;
font-size: 13px;
font-style: normal;
text-decoration: none;
height: 26px;
line-height: 26px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
text-align: center;
-moz-box-shadow: 2px 2px 0px #454545;
-webkit-box-shadow: 2px 2px 0px #454545;
box-shadow: 2px 2px 0px #454545;
}
#CssMenu1 li:hover a, #CssMenu1 a:hover
{
color: #FFFFFF;
background-color: #4F4F4F;
background-image: none;
border: 1px #696969 solid;
}
#CssMenu1 li.firstmain
{
padding-left: 10px;
}
#CssMenu1 li.lastmain
{
padding-right: 4px;
}
#CssMenu1 li:hover, #CssMenu1 li a:hover
{
position: relative;
}
#CssMenu1 a.withsubmenu
{
padding: 0 5px 0 5px;
background-image: none;
}
#CssMenu1 li:hover a.withsubmenu, #CssMenu1 a.withsubmenu:hover
{
background-image: none;
}
#CssMenu1 ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
width: 160px;
height: auto;
border: none;
background-color: #FFFFFF;
-moz-box-shadow: 2px 2px 0px #454545;
-webkit-box-shadow: 2px 2px 0px #454545;
box-shadow: 2px 2px 0px #454545;
}
#CssMenu1 ul :hover ul
{
left: 0px;
top: 36px;
padding-top: 0px;
visibility: visible;
}
#CssMenu1 .firstmain:hover ul
{
left: 4px;
}
#CssMenu1 li li
{
width: 160px;
padding: 0 0px 0px 0px;
border: 0px #C0C0C0 solid;
border-width: 0 0px;
}
#CssMenu1 li li.firstitem
{
border-top: 0px #C0C0C0 solid;
}
#CssMenu1 li li.lastitem
{
border-bottom: 0px #C0C0C0 solid;
}
#CssMenu1 ul ul a, #CssMenu1 ul :hover ul a, #CssMenu1 ul :hover ul :hover ul a
{
float: none;
margin: 0;
width: 148px;
height: auto;
white-space: normal;
padding: 8px 6px 7px 6px;
background-color: #4F4F4F;
background-image: none;
border: 0px #CCCCCC solid;
color: #F5F5F5;
font-family: Arial;
font-weight: normal;
font-size: 13px;
font-style: normal;
line-height: 13px;
text-align: left;
text-decoration: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#CssMenu1 ul :hover ul .firstitem a, #CssMenu1 ul :hover ul :hover ul .firstitem a
{
margin-top: 0px;
}
#CssMenu1 ul ul :hover a, #CssMenu1 ul ul a:hover, #CssMenu1 ul ul :hover ul :hover a, #CssMenu1 ul ul :hover ul a:hover, #CssMenu1 ul ul :hover ul :hover ul :hover a, #CssMenu1 ul ul :hover ul :hover ul a:hover
{
background-color: #000000;
background-image: none;
border: 0px #696969 solid;
color: #FFFFFF;
}
#CssMenu1 ul ul a.withsubmenu, #CssMenu1 ul :hover ul a.withsubmenu, #CssMenu1 ul :hover ul :hover ul a.withsubmenu
{
width: 150px;
padding: 8px 5px 7px 5px;
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover, #CssMenu1 ul ul :hover ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover a.withsubmenu:hover
{
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul :hover ul ul, #CssMenu1 ul :hover ul :hover ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
#CssMenu1 ul :hover ul :hover ul, #CssMenu1 ul :hover ul :hover ul :hover ul
{
left: 160px;
top: 0px;
visibility: visible;
}
#CssMenu1 ul :hover ul .firstitem:hover ul, #CssMenu1 ul :hover ul :hover ul .firstitem:hover ul
{
top: 0px;
}
#CssMenu1 br
{
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}
/* Contenedor Formulario de busqueda */
#search {
width: 200px; /* Ancho del buscador */
height: 26px;
float: right;
text-align: center;
margin-top: 4px;
margin-right: 6px;
background:#ffffff;
border-radius:7px;
border-style:inset;
}
/* Caja de busqueda */
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
FORMATO PLANO
Estilo de menú #1.
FORMATO PLANO (TONO CELESTE)
El código CSS es el siguiente:
/* MENU CSS HORIZONTAL FORMATO PLANO (TONO CELESTE) */
#CssMenu1
{
border: 0px #C0C0C0 solid;
background-color: #1E90FF;
}
#CssMenu1 ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#CssMenu1 li
{
float: left;
margin: 0;
padding: 4px 4px 4px 0px;
}
#CssMenu1 a
{
display: block;
float: left;
color: #FFFFFF;
border: 0px #FFFFFF none;
background-color: transparent;
background-image: none;
font-family: Arial;
font-weight: bold;
font-size: 13px;
font-style: normal;
text-decoration: none;
height: 28px;
line-height: 28px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
text-align: center;
}
#CssMenu1 li:hover a, #CssMenu1 a:hover
{
color: #000000;
background-color: transparent;
background-image: none;
border: 0px #FFFFFF none;
}
#CssMenu1 li.firstmain
{
padding-left: 4px;
}
#CssMenu1 li.lastmain
{
padding-right: 4px;
}
#CssMenu1 li:hover, #CssMenu1 li a:hover
{
position: relative;
}
#CssMenu1 a.withsubmenu
{
padding: 0 5px 0 5px;
background-image: none;
}
#CssMenu1 li:hover a.withsubmenu, #CssMenu1 a.withsubmenu:hover
{
background-image: none;
}
#CssMenu1 ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
width: 160px;
height: auto;
border: none;
background-color: #FFFFFF;
}
#CssMenu1 ul :hover ul
{
left: 0px;
top: 36px;
padding-top: 0px;
visibility: visible;
}
#CssMenu1 .firstmain:hover ul
{
left: 4px;
}
#CssMenu1 li li
{
width: 160px;
padding: 0 0px 0px 0px;
border: 0px #C0C0C0 solid;
border-width: 0 0px;
}
#CssMenu1 li li.firstitem
{
border-top: 0px #C0C0C0 solid;
}
#CssMenu1 li li.lastitem
{
border-bottom: 0px #C0C0C0 solid;
}
#CssMenu1 ul ul a, #CssMenu1 ul :hover ul a, #CssMenu1 ul :hover ul :hover ul a
{
float: none;
margin: 0;
width: 148px;
height: auto;
white-space: normal;
padding: 8px 6px 7px 6px;
background-color: #1E90FF;
background-image: none;
border: 0px #CCCCCC none;
border-radius: 0px;
color: #FFFFFF;
font-family: Arial;
font-weight: normal;
font-size: 13px;
font-style: normal;
line-height: 13px;
text-align: left;
text-decoration: none;
}
#CssMenu1 ul :hover ul .firstitem a, #CssMenu1 ul :hover ul :hover ul .firstitem a
{
margin-top: 0px;
}
#CssMenu1 ul ul :hover a, #CssMenu1 ul ul a:hover, #CssMenu1 ul ul :hover ul :hover a, #CssMenu1 ul ul :hover ul a:hover, #CssMenu1 ul ul :hover ul :hover ul :hover a, #CssMenu1 ul ul :hover ul :hover ul a:hover
{
background-color: #000000;
background-image: none;
border: 0px #696969 none;
color: #FFFFFF;
}
#CssMenu1 ul ul a.withsubmenu, #CssMenu1 ul :hover ul a.withsubmenu, #CssMenu1 ul :hover ul :hover ul a.withsubmenu
{
width: 150px;
padding: 8px 5px 7px 5px;
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover, #CssMenu1 ul ul :hover ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover a.withsubmenu:hover
{
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul :hover ul ul, #CssMenu1 ul :hover ul :hover ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
#CssMenu1 ul :hover ul :hover ul, #CssMenu1 ul :hover ul :hover ul :hover ul
{
left: 160px;
top: 0px;
visibility: visible;
}
#CssMenu1 ul :hover ul .firstitem:hover ul, #CssMenu1 ul :hover ul :hover ul .firstitem:hover ul
{
top: 0px;
}
#CssMenu1 br
{
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}
/* Contenedor Formulario de busqueda */
#search {
width: 200px; /* Ancho del buscador */
height: 26px;
float: right;
text-align: center;
margin-top: 4px;
margin-right: 6px;
background:#ffffff;
border-radius:7px;
border-style:inset;
}
/* Caja de busqueda */
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
Estilo de menú #2.
FORMATO PLANO (TONO GRIS)
El código CSS es el siguiente:
/* MENU CSS HORIZONTAL FORMATO PLANO (TONO GRIS) */
#CssMenu1
{
border: 0px #C0C0C0 solid;
background-color: #C0C0C0;
}
#CssMenu1 ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#CssMenu1 li
{
float: left;
margin: 0;
padding: 4px 4px 4px 0px;
}
#CssMenu1 a
{
display: block;
float: left;
color: #000000;
border: 0px #CCCCCC solid;
background-color: transparent;
background-image: none;
font-family: Arial;
font-weight: bold;
font-size: 13px;
font-style: normal;
text-decoration: none;
height: 28px;
line-height: 28px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
text-align: center;
}
#CssMenu1 li:hover a, #CssMenu1 a:hover
{
color: #FFFFFF;
background-color: transparent;
background-image: none;
border: 0px #696969 solid;
}
#CssMenu1 li.firstmain
{
padding-left: 4px;
}
#CssMenu1 li.lastmain
{
padding-right: 4px;
}
#CssMenu1 li:hover, #CssMenu1 li a:hover
{
position: relative;
}
#CssMenu1 a.withsubmenu
{
padding: 0 5px 0 5px;
background-image: none;
}
#CssMenu1 li:hover a.withsubmenu, #CssMenu1 a.withsubmenu:hover
{
background-image: none;
}
#CssMenu1 ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
width: 160px;
height: auto;
border: none;
background-color: #FFFFFF;
}
#CssMenu1 ul :hover ul
{
left: 0px;
top: 36px;
padding-top: 0px;
visibility: visible;
}
#CssMenu1 .firstmain:hover ul
{
left: 4px;
}
#CssMenu1 li li
{
width: 160px;
padding: 0 0px 0px 0px;
border: 0px #C0C0C0 solid;
border-width: 0 0px;
}
#CssMenu1 li li.firstitem
{
border-top: 0px #C0C0C0 solid;
}
#CssMenu1 li li.lastitem
{
border-bottom: 0px #C0C0C0 solid;
}
#CssMenu1 ul ul a, #CssMenu1 ul :hover ul a, #CssMenu1 ul :hover ul :hover ul a
{
float: none;
margin: 0;
width: 148px;
height: auto;
white-space: normal;
padding: 8px 6px 7px 6px;
background-color: #4F4F4F;
background-image: none;
border: 0px #CCCCCC solid;
color: #F5F5F5;
font-family: Arial;
font-weight: normal;
font-size: 13px;
font-style: normal;
line-height: 13px;
text-align: left;
text-decoration: none;
}
#CssMenu1 ul :hover ul .firstitem a, #CssMenu1 ul :hover ul :hover ul .firstitem a
{
margin-top: 0px;
}
#CssMenu1 ul ul :hover a, #CssMenu1 ul ul a:hover, #CssMenu1 ul ul :hover ul :hover a, #CssMenu1 ul ul :hover ul a:hover, #CssMenu1 ul ul :hover ul :hover ul :hover a, #CssMenu1 ul ul :hover ul :hover ul a:hover
{
background-color: #000000;
background-image: none;
border: 0px #696969 solid;
color: #FFFFFF;
}
#CssMenu1 ul ul a.withsubmenu, #CssMenu1 ul :hover ul a.withsubmenu, #CssMenu1 ul :hover ul :hover ul a.withsubmenu
{
width: 150px;
padding: 8px 5px 7px 5px;
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover, #CssMenu1 ul ul :hover ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover a.withsubmenu:hover
{
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul :hover ul ul, #CssMenu1 ul :hover ul :hover ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
#CssMenu1 ul :hover ul :hover ul, #CssMenu1 ul :hover ul :hover ul :hover ul
{
left: 160px;
top: 0px;
visibility: visible;
}
#CssMenu1 ul :hover ul .firstitem:hover ul, #CssMenu1 ul :hover ul :hover ul .firstitem:hover ul
{
top: 0px;
}
#CssMenu1 br
{
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}
/* Contenedor Formulario de busqueda */
#search {
width: 200px; /* Ancho del buscador */
height: 26px;
float: right;
text-align: center;
margin-top: 4px;
margin-right: 6px;
background:#ffffff;
border-radius:7px;
border-style:inset;
}
/* Caja de busqueda */
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
Estilo de menú #3.
FORMATO PLANO (TONO MELÓN)
El código CSS es el siguiente:
/* MENU CSS HORIZONTAL FORMATO PLANO (TONO MELÓN) */
#CssMenu1
{
border: 0px #FF4500 solid;
background-color: #CDA778;
}
#CssMenu1 ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#CssMenu1 li
{
float: left;
margin: 0;
padding: 4px 4px 4px 0px;
}
#CssMenu1 a
{
display: block;
float: left;
color: #000000;
border: 0px #CCCCCC none;
background-color: transparent;
background-image: none;
font-family: Arial;
font-weight: bold;
font-size: 13px;
font-style: normal;
text-decoration: none;
height: 28px;
line-height: 28px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
text-align: center;
}
#CssMenu1 li:hover a, #CssMenu1 a:hover
{
color: #000000;
background-color: transparent;
background-image: none;
border: 0px #696969 none;
}
#CssMenu1 li.firstmain
{
padding-left: 4px;
}
#CssMenu1 li.lastmain
{
padding-right: 4px;
}
#CssMenu1 li:hover, #CssMenu1 li a:hover
{
position: relative;
}
#CssMenu1 a.withsubmenu
{
padding: 0 5px 0 5px;
background-image: none;
}
#CssMenu1 li:hover a.withsubmenu, #CssMenu1 a.withsubmenu:hover
{
background-image: none;
}
#CssMenu1 ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
width: 160px;
height: auto;
border: none;
background-color: transparent;
}
#CssMenu1 ul :hover ul
{
left: 0px;
top: 36px;
padding-top: 0px;
visibility: visible;
}
#CssMenu1 .firstmain:hover ul
{
left: 4px;
}
#CssMenu1 li li
{
width: 160px;
padding: 0 0px 0px 0px;
border: 0px #C0C0C0 solid;
border-width: 0 0px;
}
#CssMenu1 li li.firstitem
{
border-top: 0px #C0C0C0 solid;
}
#CssMenu1 li li.lastitem
{
border-bottom: 0px #C0C0C0 solid;
}
#CssMenu1 ul ul a, #CssMenu1 ul :hover ul a, #CssMenu1 ul :hover ul :hover ul a
{
float: none;
margin: 0;
width: 148px;
height: auto;
white-space: normal;
padding: 8px 6px 7px 6px;
background-color: #BC9A67;
background-image: none;
border: 0px #CCCCCC none;
color: #000000;
font-family: Arial;
font-weight: normal;
font-size: 13px;
font-style: normal;
line-height: 13px;
text-align: left;
text-decoration: none;
}
#CssMenu1 ul :hover ul .firstitem a, #CssMenu1 ul :hover ul :hover ul .firstitem a
{
margin-top: 0px;
}
#CssMenu1 ul ul :hover a, #CssMenu1 ul ul a:hover, #CssMenu1 ul ul :hover ul :hover a, #CssMenu1 ul ul :hover ul a:hover, #CssMenu1 ul ul :hover ul :hover ul :hover a, #CssMenu1 ul ul :hover ul :hover ul a:hover
{
background-color: #DEB887;
background-image: none;
border: 0px #696969 none;
color: #000000;
}
#CssMenu1 ul ul a.withsubmenu, #CssMenu1 ul :hover ul a.withsubmenu, #CssMenu1 ul :hover ul :hover ul a.withsubmenu
{
width: 150px;
padding: 8px 5px 7px 5px;
background-image: url(images/flechasubmenublack.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover, #CssMenu1 ul ul :hover ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover a.withsubmenu:hover
{
background-image: url(images/flechasubmenublack.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul :hover ul ul, #CssMenu1 ul :hover ul :hover ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
#CssMenu1 ul :hover ul :hover ul, #CssMenu1 ul :hover ul :hover ul :hover ul
{
left: 160px;
top: 0px;
visibility: visible;
}
#CssMenu1 ul :hover ul .firstitem:hover ul, #CssMenu1 ul :hover ul :hover ul .firstitem:hover ul
{
top: 0px;
}
#CssMenu1 br
{
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}
/* Contenedor Formulario de busqueda */
#search {
width: 200px; /* Ancho del buscador */
height: 26px;
float: right;
text-align: center;
margin-top: 4px;
margin-right: 6px;
background:#ffffff;
border-radius:7px;
border-style:inset;
}
/* Caja de busqueda */
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
BOTONES REDONDEADOS
Estilo de menú #1.
BOTONES REDONDEADOS (TONO GRIS)
El código CSS es el siguiente:
/* MENU CSS HORIZONTAL BOTONES REDONDEADOS (TONO GRIS) */
#CssMenu1
{
border: 0px #C0C0C0 solid;
border-radius: 10px;
background-color: #C0C0C0;
}
#CssMenu1 ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#CssMenu1 li
{
float: left;
margin: 0;
padding: 4px 4px 4px 0px;
}
#CssMenu1 a
{
display: block;
float: left;
color: #000000;
border: 1px #CCCCCC solid;
border-radius: 10px;
background-color: #DCDCDC;
background-image: none;
font-family: Arial;
font-weight: bold;
font-size: 13px;
font-style: normal;
text-decoration: none;
height: 26px;
line-height: 26px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
text-align: center;
-moz-box-shadow: 2px 2px 0px #454545;
-webkit-box-shadow: 2px 2px 0px #454545;
box-shadow: 2px 2px 0px #454545;
}
#CssMenu1 li:hover a, #CssMenu1 a:hover
{
color: #FFFFFF;
background-color: #4F4F4F;
background-image: none;
border: 1px #696969 solid;
}
#CssMenu1 li.firstmain
{
padding-left: 10px;
}
#CssMenu1 li.lastmain
{
padding-right: 4px;
}
#CssMenu1 li:hover, #CssMenu1 li a:hover
{
position: relative;
}
#CssMenu1 a.withsubmenu
{
padding: 0 5px 0 5px;
background-image: none;
}
#CssMenu1 li:hover a.withsubmenu, #CssMenu1 a.withsubmenu:hover
{
background-image: none;
}
#CssMenu1 ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
width: 160px;
height: auto;
border: none;
background-color: transparent;
}
#CssMenu1 ul :hover ul
{
left: 0px;
top: 36px;
padding-top: 0px;
visibility: visible;
}
#CssMenu1 .firstmain:hover ul
{
left: 4px;
}
#CssMenu1 li li
{
width: 160px;
padding: 0 0px 0px 0px;
border: 0px #C0C0C0 solid;
border-width: 0 0px;
}
#CssMenu1 li li.firstitem
{
border-top: 0px #4F4F4F solid;
-moz-border-top-left-radius: 7px;
-webkit-border-top-left-radius: 7px;
border-top-left-radius: 7px;
-moz-border-top-right-radius: 7px;
-webkit-border-top-right-radius: 7px;
border-top-right-radius: 7px;
}
#CssMenu1 li li.lastitem
{
border-bottom: 5px #4F4F4F solid;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#CssMenu1 ul ul a, #CssMenu1 ul :hover ul a, #CssMenu1 ul :hover ul :hover ul a
{
float: none;
margin: 0;
width: 148px;
height: auto;
white-space: normal;
padding: 8px 6px 7px 6px;
background-color: #4F4F4F;
background-image: none;
border: 0px #CCCCCC solid;
border-radius: 0;
color: #F5F5F5;
font-family: Arial;
font-weight: normal;
font-size: 13px;
font-style: normal;
line-height: 13px;
text-align: left;
text-decoration: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#CssMenu1 ul :hover ul .firstitem a, #CssMenu1 ul :hover ul :hover ul .firstitem a
{
margin-top: 0px;
}
#CssMenu1 ul ul :hover a, #CssMenu1 ul ul a:hover, #CssMenu1 ul ul :hover ul :hover a, #CssMenu1 ul ul :hover ul a:hover, #CssMenu1 ul ul :hover ul :hover ul :hover a, #CssMenu1 ul ul :hover ul :hover ul a:hover
{
background-color: #000000;
background-image: none;
border: 0px #696969 solid;
color: #FFFFFF;
}
#CssMenu1 ul ul a.withsubmenu, #CssMenu1 ul :hover ul a.withsubmenu, #CssMenu1 ul :hover ul :hover ul a.withsubmenu
{
width: 150px;
padding: 8px 5px 7px 5px;
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover, #CssMenu1 ul ul :hover ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover a.withsubmenu:hover
{
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul :hover ul ul, #CssMenu1 ul :hover ul :hover ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
#CssMenu1 ul :hover ul :hover ul, #CssMenu1 ul :hover ul :hover ul :hover ul
{
left: 160px;
top: 0px;
visibility: visible;
}
#CssMenu1 ul :hover ul .firstitem:hover ul, #CssMenu1 ul :hover ul :hover ul .firstitem:hover ul
{
top: 0px;
}
#CssMenu1 br
{
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}
/* Contenedor Formulario de busqueda */
#search {
width: 200px; /* Ancho del buscador */
height: 26px;
float: right;
text-align: center;
margin-top: 4px;
margin-right: 6px;
background:#ffffff;
border-radius:20px;
border-style:inset;
}
/* Caja de busqueda */
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
Estilo de menú #2.
BOTONES REDONDEADOS (TONO AZUL)
El código CSS es el siguiente:
/* MENU CSS HORIZONTAL BOTONES REDONDEADOS (TONO AZUL) */
#CssMenu1
{
border: 0px #C0C0C0 solid;
border-radius: 10px;
background-color: #1E90FF;
}
#CssMenu1 ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#CssMenu1 li
{
float: left;
margin: 0;
padding: 4px 4px 4px 0px;
}
#CssMenu1 a
{
display: block;
float: left;
color: #FFFFFF;
border: 0px #FFFFFF solid;
border-radius: 10px;
background-color: #0000FF;
background-image: none;
font-family: Arial;
font-weight: bold;
font-size: 13px;
font-style: normal;
text-decoration: none;
height: 28px;
line-height: 28px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
text-align: center;
-moz-box-shadow: 2px 2px 0px #454545;
-webkit-box-shadow: 2px 2px 0px #454545;
box-shadow: 2px 2px 0px #454545;
}
#CssMenu1 li:hover a, #CssMenu1 a:hover
{
color: #000000;
background-color: #0000FF;
background-image: none;
border: 0px #FFFFFF solid;
}
#CssMenu1 li.firstmain
{
padding-left: 10px;
}
#CssMenu1 li.lastmain
{
padding-right: 4px;
}
#CssMenu1 li:hover, #CssMenu1 li a:hover
{
position: relative;
}
#CssMenu1 a.withsubmenu
{
padding: 0 5px 0 5px;
background-image: none;
}
#CssMenu1 li:hover a.withsubmenu, #CssMenu1 a.withsubmenu:hover
{
background-image: none;
}
#CssMenu1 ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
width: 160px;
height: auto;
border: none;
background-color: transparent;
}
#CssMenu1 ul :hover ul
{
left: 0px;
top: 36px;
padding-top: 0px;
visibility: visible;
}
#CssMenu1 .firstmain:hover ul
{
left: 4px;
}
#CssMenu1 li li
{
width: 160px;
padding: 0 0px 0px 0px;
border: 0px #C0C0C0 solid;
border-width: 0 0px;
}
#CssMenu1 li li.firstitem
{
border-top: 0px #0000FF solid;
-moz-border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
}
#CssMenu1 li li.lastitem
{
border-bottom: 5px #0000FF solid;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#CssMenu1 ul ul a, #CssMenu1 ul :hover ul a, #CssMenu1 ul :hover ul :hover ul a
{
float: none;
margin: 0;
width: 148px;
height: auto;
white-space: normal;
padding: 8px 6px 7px 6px;
background-color: #0000FF;
background-image: none;
border: 0px #CCCCCC solid;
border-radius: 0;
color: #FFFFFF;
font-family: Arial;
font-weight: normal;
font-size: 13px;
font-style: normal;
line-height: 13px;
text-align: left;
text-decoration: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#CssMenu1 ul :hover ul .firstitem a, #CssMenu1 ul :hover ul :hover ul .firstitem a
{
margin-top: 0px;
}
#CssMenu1 ul ul :hover a, #CssMenu1 ul ul a:hover, #CssMenu1 ul ul :hover ul :hover a, #CssMenu1 ul ul :hover ul a:hover, #CssMenu1 ul ul :hover ul :hover ul :hover a, #CssMenu1 ul ul :hover ul :hover ul a:hover
{
background-color: #000000;
background-image: none;
border: 0px #696969 solid;
color: #FFFFFF;
}
#CssMenu1 ul ul a.withsubmenu, #CssMenu1 ul :hover ul a.withsubmenu, #CssMenu1 ul :hover ul :hover ul a.withsubmenu
{
width: 150px;
padding: 8px 5px 7px 5px;
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover, #CssMenu1 ul ul :hover ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover a.withsubmenu:hover
{
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul :hover ul ul, #CssMenu1 ul :hover ul :hover ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
#CssMenu1 ul :hover ul :hover ul, #CssMenu1 ul :hover ul :hover ul :hover ul
{
left: 160px;
top: 0px;
visibility: visible;
}
#CssMenu1 ul :hover ul .firstitem:hover ul, #CssMenu1 ul :hover ul :hover ul .firstitem:hover ul
{
top: 0px;
}
#CssMenu1 br
{
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}
/* Contenedor Formulario de busqueda */
#search {
width: 200px; /* Ancho del buscador */
height: 26px;
float: right;
text-align: center;
margin-top: 4px;
margin-right: 6px;
background:#ffffff;
border-radius:20px;
border-style:inset;
}
/* Caja de busqueda */
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
Estilo de menú #3.
BOTONES REDONDEADOS (TONO MELÓN)
El código CSS es el siguiente:
/* MENU CSS HORIZONTAL BOTONES REDONDEADOS (TONO MELON) */
#CssMenu1
{
border: 0px #FF4500 solid;
border-radius: 10px;
background-color: #CDA778;
}
#CssMenu1 ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#CssMenu1 li
{
float: left;
margin: 0;
padding: 4px 4px 4px 0px;
}
#CssMenu1 a
{
display: block;
float: left;
color: #000000;
border: 0px #CCCCCC solid;
border-radius: 10px;
background-color: #DEB887;
background-image: none;
font-family: Arial;
font-weight: bold;
font-size: 13px;
font-style: normal;
text-decoration: none;
height: 28px;
line-height: 28px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
text-align: center;
-moz-box-shadow: 2px 2px 0px #565656;
-webkit-box-shadow: 2px 2px 0px #565656;
box-shadow: 2px 2px 0px #565656;
}
#CssMenu1 li:hover a, #CssMenu1 a:hover
{
color: #000000;
background-color: #BC9A67;
background-image: none;
border: 0px #696969 solid;
}
#CssMenu1 li.firstmain
{
padding-left: 10px;
}
#CssMenu1 li.lastmain
{
padding-right: 4px;
}
#CssMenu1 li:hover, #CssMenu1 li a:hover
{
position: relative;
}
#CssMenu1 a.withsubmenu
{
padding: 0 5px 0 5px;
background-image: none;
}
#CssMenu1 li:hover a.withsubmenu, #CssMenu1 a.withsubmenu:hover
{
background-image: none;
}
#CssMenu1 ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
width: 160px;
height: auto;
border: none;
background-color: transparent;
}
#CssMenu1 ul :hover ul
{
left: 0px;
top: 36px;
padding-top: 0px;
visibility: visible;
}
#CssMenu1 .firstmain:hover ul
{
left: 4px;
}
#CssMenu1 li li
{
width: 160px;
padding: 0 0px 0px 0px;
border: 0px #C0C0C0 solid;
border-width: 0 0px;
}
#CssMenu1 li li.firstitem
{
border-top: 0px #BC9A67 solid;
}
#CssMenu1 li li.lastitem
{
border-bottom: 5px #BC9A67 solid;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#CssMenu1 ul ul a, #CssMenu1 ul :hover ul a, #CssMenu1 ul :hover ul :hover ul a
{
float: none;
margin: 0;
width: 148px;
height: auto;
white-space: normal;
padding: 8px 6px 7px 6px;
background-color: #BC9A67;
background-image: none;
border: 0px #CCCCCC solid;
border-radius: 0;
color: #000000;
font-family: Arial;
font-weight: normal;
font-size: 13px;
font-style: normal;
line-height: 13px;
text-align: left;
text-decoration: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#CssMenu1 ul :hover ul .firstitem a, #CssMenu1 ul :hover ul :hover ul .firstitem a
{
margin-top: 0px;
}
#CssMenu1 ul ul :hover a, #CssMenu1 ul ul a:hover, #CssMenu1 ul ul :hover ul :hover a, #CssMenu1 ul ul :hover ul a:hover, #CssMenu1 ul ul :hover ul :hover ul :hover a, #CssMenu1 ul ul :hover ul :hover ul a:hover
{
background-color: #DEB887;
background-image: none;
border: 0px #696969 solid;
color: #000000;
}
#CssMenu1 ul ul a.withsubmenu, #CssMenu1 ul :hover ul a.withsubmenu, #CssMenu1 ul :hover ul :hover ul a.withsubmenu
{
width: 150px;
padding: 8px 5px 7px 5px;
background-image: url(images/flechasubmenublack.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover, #CssMenu1 ul ul :hover ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover a.withsubmenu:hover
{
background-image: url(images/flechasubmenublack.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul :hover ul ul, #CssMenu1 ul :hover ul :hover ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
#CssMenu1 ul :hover ul :hover ul, #CssMenu1 ul :hover ul :hover ul :hover ul
{
left: 160px;
top: 0px;
visibility: visible;
}
#CssMenu1 ul :hover ul .firstitem:hover ul, #CssMenu1 ul :hover ul :hover ul .firstitem:hover ul
{
top: 0px;
}
#CssMenu1 br
{
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}
/* Contenedor Formulario de busqueda */
#search {
width: 200px; /* Ancho del buscador */
height: 26px;
float: right;
text-align: center;
margin-top: 4px;
margin-right: 6px;
background:#ffffff;
border-radius:20px;
border-style:inset;
}
/* Caja de busqueda */
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
Recuerda que puedes editar el CSS, de acuerdo a los colores y fuentes de tu sitio.
Si deseas insertar el CSS en una plataforma No Blogger, deberás insertarlo antes de la etiqueta </head> y entre las etiquetas <style > y </style>, por ejemplo:
<style type=”text/css”>
…Aquí pegas código CSS…
</style>
</head>
En Blogger, también puedes hacerlo, pero para que no toques las plantilla, el código CSS puedes insertarlo tal como te lo muestro, utilizando las opciones:
- Tema (o Diseño)
- Personalizar (o Diseñador de temas)
- Opciones avanzadas
- Agregar CSS (aparece como última opción en el menú desplegable que comienza con texto de la página)
- Más sobre el autor
Me encantan los blogs y todo lo que se puede aprender con ellos.
Me desempeñé como profesor de sistemas informáticos unos años de mi vida. Estudios de Licenciatura en Publicidad y Marketing. Tnlgo. en Sistemas de Computación, enseñando lo poco o mucho que puedo saber y ahora con gusto lo comparto con ustedes.
Soy autor y fundador de este sitio. Me encantan los blogs y todo lo que se puede aprender con ellos.
Unos años de mi vida me desempeñé como técnico en una empresa de telecomunicaciones y otros como profesor de sistemas informáticos, enseñando lo poco o mucho que puedo saber y ahora lo comparto con ustedes.
En casa, no le huyo a preparar recetas de cocina, sobre todo si se trata de compartir la mesa con mis hijos. Me gusta también ver la vida en el proceso de las plantas y el respeto a los animales.
Tengo estudios formales de Tecnología en Sistemas de Computación y Licenciatura en Publicidad y Marketing. Aunque sobre varias temáticas me gusta ser autodidacta y experimentar para obtener resultados que pueda compartir de manera confiable.
Sin embargo, respecto a mi formación, regularmente evito me llamen por título y simplemente soy Vicente Ramírez, un instructor, un papá, un amigo. Y es que en ocasiones he escuchado cuando a alguien le preguntan por su nombre y responde… Mi nombre es “Ingeniero Juan Pérez” o “Master Ana Piguave”, por lo que me pregunto si sus padres le habrán puesto por nombre “Ingeniero” o “Master” (😃 Je, je, je, una cosa es el nombre, otra cosa es la profesión).
Realmente me apasiona el emprendimiento combinado con la tecnología, por lo que me he dado impulso para gestionar con mi proyecto web actual, plasmando este blog en el que se incluyen varias temáticas.
Así, esta web nace con la vocación de ser un sitio para compartir y divulgar estos conocimientos combinados con el de otros autores que poco a poco se van integrando.
Comparte tu enlace