Secciones con estilo III Plegar y desplegar | Oloblogger Para desplegar una parte del blog, podemos utilizar otros sistemas , pero para este caso de estirar o encoger una parte de la sidebar, vamos...

28 de agosto de 2009

Secciones con estilo III Plegar y desplegar

Para desplegar una parte del blog, podemos utilizar otros sistemas, pero para este caso de estirar o encoger una parte de la sidebar, vamos a usar las librerías SCRIPTACULOUS y PROTOTYPE que con los API's de Google, son bastante fáciles de instalar en un blog... y además tienen un efecto muy resultón.

Si ya las tienes no hay que volverlas a poner, pero si no, copia este código justo antes del </head> de tu plantilla...

<script src='http://www.google.com/jsapi'/><script>
google.load(&quot;prototype&quot;, &quot;1.6.0.2&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.1&quot;);
</script>


Una vez que las tenemos, podemos usar estos SCRIPTS para desplegar cualquier DIV del blog usando esta estructura:

<a href="javascript:void(0);" onclick="Effect.toggle('ID_DEL_DIV','blind'); return false">ENLACE</a>
OTRAS COSAS
<div id="ID_DEL_DIV" style="display: none;">
CONTENIDO OCULTO
</div>

ID_DEL_DIV tiene que ser una cadena alfanumérica única para cada DIV al que se aplique el código. En el enlace hay también que indicarlo para que el intérprete sepa a que elemento estamos llamando. O sease, cada pareja enlace-div debe llevar la misma cadena (p.ej. 5612a46) y si luego hacemos otro despliegue, el nuevo par debe llevar otra cadena distinta. Muchas veces este es el problema de que no funcione bien este SCRIPT.

Ahora a buscar dónde colocarlo. Siguiendo con nuestro pergamino, lo más natural es que el enlace sea el rótulo de la sección y que la parte oculta sea toda la sección que forma la parte central. Como lo vamos usar en una plantilla Blogger, las comillas dobles las sustituimos por simples (') y las dobles por &quot;. De esta manera, y volviendo al código que venimos usando de ejemplo:

<div class='pergamino-arriba'>
<span style='position:absolute;top:70px;left:40px;'>

<a href='javascript:void(0);' onclick='Effect.toggle(&quot;ejemplo20090813&quot;,&quot;blind&quot;); return false'>
PINCHA AQUI</a>

</span>
</div>

<div id='ejemplo20090813' style='display: none;'>

<b:section class='pergamino' id='mediosidebar'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>

</div>


<div class='pergamino-abajo'/>


En lugar de BLIND, podeis probar a ver si el efecto desplegado os gusta más con el parámetro SLIDE o con APPEAR, que dependiendo de cómo monteis la sección, pudieran quedar mejor.

Al final os debería quedar algo así...



Y a partir de aquí, si se han entendido las explicaciones, se pueden idear otro tipo de secciones con otro tipo de fondos, desplegables o no: Imagination Power.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

12 comentarios :

  1. Primera vez que entro a su blog y me fascina el diseño, felicidades!

    ResponderEliminar
  2. buenisimo el material
    tio te lo curras al 120%
    deberias editar un librillo
    saludos

    ResponderEliminar
  3. Hola OLOMAN. Gracias a tus extraordinarias enseñanzas he mejorado mi blog (http://jeramon-jurisprudenciaactualizada.blogspot.com/). Tengo un problema con la SECCION que monté con esta misma imagen de pergamino. Cuando la ves con IE8, al desplegarse, se parte la imagen y la parte media queda centrada mientras la superior y la inferior quedan a la izquierda. Con los demás exploradores se ve bien. Te agradecería me echaras una manito.

    ResponderEliminar
  4. Jeramon, a estas horas, no veo ningún problema en ese bloque. Lo he visto con IE8 y está bien. Ya he visto que usas una plantilla de la casa. Saludos.

    ResponderEliminar
  5. Hola otra vez oloman, como ya te dije...soy torpisima :D

    bien...he usado el scrip de comentarios correctamente el cual quiero que se oculte como explicas aqui.
    he insertado antes de /head en la plantilla.
    Ahora solo me falta combinarlos pero no entiendo como hacerlo.

    El scrip?
    Donde lo coloco exactamente? en la plantilla o en el propio gidgets?
    gracias y perdona mi ignorancia

    ResponderEliminar
  6. Hola. Los enlaces para desplegar los tienes que poner en la propia plantilla. Aquí se explica con algo más de detalle. Saludos.

    ResponderEliminar
  7. gracias oloman! si, en ese enlace lo he comprendido al 100%

    ResponderEliminar
  8. hola oloman soy nuevo por este mundo, me gustaria poner un pergamino en mi blog lo estoy intentando y nada no se donde pegar los codigos solo el primero que me das los demas estoy loco leyendo y buscando donde ponerlos un saludo y tienes una linda pagina sige asin amigo

    ResponderEliminar
  9. Hola Juan Carlos. El segundo trozo es sólo para ilustrar la explicación. El que sí tienes que utilizar es el tercero y ahí sí se explica dónde colocarlo. De todas formas, sería conveniente que vieras el post justo antes de este y el de justo después, porque así tendrás una visión más completa y será más fácil de entender todo.

    ResponderEliminar
  10. hola amigo aqui estoy otra ves para que me heches una manita con el menu horisontal de mi web ya que hay ordenadores que no le sale entera solo la primera barra del menu la otra se escuende y no sale no en todos los ordenadores en algunos pasa eso haver si me hechas una manita en cuadrar la pagina un saludo y gracias

    ResponderEliminar
  11. perdòn no deje el enlace

    www.origenesflamencos.com

    ResponderEliminar
  12. Juan Carlos, si alguien no lo ve, tendrá que cambiar de navegador, porque tanto en Chrome, como en IE y en Firefox, se ve perfecto. Si ves que es mucha a gente a la que le pasa (cosa que me extrañaría), mejor te buscas otro menú prefabricado del tipo de los que puedes encontrar aquí. El problema es que si tanto tú como yo, lo vemos bien, no podemos comprobar qué modificaciones hacen falta.

    ResponderEliminar