Hola chicas, hoy les quiero compartir un tutorial bastante interesante para mi gusto! Se trata de un menu vertical como bien lo muestra la imagen mas arriba. Esto lo he encontrado en Mil Trucos Blogger, y al parecer el lo vio en Ayuda Blogger. Este 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 le gustara este genial truco para tu blog en Blogger.
C O M E N C E M O S
Para agregar este menu ve a "Diseño | Edición HTML" y alli busca la siguiente línea:
</head>
Ahora, justo 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: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2bQZNyoJGWd7ve0Iz2k9UOZVm3z5bvvEoYOu4DQc1ijVcnPLQJJTCupbtyQ8JpxDEIAumdU8wLBTMqRmp8JuJ38scbZkurhVRxkLCylVdRjGeSudsg5kZg_alRuebSyzp4ZhS2Kc-Wnc/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> 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 ultima parte es en la que debieras agregar tus enlaces. Donde dice URL agregas el link de la pagina que quieres enlazar en el menú. Y donde dice Enlace 1 agregas nombre que le pondrás a tu enlace para que se visualizara en el en el menú.
Haras lo mismo con los demás enlaces y url que se muestra en el código anterior, agregando sus respectivos enlaces y nombres, conforme el ejemplo anteriormente explicado.
En donde dice Inicio, allí puedes cambiar la palabra por otra que gustes, ejemplo: Home, Portada, Principal, etc..
Espero te hayas gustado tanto como a mi este tuto, y lo agregues en tu blog. Cualquier duda no temas en hacerla en los comentarios y en la mayor brevedad posible te estaremos ayudando.
Bendiciones!
Thanks to: MilTrucosBlogger
