✘ Menu "CUBE COLORS"

❝VER EJEMPLO DEL MENÚ AQUÍ❞

COMENCEMOS!

Para colocar dicho menú, nos dirigimos a Plantilla / Edición HTML & buscamos:

]]></b:skin>

ARRIBA pegamos el siguiente cógido CSS:

.mcTC {
text-align:center;
font-size: 35px; /* TAMAÑO DEL TITULO*/
font-family: trebuchet ms; /* FUENTE DEL TITULO*/
position: fixed;
left: 20px;
top: 10px;
width:150px;
color:#5F4C68; /* COLOR DEL TITULO*/
padding: 4px;
border-radius: 10px;
-webkit-transition: 2.0s;
-moz-transition: 2.0s;
}
/* CAJA DE LOS LINKS */
#boxMC {
border-bottom: 10px solid #D9A88F; /* BORDE DEL BOX */
margin-top: -10px;
margin-left: -200px;
padding:4px;
position: fixed;
text-align:left;
background:#5F4C68; /* FONDO DEL BOX */
color:#95d3bf; /* COLOR DE LETRA */
opacity: 0;
-webkit-transition: 2.0s;
-moz-transition: 2.0s;
}
.mcTC:hover {-webkit-transition: 2.0s;-moz-transition: 2.0s;}
.mcTC:hover #boxMC {margin-left: 5px;opacity: 1;overflow:hidden;-webkit-transition: 2.0s;-moz-transition: 2.0s;}
/* LINKS CUBOS */
.mMMC a{
padding-top: 50px!important;
padding-bottom: 50px!important;
width: 120px;
font-family: arial;
font-size: 10px;
text-transform: uppercase;
margin:3px;
color:#fff; /* COLOR DE LOS LINKS */
text-align:center;
display: block;
text-shadow: none;
text-decoration:none;
}
/* LINKS CUBOS HOVER */
.mMMC a:hover{
color:#fff; /* COLOR DE LOS LINKS */
text-decoration:none;
text-shadow: none;
background: #5F4C68!important; /* COLOR DEL FONDO DE LOS LINKS */
}

Una vez, colocado el código, edita lo marcado a tu gusto.
Para terminar de colocar el menú, buscamos en la plantilla la etiqueta: </body>
ARRIBA de ella pegaremos lo siguiente:

<div class="mcTC "> ▲MENU <br />
<div id="boxMC">
<div class='mMMC'>
<a style="background: #B55577;" href='URL'>&#10112; LINK</a>
<a style="background: #FA4D70;" href='URL'>&#10103; LINK</a>
<a style="background: #F08784;" href='URL'>&#10114; LINK</a>
<a style="background: #D9A88F;" href='URL'>&#10105; LINK</a>
</div>
</div>
</div>

Editamos lo que se encuentra resaltado en negrita, que corresponde a cada color de los distintos cuadrados que forman los links. Te puedes ayudar con alguna paleta de colores, como yo utilice en mi diseño actual & en el ejemplo de este tutorial.

✘ Menu "CUBE COLORS" versión sidebar.

{Paletas de colourlovers.com}

~