Menu lateral deslizante.

En una entrada anterior vimos cómo poner botonesflotantes  para compartir de Facebook twitter y google+, ahora vamos a ver cómo poner estos mismos enlaces pero de manera deslizante, de modo que queden fijos a un costado del blog y solo aparezcan cuando se pone el cursor sobre ellos y así no obstaculicen la visión de la entrada; eso además de ahorrarnos espacio, le da un aspecto más moderno al blog.

Puedes ver cómo funciona en esta misma entrada, a un costado del blog.

Para implementarlo pega en tu plantilla antes de ]]></b:skin> los estilos del contenedor, teniendo los artilugios expandidos: 

 

ul#blmenudeslizante {

position: fixed;

margin: 0px;

padding: 0px;

top: 55%;

left: -2px;

list-style: none;

z-index:9999;

}

ul#blmenudeslizante li a {

background-color: #878787;

background-repeat:no-repeat;

background-position:center center;

border:1px solid #afafaf;

-moz-border-radius:0px 10px 10px 0px;

-webkit-border-bottom-right-radius: 12px;

-webkit-border-top-right-radius: 12px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-top-right-radius: 10px;

opacity: 0.9

text-align: right;

height:40px;

padding-top: 20%;

padding-left: 4px;

padding-right: 4px;

margin-right:-5px;

width:100px;

display:block;

font-size: 18px;

color: #ffffff;

}

ul#blmenudeslizante li {

width: 90px;

line-height:1.5em;

margin:0;

padding:0 0 0.25em 0;

text-indent: 18px;

}

ul#blmenudeslizante li a:hover {

text-decoration: none;

color: #815683;

font-weight:bold;

font-style:italic;

}

Ahora hay que agregar el script, justo antes de </head> pones lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(function() {
$(&#39;#blmenudeslizante a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-70px&#39;},1000);

$(&#39;#blmenudeslizante &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},400);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-70px&#39;},400);
}
);
});
</script>

Listo, si todo está ok en vista previa, guarda los cambios. Ahora es el turno de un gadget. Entra en Diseño, Añadir Gadget, Html Javascript, y pega los enlaces:

<ul id="blmenudeslizante">
<li class="blink"><a href="URL DEL ENLACE">I n i c i o</a></li>
<li class="blink"><a href="URL DEL ENLACE">Facebook</a></li>
<li class="blink"><a href="URL DEL ENLACE">Twitter</a></li>
<li class="blink"><a href="URL DEL ENLACE">Google+</a></li>

</ul>

Lo que puedes personalizar:

Donde pone Backgroun:#878787 es el color de fondo de las pestañas, puedes ponerle el color que gustes; top: 55% es la distancia del contenedor para que permanezca fijo abajo, si lo quieres arriba solo cambia 55% por 0px hasta que quede a la altura que quieras. En color:#ffffff es el color del texto (está blanco) cámbialo al color que gustes, en color:#815683 es el color del texto (morado) cuando se pone el cursor. Es decisión tuya el color que le pongas.

Lo que esta en verde es jQuery, si ya lo tienes en el blog no es necesario que lo vuelvas a poner.

En el gadget sustituye url del enlace por la url de la dirección de cada cuenta (la de Facebook, twitter, google+; o puedes ponerle los enlaces que quieras)

Por lo demás, que disfrutes este gadget.