Te enseñare como aplicar el Menu Iluminado tomando ventaja del uso de la propiedad del borde del radio y transicion con CSS3 que añade un fondo circular a articulos de este Menu cuando pasas el cursor del mouse sobre cada uno de estos.
El resultado es como un flash, que proyecta un menu elegante! El fondo circular aparece en la mayoria de los navegadores que incluye el Internet Explorer 9( IE9), mientras que el efecto de transicion trabaja en navegadores que apoyan la tansicion CSS3, a saber, FtreFox3.5+, Safari 3.1+, Google Chrome, y Opera 11.6+.
Ver Ejemplo:Da Click en Boton de Abajo:
Para añadir este menu iluminado a tu blog de blogger solo sigue los siguientes pasos.
1.Entra en Blogger>>Plantilla>>Editar Html
2.Busca el siguiente codigo ]]</b:skin> pega el siguiente codigo despues de ]]</b:skin>
<style type="text/css">
.spotlightmenu{
width: 100%;
overflow:hidden;
}
.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* font style and size */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}
.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* right margin between menu items */
}
.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px; /* horizontal diameter of spotlight */
height:50px; /* vertical diameter of spotlight */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.spotlightmenu li:hover a{
color: white;
background: #a71b15; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
}
.spotlightmenu li a span{
position:relative;
top:35%; /* move text down so it appears centered within menu item */
}
</style>
.spotlightmenu{
width: 100%;
overflow:hidden;
}
.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* font style and size */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}
.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* right margin between menu items */
}
.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px; /* horizontal diameter of spotlight */
height:50px; /* vertical diameter of spotlight */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.spotlightmenu li:hover a{
color: white;
background: #a71b15; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
}
.spotlightmenu li a span{
position:relative;
top:35%; /* move text down so it appears centered within menu item */
}
</style>
3.Guarda plantilla.
4.Entra ahora en Diseño>>Añadir un Gadget>>selecciona Html/Javascript y pega el siguiente codigo en espacio disponible.
<div class="spotlightmenu">
<ul>
<li><a href="http://www.ciudadblogger.info"><span>Pagina Principal</span></a></li>
<li><a href="http://www.ciudadblogger.info"><span>DHTML</span></a></li>
<li><a href="http://www.ciudadblogger.info"><span>CSS</span></a></li>
<li><a href="http://www.ciudadblogger.info"><span>Foro</span></a></li>
<li><a href="http://www.ciudadblogger.info"><span>JavaScript</span></a></li>
</ul>
</div>
<ul>
<li><a href="http://www.ciudadblogger.info"><span>Pagina Principal</span></a></li>
<li><a href="http://www.ciudadblogger.info"><span>DHTML</span></a></li>
<li><a href="http://www.ciudadblogger.info"><span>CSS</span></a></li>
<li><a href="http://www.ciudadblogger.info"><span>Foro</span></a></li>
<li><a href="http://www.ciudadblogger.info"><span>JavaScript</span></a></li>
</ul>
</div>
5.Pon este gadget en la parte superior debajo de la Cabecera.Como muestra el ejemplo de abajo.
6. Cambia lo que esta sombreado en por la direccion de pagina que esta en .Puedes cambiar anadir enlaces con titulos como( Pagina Principal,contactanos, Autor,Mapa de sitio,tutoriales)
7.Guarda el Html/Javascript una vez hecho los cambios a este menu y listo,tendras un menu estilizado y animado.
0 comentarios:
Publicar un comentario