Bienvenido a mi blog. Aquí encontrarás todas las cosas que he creado e ido aprendiendo con el tiempo, útiles para ti y tu sitio web.

Menú Lateral con efecto deslizante (Código corregido)


Continuando con la publicación anterior, S.0.S. Códigos fallando! (0_0). Y ayer mismo, ni bien terminé la publicación, me puse a buscar entre los códigos que tenía guardado en mis marcadores (si los guardo por ahí XD) y hallé la solución del segundo problema (sabía que lo tenía por ahí *0*).

El segundo problema era, EL MENÚ LATERAL CON EFECTO DESLIZANTE.  El código de este widget le estuvo fallando a Danni-chan, y me pidió de favor que le ayudase con ese problemita. Bueno antes de comenzar con el paso a paso del tutorial debo decir que, los créditos de las imágenes del menú son para Annyz y también el antiguo código (que por alguna razón caducó), pueden verlo en Cute menu con efecto deslizante.

  NUEVO CÓDIGO  


 [ PARA EL EFECTO ] 

PASO 1: Clic en 'Plantilla → Personalizar → Avanzado'. Y en la larga lista que esta en la segunda columna, bajar hasta el final y clic en 'Añadir CSS'.

PASO 2: Pegar el sgte. código en el recuadro en blanco a la derecha. Y aplicar al blog.
#gallery {
  padding:0; 
  margin:0; 
  list-style-type:none; 
  overflow:hidden; 
  width:230px; 
  height:330px; 
  }
#gallery li {
  float:left;
  }
#gallery li a {
  display:block; 
  height:30px;
  width:230px; 
  float:left; 
  text-decoration:none; 
  cursor:default;
  }
#gallery li a img {
  width:230px;
  border:0;
  }
#gallery li a:hover {
  background:#eee; 
  height:149px;
  }
#gallery li a:hover img {
  height:149px;
  }
 [ PARA EL WIDGET ] 

PASO 1: Ahora clic en 'Diseño → Añadir un gadget → HTML/JavaScript'

PASO 2: Pega el sgte. código y guarda.
<ul id="gallery">
<li><a href="URL">
<img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/tutoyrecursos.png" /></a></li>
<li><a href="URL">
<img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/photoshops.png" /></a></li>
<li><a href="URL">
<img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/afiliados.png" /></a></li>
<li><a href="URL">
<img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/renders.png" /></a></li>
<li><a href="URL">
<img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/recetas.png" /></a></li>
<li><a href="URL">
<img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/creditos.png" /></a></li>
<li><a href="URL">
</a></li></ul>
 NOTA:  En donde esta URL sólo debes reemplazarlo por el código que le sigue a la url de tu blog. Por ejemplo para la pestaña tutoriales has creado una entrada y el url te ha quedado así http://aquí-dice-la-url-de-tu-blog.blogspot.com/tutoriales. Entonces a URL lo reemplazarás por la parte pintada en azul, ya que lo que está resaltado en fucsia ya esta predeterminado en esta aplicación. Debiendo, por ejemplo,  quedar así cuando lo reemplaces: a href="tutoriales"

Bien es todo, al final quedará igual que la imagen de arriba (↑↑↑). Espero que te haya sido de ayuda Danni-chan (*0*), te mando un mega-abrazote! Y espero que quién le haya fallado el código también les haya sido de ayuda este tutorial (^^), hasta la próxima. AY! Aún me falta un tercer problema por resolver (ash!¬¬).

17 comentarios:

  1. hace tiempo ke keria conseguir este tuto aww gracias eres la mejor n.n

    ResponderEliminar
    Respuestas
    1. eres la primera ke estrenas mi nuevo nombre n.n ke bien suena jaja

      Eliminar
  2. yay~! hasta ahora que comentas que caduco el codigo, me fijo que a uno de mis blogs tambien le fallo xD gracias.
    por cierto, si ya tenia el codigo en la plantilla html...no pasa nada???

    gracias :D

    ResponderEliminar
    Respuestas
    1. Hola Gadry (>w0). La vdd que no le afecta,yo tenía aplicado los dos códigos en mi blog de pruebas (o sea el antiguo y el actual), todo normal y ok. Pero si gustas puedes eliminar de tu plantilla el antiguo código :D

      Eliminar
  3. Muchas Gracias y ya recibi el abrazo hahhaha

    pero tengo una preguntita D:

    donde se ponen las URL
    de las páginas ?? O:

    porque mira como queda D:

    http://dramas-asiatico.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Bueno cambie el menú a como estaba antes..
      le saque una foto ^^
      http://i1252.photobucket.com/albums/hh568/Danni_17_/Imagen1.png

      pero no están para poner los links y solo se mueve la imagen.. no te redirecciona a ninguna parte ._.
      no se si me entendiste ^^?
      Espero no sea una molestia D:!

      bye!~

      Eliminar
    2. Si está para poner los links Danni-chan XD (sólo que olvidé especificarlo), es aquí: a href="#nogo"> adelante de cada img aparece. Sólo cambia #nogo por el link y listo 8D

      Eliminar
    3. Ya está, cambié el #nogo por URL para que esté más claro XD sorry por no aclararlo antes (^^).

      Eliminar
    4. ahahahah D:
      sorry! Es que soy media ñurda (mala) para estas cosas de HTML ^^
      Gracias :D

      Eliminar
    5. jejeje xD ok ok se entiende :D

      Eliminar
    6. Danni-chan ya he aclarado mejor el tutorial del menú lateral con efecto, espero lo veas (^^). Lee la nota.

      Eliminar
    7. Listo ♥♥
      porfin esta arreglado :'D

      Eliminar

HOME STAFF AFILIATE FOLLOW CONTACT
HOME STAFF AFILIATE FOLLOW CONTACT
Copyright© Nemuri Kuma | Powered by Blogger.
Design n' Blogger template by Kuma.