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.

Categorías: Trucos Blogger

7 commentarios

Zara · diciembre 28, 2011 a las 8:24 pm

Me encanto el truco exelente +1 :buenpost:

Juvinao · diciembre 29, 2011 a las 3:08 pm

Zara gracias por comentar,saludos 😀

Juan Gonzalez · diciembre 29, 2011 a las 3:13 pm

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!!!!!!!

Juan Gonzalez · diciembre 29, 2011 a las 3:17 pm

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!

Juvinao · diciembre 29, 2011 a las 3:53 pm

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.

Nitro Sonico · abril 14, 2014 a las 5:49 am

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

Deja un comentario

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