En
Ayuda Blogger he encontrado un maravilloso menu vertical hecho con CSS3 y libreria 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 menu ve a "
Diseño | Edición HTML" y alli busca la siguiente línea:
</head>
Antes de la etiqueta anterior deberas 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: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4jIr3a4Y47rk5IKJzerUCXbQIfjQyP1gZb2cdVige1WSgNSG39Nt2hiPbngy6747sf7-qTloxX6Cj7HC6aCnQ21tVMHWjiYG0h0D_vTzvVcjt4FXGCcdQk7qdKBZNY7Wmzspolh9iltk/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>
Importante:
- 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> deberas agregar el siguiente codigo que corresponde a la estructura del menu.
<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 ultima parte es en la que deberas agregar tus enlaces.