Menú - Cuatro círculos, cuatro apartados!

Me hace enojar que blogger cambie la resolucion de las imagenes!

Hola hola, hace cuanto no traigo un menu nuevo ¿? Aqui tenemos uno algo especial...

Si bien este es un menú mas, esta pensado para que solo tenga cuatro apartados, cuatro links. Y esto por que ¿? Sencillamente porque sino seria una circunferencia demasiado grande para que ocupara un lugar en el sidebar, pero esto no quita la idea de que reemplace el header... ya veremos, no se adelanten!

VISTA PREVIA

Como colocar este menú en mi blog ¿?

Para colocar este llamativo menú, nos dirigimos a Plantilla/Edición HTML & presionando sobre el recuadro del código de nuestra plantilla buscamos (CTRL + F) la siguiente linea:

]]></b:skin>

donde ARRIBA de ella pegaremos lo que sera el Codigo CSS del menu (si, donde podemos editarlo a gusto):

.circo1 {
z-index: 1;
width: 320px;
height: 320px;
margin: 0px;
background: #fff url('URL DE TU IMAGEN 1') center;
}
.circo2 {
z-index: 2;
width: 250px;
height: 250px;
margin: 35px;
background: #fff url('URL DE TU IMAGEN 2') center;
}
.circo3 {
z-index: 3;
width: 180px;
height: 180px;
margin: 70px;
background: #fff url('URL DE TU IMAGEN 3') center;
}
.circo4 {
z-index: 4;
width: 100px;
height: 100px;
margin: 110px;
background: #fff url('URL DE TU IMAGEN 4') center;
}
#titles {
background: #000; /* FONDO DEL TEXTO */
color: #fff; /* COLOR DEL TEXTO */
text-transform: uppercase;
padding: 3px;
font-family: courier;
}
.circo1, .circo2, .circo3, .circo4 {border: 1px solid rgba(225,225,225,0);position:absolute;border-radius: 222px;-webkit-transform: rotate( 0deg);-moz-transform: rotate( 0deg);-webkit-transition: all 0.7s linear;-moz-transition: all 0.7s linear;transition: all 0.7s linear;}
.circo1:hover, .circo2:hover, .circo3:hover, .circo4:hover {-webkit-transform: rotate( 180deg);-moz-transform: rotate( 180deg);-webkit-transition: all 0.7s linear;-moz-transition: all 0.7s linear;transition: all 0.7s linear;}
.c1 {margin: 10px 0 0 130px;} .c2 {margin: 10px 0 0 100px;} .c3 {margin: 15px 0 0 55px;} .c4 {margin: 10px 0 0 25px;}
.c1, .c2, .c3, .c4 {position: absolute; opacity: 0;-webkit-transform: rotate( -180deg); -moz-transform: rotate( -180deg);-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s  linear;transition: all 0.1s linear;}
.circo1:hover .c1, .circo2:hover .c2, .circo3:hover .c3, .circo4:hover .c4 {opacity: 1;-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s  linear;transition: all 0.3s linear;}

Editas lo marcado a tu gusto & guardamos.

Una ves tenemos esto hecho, nos dirigimos a Diseño/Añadir gadget/javascript/HTML & alli pegamos el codigo HTML del menu:

<div style="width: 320px;height: 320px;">
<a href="URL"><div class="circo1"><div id="titles" class="c1">TITLE1</div></div></a>
<a href="URL"><div class="circo2"><div id="titles" class="c2" >TITLE2</div></div></a>
<a href="URL"><div class="circo3"><div id="titles" class="c3" >TITLE3</div></div></a>
<a href="URL"><div class="circo4"><div id="titles" class="c4" >TITLE4</div></div></a>
</div>

Lo que se encuentra en cursiva es el tamaño que ocupara, para que el gadget tenga forma & no se superponga con los demás.

Escribes los títulos correspondientes, agregas los links & ya tienes tu menú circle!

Pero... como es eso del header ¿?

Ya, paciencia.. recuerdan aquel tutorial de como colocar el c-box en el header ¿? (Si no lo recuerdas o nunca lo viste, entra AQUI!). Bueno, esta vez en vez de colocar el código del c-box donde indica, colocaremos allí el código HTML de este menú!

Que diferencia hay donde lo coloque ¿?

La idea esta en que, donde decidas colocarlo, puedes agrandar tu menu o no. Te recomiendo que si tu idea es colocarlo en el sidebar de tu blog, lo dejes del tamaño en que se encuentra en la explicación del tutorial, ya que sino sera muy grande o muy chico & no se apreciara el efecto.

En cambio, si decides ubicarlo en la cabecera de tu blog, allí puedes agregar quizá un apartado mas (segun el tamaño de tu header) o agrandarlo mas.

Como puedo agregar otro apartado ¿?

Se bien que esta pregunta ronda por su mente(?

Bien, para agregar otro apartado, deberas tener paciencia y organizar los tamaños de los círculos. Te recomiendo que primero agrandes los que ya tienes de la siguiente forma: 

En el código CSS marque lo siguiente:

• width, height: Es el tamaño de cada circulo, ambos SIEMPRE van igual.
• margin: es la posición de cada circulo sobre el otro.

Simplemente vas aumentando los valores hasta que tengas un tamaño adecuado & estén todos en su posición exacta. Una vez esto, el circulo pequeño del centro, sera mas grande & allí ira nuestro 5to circulo.

Simplemente agregas esto al código CSS:

.circo4 {
z-index: 5; /* POR CADA CIRCULO SU NRO */
width: 100px; /* TAMAÑO DEL CIRCULO */
height: 100px;
margin: 110px; /* POSICIÓN DEL CIRCULO */
background: #fff url('URL DE TU IMAGEN 5') center;
}

& editas lo marcado según los valores que modificaste.

Espero les sea útil, & cualquier duda un comentario!

Abrazos de colores ヾ(*´∀｀*)ﾉ