Tal vez has pensado añadir una barra de menu vertical a tu blog de blogger.En este articulo mostrare como añadir un menu vertical atractivo a tu pagina de tu web especialmente a blog. Puedes ademas insertar este sencillo y elegante menu en la barra lateral y enlazar aqui los articulos especiales o categorias.
Chequea Como Añadir Menu Desplegable al Blog de Blogger
Para realizar este proyecto he utilizado Css3 y Html otra de las caracteristicas que incluye este menu vertical es el efecto cuando poner el cursor sobre la barra esta cambia a color verde aceituna.El efecto de animacion conocido en ingles como Hover.
Ejemplo ir al siguiente enlace: http://lanoticiaspr.blogspot.com/
Vamos ahora a añadir este util menu vertical a tu blog.
1.Entra en tu cuenta de Blogger
2.Ir a Deseño > Elementos de Pagina.
3. Da Click Añadir un Gadget y selecciona 'HTML/Javascript
4.Ahora pega el codigo de abajo
<style>
.bcb_bloquemenu{
font: bold 14px Germand;
width: 190px; /* width of menu */
}
.bcb_bloquemenu ul{
border: 1px solid #eee;
padding: 0;
margin: 0;
list-style: none;
}
.bcb_bloquemenu ul li{
margin:0;
padding:0;
}
.bcb_bloquemenu ul li a{
display:block;
text-transform: uppercase;
color: #494949;
padding: 10px 15px;
text-decoration: none;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #cacaca; /*right border between menu items*/
-moz-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.5) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.bcb_bloquemenu ul li a:hover, .bcb_bloquemenu ul li a.selected{
color: black;
-moz-box-shadow: inset 7px 0 10px rgba(127,255,0, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(127,255,0, 0.8); /* Add 3 inset shadows to each menu item */
-webkit-box-shadow: inset 7px 0 10px rgba(127,255,0, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(127,255,0, 0.8);
box-shadow: inset 7px 0 10px rgba(127,255,0, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(127,255,0, 0.8);
}
</style>
<div class="bcb_bloquemenu">
<ul>
<li><a href="#">Pagina Principal</a></li>
<li><a href="#">Tutoriales</a></li>
<li><a href="#">Categoria</a></li>
<li><a href="#">Descargas</a></li>
<li><a href="#">Sobre Autor</a></li>
<li><a href="http://www.ciudadblogger.info/">Contactame</a></li>
</ul>
</div>
Reemplace # con las URLs.
5. Ahora guarda tu HTML/Javascript'.
Ahora tendras un lindo y atractivo menu vertical para tus visitantes..
Chequea Como Añadir Menu Iluminado a tu Blog
0 comentarios:
Publicar un comentario