
En este dia te traigo un lindo menu con curvas y brillo para tu blog de blogger. Te explicare como añadirlo este funciona excelentemente bien en la mayoria de los navegadores,puedes enlazar tus paginas principales usando un marco de coneccion de navegacion.En este se utiliza Css3 y HTML.
Puedes ver el ejemplo en vivo en el siguiente enlace http://jquerysimples.blogspot.com/
Los pasos para añadirlo son los siguientes
1.Entra a la cuenta de Blogger
2.Seleciona la Plantilla
3. Da Click en boton de EDITAR HTML
4. Encuentra esta etiqueta ]]></b:skin> usando Ctrl+F
5. Pegue el codigo de abajo antes de la etiqueta ]]></b:skin>
/* El Codigo de CSS para el menu empieza aqui ciudadblogger.info */
.cbg_glossymenu1{
position: relative;padding: 0 0 0 34px;margin: 0 auto 0 auto;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-eTZZbN5GERJRz4cNsvHvVOJAbO5xNo8ErBoJY5DdGoXzKmEsyIW13kIOG-XnKd0I3Q-jYTwtgJcZ4AUQF1h307m27qgdNeLc8EgVfmhwp1L9g46iYv14gVXGzrqoUOEOHtLykk1Kx0/s1600/btrix_menupu_bg.gif) repeat-x;
height: 46px;
list-style: none;
}
.cbg_glossymenu1 li{
float:left;
}
.cbg_glossymenu1 li a{
float: left;display: block;color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.cbg_glossymenu1 li a b{
float: left;display: block;padding: 0 24px 0 8px;
}
.cbg_glossymenu1 li.current a, .cbg_glossymenu1 li a:hover{
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi0npS8Vo2E70NTqV7-c0BGmZJcZQe7vcpNg16NXcO476w_bOThwvr9rwMs0NjwEhRRJPRwTr0KWDqgEFc-cX4pSf-sLBUy49ZywcyEIgnjCZBSEEm2EKuW_D7H7or42NUWbkt4Ab7ubY/s1600/btrix_menupu_hover_left.gif) no-repeat;
background-position: left;
}
.cbg_glossymenu1 li.current a b, .cbg_glossymenu1 li a:hover b{
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEBVrtdJnRoMJqEDpY49m0RLtroudWzm_lzvcfIPK1suJKgnZnk-g2Mz0SXeU0tm6ZwjGiB75dUGlWFUMkBDX14Tg9tZkcc-lmT2YgPg81LoYb5LFdvgBebCtvfYh1cth3H4YkFpN7WTE/s1600/btrix_menupu_hover_right.gif) no-repeat right top;
}
.cbg_glossymenu1{
position: relative;padding: 0 0 0 34px;margin: 0 auto 0 auto;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-eTZZbN5GERJRz4cNsvHvVOJAbO5xNo8ErBoJY5DdGoXzKmEsyIW13kIOG-XnKd0I3Q-jYTwtgJcZ4AUQF1h307m27qgdNeLc8EgVfmhwp1L9g46iYv14gVXGzrqoUOEOHtLykk1Kx0/s1600/btrix_menupu_bg.gif) repeat-x;
height: 46px;
list-style: none;
}
.cbg_glossymenu1 li{
float:left;
}
.cbg_glossymenu1 li a{
float: left;display: block;color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.cbg_glossymenu1 li a b{
float: left;display: block;padding: 0 24px 0 8px;
}
.cbg_glossymenu1 li.current a, .cbg_glossymenu1 li a:hover{
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi0npS8Vo2E70NTqV7-c0BGmZJcZQe7vcpNg16NXcO476w_bOThwvr9rwMs0NjwEhRRJPRwTr0KWDqgEFc-cX4pSf-sLBUy49ZywcyEIgnjCZBSEEm2EKuW_D7H7or42NUWbkt4Ab7ubY/s1600/btrix_menupu_hover_left.gif) no-repeat;
background-position: left;
}
.cbg_glossymenu1 li.current a b, .cbg_glossymenu1 li a:hover b{
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEBVrtdJnRoMJqEDpY49m0RLtroudWzm_lzvcfIPK1suJKgnZnk-g2Mz0SXeU0tm6ZwjGiB75dUGlWFUMkBDX14Tg9tZkcc-lmT2YgPg81LoYb5LFdvgBebCtvfYh1cth3H4YkFpN7WTE/s1600/btrix_menupu_hover_right.gif) no-repeat right top;
}
6. Entra en tu cuenta de blogger y de click en Diseño
7. Da Click Añadir un Gadget y selecciona HTML/Javascript
8. Pegue el codigo de abajo en espacio de HTML/Javascript
<ul class="cbg_glossymenu1">
<li class="current"><a href="#"><b>Pagina Principal</b></a></li>
<li><a href="#"><b>CSS</b></a></li>
<li><a href="#"><b>Foros</b></a></li>
<li><a href="#"><b>Herramientas</b></a></li>
<li><a href="#"><b>JavaScript</b></a></li>
<li><a href="#"><b>Contactenoss</b></a></li>
</ul>
<li class="current"><a href="#"><b>Pagina Principal</b></a></li>
<li><a href="#"><b>CSS</b></a></li>
<li><a href="#"><b>Foros</b></a></li>
<li><a href="#"><b>Herramientas</b></a></li>
<li><a href="#"><b>JavaScript</b></a></li>
<li><a href="#"><b>Contactenoss</b></a></li>
</ul>
Replace # with your links.
9. Guarda tu HTML/Javascript'.
Ahora este lindo menu con curvas y brillo estare disponible para usted y sus visitantes..
0 comentarios:
Publicar un comentario