Menú vertical con CSS3 y jQuery para Blogger

En Ayuda Blogger he encontrado un maravilloso menú vertical hecho con CSS3 y librería jQuery que ademas de tener un aspecto genial ahorra mucho espacio en el blog,seguro que a mas de uno os gustara este genial truco para Blogger.

Para agregar este menú ve a «Diseño | Edición HTML» y allí busca la siguiente línea:

 </head>

Antes de la etiqueta anterior deberás agregar lo siguiente:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

<script type=»text/javascript»>
$(function(){
$(‘.slide-out-div’).tabSlideOut({
tabHandle: ‘.handle’,         // no-tocar, corresponde a la class del botón
pathToTabImage: ‘http://3.bp.blogspot.com/-SRwZItqEcjo/TpOMh16a3dI/AAAAAAAAAMY/LeIqvUxWNMI/s1600/square-arrow-right.gif’, // Imagen del boton
imageHeight: ’36px’,         //alto de la imagen
imageWidth: ’36px’,         //ancho de la imagen
tabLocation: ‘left’,            //ubicación del contenedor
speed: 300,                     //velocidad de la animación
action: ‘click’,                   //cambiar por hover si deseas que el script se active al pasar el mouse
topPos: ‘200px’,               //posición superior del contenedor
leftPos: ’20px’,                  //posición a la izquierda del contenedor
fixedPosition: true            //esto permite que el botón siga la pantalla, cambiar a false en caso contrario.
});
});
</script>

• Si ya tenías jQuery instalado omite el código resaltado en azul.

Ahora antes de ]]></b:skin> debes agregar lo siguiente:

.slide-out-div {
padding: 0;
width: 150px;
color:fff;
}

.slide-out-div ul {
margin:0;
margin-left:-40px;
}
.slide-out-div li {
text-align:right;
width:120px;
color:#fff;
margin-top:2px;
font-size:13px;
background: #2facd6; /*Color de fondo de los enlaces*/
padding:4px;
list-style:none;
}

.slide-out-div li:hover {
background: #2d2d2d; /*Color de fondo al pasar el mouse por un enlace*/
padding:4px;
list-style:none;
-moz-transition: 0.2s;
-webkit-transition: 0.2s;
-o-transition:1s;
transition: 1s;
-webkit-transform: rotate(0deg) scale(1.5) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.5) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.5) skew(1deg) translate(0px);
}

.slide-out-div li a {color:#fff; text-decoration:none;font-weight:none;font-family: Century Gothic, sans-serif; }

Ahora antes de </body> deberás agregar el siguiente código que corresponde a la estructura del menú.

<div class='slide-out-div'>
<a class='handle' href=''/>
<ul>
<li><a href='/'>Inicio</a></li>
<li><a href='URL'>Enlace 1</a></li>
<li><a href='URL'>Enlace 2</a></li>
<li><a href='URL'>Enlace 3</a></li>
<li><a href='URL'>Enlace 4</a></li>
<li><a href='URL'>Enlace 5</a></li>
<li><a href='URL'>Enlace 6</a></li>
</ul>
</div>

En esta última parte es en la que deberás agregar tus enlaces.