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!¬¬).