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("prototype", "1.6.0.2");
google.load("scriptaculous", "1.8.1");
</script>
google.load("prototype", "1.6.0.2");
google.load("scriptaculous", "1.8.1");
</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>
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 ". 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("ejemplo20090813","blind"); 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'/>
<span style='position:absolute;top:70px;left:40px;'>
<a href='javascript:void(0);' onclick='Effect.toggle("ejemplo20090813","blind"); 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.
- Secciones con estilo I. Intercalar y formatear una nueva sección en sidebar.
- Secciones con estilo II. Fondos cuando la longitud es variable.
¿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.
Y muchos más artículos interesantes si nos sigues en...
Primera vez que entro a su blog y me fascina el diseño, felicidades!
ResponderEliminarbuenisimo el material
ResponderEliminartio te lo curras al 120%
deberias editar un librillo
saludos
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.
ResponderEliminarJeramon, 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.
ResponderEliminarHola otra vez oloman, como ya te dije...soy torpisima :D
ResponderEliminarbien...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
Hola. Los enlaces para desplegar los tienes que poner en la propia plantilla. Aquí se explica con algo más de detalle. Saludos.
ResponderEliminargracias oloman! si, en ese enlace lo he comprendido al 100%
ResponderEliminarhola 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
ResponderEliminarHola 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.
ResponderEliminarhola 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
ResponderEliminarperdòn no deje el enlace
ResponderEliminarwww.origenesflamencos.com
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