Menú de navegación horizontal circular con CSS3

By: Iván Dangerfield en sábado, enero 04, 2014
Trata de un menú de navegación con estilo circular. Sólo se visualizará en navegadores modernos, de última generación, que soporten CSS3. Con este menú de navegación podrás enlazar tus páginas principales de Blogger o lo que desees enlazar. Primero veremos la demostración del menú circular y luego veremos el código CSS3 y el HTML que hace falta para implantar este estupendo menú de navegación en Blogger, si te gusta el menú, es muy sencillo de insertar en Blogger.

• Portada
• Televisión
• Juegos
• Radios
• Contacto

Para añadir el CSS en Blogger, haz esto que vemos:

1. Ves a Blogger
2. Ingresa en plantilla
3. Ahora en Editar Html
4. Y busca con Ctrl+F la etiqueta ]]></b:skin>
5. Y antes de dicha etiqueta es decir; ]]></b:skin>
6. Copia y pega el siguiente CSS.

/* Menú de navegación circular en www.aizumblog.com */
.menucirculo {
width: 100%; /* Ancho */
overflow:hidden;
}
.menucirculo ul{
margin: 0;
padding: 0;
font: bold 14px Georgia; /* 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: white; /* Color del texto */
background:#029FC4; /* Color del fondo del circulo */
margin: 0;
margin-right:5px; 
width:100px; /* Ancho */
height:100px; /* Altura */
border-radius: 400px; /* Bordes redondeados */
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}
.menucirculo a span{
position:relative;
top:40%;
}

Ahora vayamos a incrustar el HTML en Blogger:

1. En Blogger
2. Entra en Diseño
3. Ahora en Añadir Gadget
4. Elige la opción Html y Javascript, y pega el código HTML
5. Y por último remplaza todas las # por tus enlaces.

<div class="menucirculo">
<ul>
<li><a href="#"><span>Portada</span></a></li>
<li><a href="#"><span>Televisión</span></a></li>
<li><a href="#"><span>Juegos</span></a></li>
<li><a href="#"><span>Radios</span></a></li>
<li><a href="#"><span>Contacto</span></a></li>
</ul>
</div>

Get free premium widgets for your blog and website.