Util Menú vertical con CSS3 y jQuery para Blogger



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: '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 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



Related Posts Plugin for WordPress, Blogger...

♥ Se el primero el en dejar su huella en este lugar!

❥ Un corazón agradecido siempre sabe decir gracias
❥ Y la forma mas fácil de decirlo es atraves de tus comentarios..
❥ Al hacerlo, se cordial y respetuoso..
❥ Se de bendición a los demás...
❥ Deja siempre la URL de tu blog para que podamos visitarte..
❥ Copia el código de texto para que agregues emoticones a tu comentario
❥ Para insertar imagen solo utiliza [img]URL de la imagen[/img]
❥ Para cambiar color de texto utiliza [color="red"]Aquí tu texto[/color]
❥ Para agregar un vídeo solo utiliza esto [video]URL del video[/video]
❥ Para crear marquesina se utiliza [ma]Aquí tu texto[/ma]
❥ Y recuerda: Dile NO al Spam...
❥ Bendiciones!

✿ TUS COMENTARIOS ALIMENTAN MI BLOG Y SON CARICIAS DE DIOS A MI ALMA ✿

≧◔◡◔≦ (っ◔◡◔)っ ♥ ❤ ❥ ✿ ☂ ღ ツ ☼ ✿◕ ‿ ◕✿ ❀◕ ‿ ◕❀ ❁◕ ‿ ◕❁ (◡‿◡✿) (っ◕‿◕)っ (►.◄) ╍●‿●╍ (•_•) (◐.̃◐) ..^.^.. ʕ•ᴥ•ʔ εїз Ƹ̴Ӂ̴Ʒ .^◡^. (≧◡≦) ✿❀❁ ° ♥ ❤ ❥ ❣ ღ ♂ ♀ ✔♚ ♛ ✝ ✉ ۵ ϟ

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer


=^.^= APRENDE A CREAR GRAFICAS CRISTIANAS CON NUESTROS TUTORIALES o☂O PARA COMENZAR BUSCA LA PALABRA "ETIQUETAS" EN EL MENU O EN EL TAGS =^.^=
El material compartido en este Blog :b5: es Propiedad Exclusiva de su Respectivo Creador conforme cada material.
Las gráficas que creamos y aquí compartimos son libres de uso, mas NO pueden cambiar, ni borrar, ni alterar nuestra firma ni el diseño de la misma.
Nuestras gráficas son creadas para uso personal, NO comercial.
:b8:Por favor respeta el Derecho de Autor :b8:
Nuestras Gráficas están Protegidas
Si eres dueño de algúna imagen o material utilizado en este blog, y estas en desacuerdo en que sea utilizado por este medio, favor hacérmelo saber vía e-mail para dar los créditos correspondientes o eliminarlo según tu parecer.
Contactame :e6: en : :a5: pinceladasdeprincesa@gmail.com

☂ Este blog tiene días

☂ Siguenos en Twitter ☂