MAPA DEL SITIO

Comentarios de Puntadas católicas
COMPARTE ESTA ENTRADA





SIGUENOS
Síguenos en TwitterSiguenos en FacebookSiguenos en Google+Siguenos en PicasaSiguenos en YouTubeSiguenos en BloggerSiguenos en Blogger


Menú lateral flotante con efecto deslizante para el blog

Buscando en la web, encontré El Balcón de Jaime muy buen sitio

Ahí compartió éste menú que me parece muy bueno y útil. Se trata de un menú horizontal que se coloca al lado izquierdo de tu página, ocultándose y expandiéndose al contacto del mouse

En él puedes poner enlaces hacia otras páginas que desees mostrar

Menú lateral flotante con efecto deslizante para el blog

Imagen relacionada http://blogdefiestasryp.blogspot.com/

Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta ]]></b:skin> y añade estos bloques de CSS justo encima:

ul#blmenudeslizante {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#blmenudeslizante li a {
background:url("http://lh4.ggpht.com/_gjBqKNTws4M/S7DQ32eojgI/AAAAAAAACLw/11KfzbPuqRQ/blmenuds.png") no-repeat scroll 0 0 transparent;
text-align: center;
height:54px;
padding-top: 20%;
padding-left: 4px;
padding-right: 4px;
margin-right:-2px;
width:116px;
display:block;
font-size: 14px;
color: #ffffff;
}
ul#blmenudeslizante li {
width: 100px;
line-height:1.5em;
margin:0;
padding:0 0 0.25em 0;
text-indent:-12px;
}
ul#blmenudeslizante li a:hover {
color: #ffffff;
text-decoration: none;
}

Ahora busca la etiqueta </head> y agrega esto encima:

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

Guarda la plantilla:



Seguidamente añadiremos el código necesario para mostrar los enlaces que componen el menú.


Diseño>añadir gadget (elemento de página)>html-javascript






Pega este código:

<ul id="blmenudeslizante">
<li class="blink"><a href="URL DEL ENLACE">TITULO</a></li>
<li class="blink"><a href="URL DEL ENLACE">TITULO</a></li>
<li class="blink"><a href="URL DEL ENLACE">TITULO</a></li>
</ul>

Reemplaza URL DEL ENLACE por la dirección de tu página web o blog, así como TITULO por el título que llevará el enlace.

En caso de querer añadir más de tres enlaces, pega líneas como esta:

<li class="blink"><a href="URL DEL ENLACE">TITULO</a></li>

Siempre antes de la etiqueta de cierre </ul>.

Tal vez te interese

Related Posts Plugin for WordPress, Blogger...
TRANSLATE


EnglishcvFrenchGermanSpainItalianDutchRussianPortugueseJapaneseKoreanArabicChinese Simplified

Archivo del blog

Entradas populares

Seguidores

 
Gadget de animacion Social - Widgets para Blogger

[PR] 求む!タイピング初心者