Mil Trucos Blogger

Menú vertical con CSS3 y jQuery para Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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>

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 última parte es en la que deberás agregar tus enlaces.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

7 Comentarios

  1. Diciembre 28, 2011    

    Me encanto el truco exelente +1 :buenpost:

  2. Diciembre 29, 2011    

    Zara gracias por comentar,saludos 😀

  3. Diciembre 29, 2011    

    Juvinao, tenías razón, la plantilla que había hecho esta un poco desordenada. He decidido hacer una plantilla, les he dado a opinar a muchos amigo míos, pero necesito un especialista en el tema de Blogger.

    En cuanto, al post, muy bueno Juvinao, me ha encantado, +1

    Saludos man!!!!!!!

  4. Diciembre 29, 2011    

    La URL del blog, es:
    superbloggeroswebs.blogspot.com

    Por cierto, estoy creando un ranking de webs,por categoría, con javascript. Si quieres te agrego tu página en el ranking, en la categoría Blogger, aunque, es muy difícil a quién voy a poner primero, o a ti, o a Cloudx18, los dos tenéis un blog buenísimo…

    Saludos otra vez!

  5. Diciembre 29, 2011    

    Juan Gonzalez tienes razon esta plantilla esta mas ordenada,pero creo que todavia deber organizar la columna de los gadgets y con eso ya tu blog quedara listo.

    Claro amigo agrega mi web me haces un honor,cloudx tambien tiene un excelente blog.

  6. Abril 14, 2014    

    No amigo necesito ayuda como hago que quede flotante este menu siempre a la lado izquierdo please te lo ruego

    • Abril 15, 2014    

      Amigo en que blog se presenta este inconveniente?

      Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo