20 de mayo de 2016

Tutorial: Crear un Menú circular

Buscando otras formas creativas de presentar el Menú del blog en las plantillas que diseño, me encontré con un código CSS  muy curioso, y se trata de darle un aspecto circular a nuestro menú.  Es muy sencillo y si tu blog tiene estilo magazine o vintage le ira muy bien. 
  1. Sólo se visualizará en navegadores modernos, de última generación, que soporten CSS3.

  • Si quieres este soporte ve a: Plantilla → Editar Html →  y busca (Ctrl+F) la etiqueta: ]]></b:skin>

Y ANTES de la etiqueta pega:
/* Menú circular  newsyndrome.blogspot.com */
.menucirculo {
width: 100%; /* Ancho */
overflow:hidden;
}
.menucirculo ul{
margin: 0;
padding: 0;
font: bold 12px Oxygen; /* Tipo de fuente */
list-style-type: none;
text-align: center; /* Alineación del texto */
}
.menucirculo li{
display: inline;
margin: 0;
}
.menucirculo li a{
display:inline-block;
text-align:center; /* Alineación del texto */
text-decoration: none;
color: black; /* Color del texto */
background:#DF013A; /* Color del fondo del circulo */
margin: 0;
margin-right:5px;
width:80px; /* Ancho */
height:80px; /* Altura */
border-radius: 400px; /* Bordes redondeados */
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}
.menucirculo a span{
position:relative;
top:40%;
}
  1. Lo que esta en negrita es lo que puedes modificar para cambiar el aspecto del menú.
Una vez guardada la plantilla, ve a:
  • Diseño >> Añadir un gadget >> y en un gadget HTML/Javascript pegas lo siguiente:
<div class="menucirculo">
<ul>
<li><a href="DIRECCIÓN-URL"><span>INICIO</span></a></li>
<li><a href="DIRECCIÓN-URL"><span>PÁGINA</span></a></li>
<li><a href="DIRECCIÓN-URL"><span>PÁGINA</span></a></li>
<li><a href="DIRECCIÓN-URL"><span>PÁGINA</span></a></li>
<li><a href="DIRECCIÓN-URL"><span>PÁGINA</span></a></li>
</ul>
</div>
  1. Añades la dirección, los títulos y lo guardas.
Listo ya tendrás tu nuevo menú...
Es muy fácil y puede darle a tu blog una vista muy dinámica y poco particular. 

No hay comentarios:

Publicar un comentario