Hay varias maneras o utilidades para este código.
Lo principal a tener en cuenta es que trabaja con id que tienen que ser siempre distintos, en el ejemplo voy a cambiar por letras pero pueden ser números o palabras siempre distintos.
Veamos primero el código JavaScript el cual tiene que ir puesto arriba de </head>:
<script type="text/javascript">
function togglvku( targetId )
{
var state = 0;
var blockvkuname = "blockvku" + targetId;
var blockvkuimage = "blockvkucollapse" + targetId;
if ( document.getElementById ) {
target = document.getElementById( blockvkuname );
if ( target.style.display == "none" ) {
target.style.display = "";
state = 1;
}
else {
target.style.display = "none";
state = 0;
}
document.getElementById( blockvkuimage ).src = state ? "http://img29.imageshack.us/img29/8928/menosr.png" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdvtPf44X_xxaw3ewGnRUBC5kDb4fVWWW-1c_rxpbTiNjijyZZsQx8aACJcsgDzRiC_jfRI1IfAAB4n2uYmdlxbBuEzOpjaH-7kisyp-txOB-NjLOwSYW1i-SyNnQOXl1KQI6A_ywkxZvD/s1600/mas.gif";
}
}
</script>
En color rojo tiene que ir la imagen de menos y en azul la de mas.
Pueden cambiar las imágenes a su gusto por otras o flechas de arriba y abajo.
Una ves puesto el código JavaScript sera colocar el código en donde quieran mostrar o ocultar un contenido, pudiendo ser un texto, imagen, etc..
Veamos un ejemplo en una entrada:
TITULO O ABRIR PARA VER EL CONTENIDOEl código del ejemplo:
<a href="javascript: void(0);" onclick="togglvku("A"); return false">La imagen en este caso es la de mas ya que estamos ocultando el contenido.
<img border="0" id="blockvkucollapseA" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdvtPf44X_xxaw3ewGnRUBC5kDb4fVWWW-1c_rxpbTiNjijyZZsQx8aACJcsgDzRiC_jfRI1IfAAB4n2uYmdlxbBuEzOpjaH-7kisyp-txOB-NjLOwSYW1i-SyNnQOXl1KQI6A_ywkxZvD/s1600/mas.gif" style="margin-right: 5px;" />TITULO O ABRIR PARA VER EL CONTENIDO
</a>
<div id="blockvkuA" style="display: none;">
<img src="http://usuarios.sion.com/pauluk/nik/sobras.JPG" /> </div>
La imagen puede ir del lado izquierdo o derecho cambiando margin-right: 5px; por margin-left: 5px; teniendo que ponerla despues del titulo, lo veremos en otro ejemplo.
Fijarse que lo que hace que se oculte el contenido es style="display: none;" si lo quitamos se mostraria el contenido pero tendriamos que cambiar la imagen de mas por la de menos. Lo veremos en el proximo ejemplo.
Las Id hay que cambiarlas cada ves que se utilize este sistema.
Ejemplo con contenido a la vista:
TITULO O CERRAR EL CONTENIDO
El código del ejemplo:
<a href="javascript: void(0);" onclick="togglvku("B"); return false">
<img border="0" id="blockvkucollapseB" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5S9mnzoga2oR3NtYE48EmShCu9HUAMrqHC0toDpGSCwPS1dveqroNkMxl1eSJ63wT7VIzFMIVmbxOw8yxWOLvmVp-OBRMD2b4jGw8IYipibHdwZUKRvobBs78jkM1jR2V1xlyjLWwzF4j/s1600/menos.gif" style="margin-right: 5px;" />TITULO O CERRAR EL CONTENIDO
</a>
<div id="blockvkuB">
<img src="http://usuarios.sion.com/pauluk/nik/sobras.JPG" /> </div>
Veamos un ejemplo con la imagen a la derecha:
TITULO O ABRIR PARA VER EL CONTENIDO
El código del ejemplo:
<a href="javascript: void(0);" onclick="togglvku("C"); return false">
TITULO O ABRIR PARA VER EL CONTENIDO<img border="0" id="blockvkucollapseC" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdvtPf44X_xxaw3ewGnRUBC5kDb4fVWWW-1c_rxpbTiNjijyZZsQx8aACJcsgDzRiC_jfRI1IfAAB4n2uYmdlxbBuEzOpjaH-7kisyp-txOB-NjLOwSYW1i-SyNnQOXl1KQI6A_ywkxZvD/s1600/mas.gif" style="margin-left: 5px;" />
</a>
<div id="blockvkuC" style="display: none;">
<img src="http://usuarios.sion.com/pauluk/nik/sobras.JPG" /> </div>
BUENO ESPERO QUE SE ENTIENDA CUALQUIER COSA ME DEJAN UN COMENTARIO.
Ahora voy a mostrar para adaptarlo en la sidebar para los gadget.
Solo voy a poner para que queden ocultos ya que con los anteriores ejemplos se tendria que entender como cambiar para que quede a la vista.
Buscamos el gadget que queremos ponerle el efecto.
En Diseño, Edición de HTML hay que Expandir plantillas de artilugios.
En este ejemplo sera el HTML1:
Buscamos en el código de la plantilla(Ctrl+F):
<b:widget id='HTML1' locked='false' title='EL TITULO DEL GADGET SI LO TIENE' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Veremos como agregar el efecto:
<b:widget id='HTML1' locked='false' title='EL TITULO DEL GADGET SI LO TIENE' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<a href='javascript: void(0);' onclick='togglvku("A"); return false'><b:if cond='data:title != ""'>
<h2 class='title'><img border='0' id='blockvkucollapseA' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdvtPf44X_xxaw3ewGnRUBC5kDb4fVWWW-1c_rxpbTiNjijyZZsQx8aACJcsgDzRiC_jfRI1IfAAB4n2uYmdlxbBuEzOpjaH-7kisyp-txOB-NjLOwSYW1i-SyNnQOXl1KQI6A_ywkxZvD/s1600/mas.gif' style='margin-right: 5px;'/><data:title/></h2>
</b:if></a><div id='blockvkuA' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div> </div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Todo lo que esta en azul es lo que hay que agregar.
Para entender aun mas ver y comparar los ejemplos, es muy facil, y no olvidar de cambiar las ID.
Leer Importante...
Enlaza el blog ...
Ultimos comentarios
Hola amigo Vku primero que nada quiero agradecerte por trasmitir tus conocimientos a todos nosotros tus lectores, esta es mi segunda visita a tu blog estoy aprendiendo sobre los blogger pues tengo como reto hacer un buen blog aunque te soy sincero no se nada :10) e aplicado algunas de tus enseñanzas en un blog de pruebas pero este realmente no lo entiendo te cuento: Hice una Nueva entrada en mi blog agregue las imagenes de (+) y (-), debajo agregue una nueva imagen guarde como borrador y me fui a plantilla de artilujios pegue el código JavaScript sobre < /head > cambie las direciones de la imagenes (+) y (-) que tienes en el ejemplo por las nuevas direcciones de dichas imagenes guarde cambios y fui a la entrada de borrador la publique y no me dio el resultado deseado que he hecho mal? me puedes ayudar plis =( de antemanos te doy las gracias :6)
@ Magoplup:
tienes que dejarme el link del blog de pruebas para verlo.
igualmente ve probando cambiando ejemplo:
onclick="togglvku("C")
por
onclick='togglvku("C")
o sea cambia " por "
Magoplup:
Por lo que vi y me parece es que el error esta que estas pegando el código desde la pestaña "Redactar" y al ser un código tiene que ponerse desde la pestaña que dice "Edición de HTML"
@ Vku: Exelente me a quedado como lo ilustras en tu explicasion y si tienes razon mi error era que lo colocaba en la parte de redactar y no en el codigo Html de la plantilla que pena pero es que soy nuevo en blogger y por eso no entendia la explicasion =(
Me gustaria si me puedes decir como aplicar este truco para ocultar varias imagenes mira en este blog http://gremioaleaiactaest.blogspot.com/2009/06/dragopavos.html esas son las imagenes que quiero dejar con ese efecto pero que se puedan ver 1 o 2 imagenes y las demas queden ocultas hasta no darle a mostrar como deberia quedar el codigo en ese caso?
Espero no estar violando las normas de el blog al mostrar esa direccion si es asi disculpame no es mi intencion jeje pero solo asi podras ver de que se trata gracias una vez mas Vku
Solo poner las imágenes que quieras ocultar dentro del div como en el ejemplo.
<div id="blockvkuC" style="display: none;">
IMAGEN OCULTA 1
IMAGEN OCULTA 2
IMAGEN OCULTA 3
IMAGEN OCULTA 4
IMAGEN OCULTA ETC...
</div>
Donde C es la id
@ Vku:
Vku nuevamente yo disculpa por tantas preguntas pero es q no e logrado colocar las imagenes como quiero es decir coloque 2 imagenes para q sean visibles y mas abajo añadi el codigo que indicas lo pegue en la plantilla html y en esta parte coloque esto
< img src="http://usuarios.sion.com/pauluk/nik/sobras.JPGhttp://4.bp.blogspot.com/_DsrIEeo2NAc/TEIDNEaXq3I/AAAAAAAAAnw/QmfEmWBIQ6I/s1600/155.gif.jpg" / > < /div >
como puedes ver agregue dentro de (") las dos direcciones de imagen para ver si daba el efecto de mostrar mas de una imagen al darle clik pero en la plantilla el cidigo se transformo en esto
< div id="blockvkuA" style="display: none;" >
< img src="http://usuarios.sion.com/pauluk/nik/sobras.JPGhttp://4.bp.blogspot.com/_DsrIEeo2NAc/TEIDNEaXq3I/AAAAAAAAAnw/QmfEmWBIQ6I/s1600/155.gif.jpg" / > < /div >
como podras ver entre los <div el codigo a dado otra lectura luego de publicada la entrada el resultado lo puedes ver en el blog de pruebas aca nuevamente su direccion http://pruebasalea.blogspot.com/
Mirala por q de verdad a dado otro efecto distinto no el que queria pero si algo diferente si me puedes ayudar a ordenar las imagenes por favor espero tu comentario =D
Las imágenes las tienes juntas en un mismo código.
Donde dice Abrir o cerrar con el simbolo a la derecha quedo bien
El otro código es así:
<a href="javascript: void(0);" onclick="togglvku("1"); return false">
<img border="0" id="blockvkucollapse1" src="http://img406.imageshack.us/img406/2831/masc.png" style="margin-right: 5px;" />PRUEBA VARIAS IMAGENES
</a>
<div id="blockvku1" style="display: none;">
<img src="http://1.bp.blogspot.com/_DsrIEeo2NAc/TEICl7PBXnI/AAAAAAAAAno/wdZGvMBdCCw/s1600/safe_image.php.png"/>
<img src="http://3.bp.blogspot.com/_DsrIEeo2NAc/TEICYppEZQI/AAAAAAAAAng/cf2Cp5klLTg/s1600/bird.gif"/>
</div>
Ves que las imágenes estan en distinta etiqueta img y no en la misma.
cada ves que utilizes el código cambia de id 1, 2, 3, etc... o a, b, c, etc... o nombre facebook, twitter, etc... siempre dentro del un mismo código se cambia en 3 lados.
Si pones la id en 2 códigos distintos esta abrira la primera.
Cualquier cosa en mi sidebar vas a ver mi página de messenger, te comunicas de ahi si estoy conectado y si quieres.
como le hare para poder ocultar y expandir mi gadget de sugerencias porque esta compuesto diferente el codigo algo asi
<b:widget id='Gadget2' locked='false' title='Sugerencias' type='Gadget'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:renderingUrl != ""'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<b:if cond='data:gadgetSnippet != ""'>
<data:gadgetSnippet/>
<b:else/>
<div class='widget-content'>
<b:if cond='data:nonSocialFragment != ""'>
<data:nonSocialFragment/>
</b:if>
</div>
</b:if>
<b:else/>
<data:errorMessage/>
</b:if>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
:24)
<b:widget id='Gadget2' locked='false' title='Sugerencias' type='Gadget'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<a href='javascript: void(0);' onclick='togglvku("A"); return false'>
<!-- only display title if it's non-empty -->
<b:if cond='data:renderingUrl != ""'>
<b:if cond='data:title != ""'>
<h2 class='title'><img border='0' id='blockvkucollapseA' src='http://img406.imageshack.us/img406/2831/masc.png' style='margin-right: 5px;'/><data:title/></h2>
</b:if></a><div id='blockvkuA' style='display: none;'>
<b:if cond='data:gadgetSnippet != ""'>
<data:gadgetSnippet/>
<b:else/>
<div class='widget-content'>
<b:if cond='data:nonSocialFragment != ""'>
<data:nonSocialFragment/>
</b:if>
</div></div>
</b:if>
<b:else/>
<data:errorMessage/>
</b:if>
<b:include name='quickedit'/>
</b:if>
</b:includable>
salio esto
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "b:if" must be terminated by the matching end-tag "".
Error 500
pero gracias de todas maneras
pasa el </div> despues de </b:if> que esta abajo
</div>
</b:if> </div>
uffffffffffffff voy a ver si soy capaz, lo veo muy dificil...ya te contare
@ teofermi: Estoy en el intento pero no entiendo donde debo poner los codigos que muestras en tus ejemplos
aggggg
Teo, lee desde donde dice:
Ahora voy a mostrar para adaptarlo en la sidebar para los gadget.
Ojo tienes que tener el primer código javascript y cambia las imágenes.
Todo se hace con artilugios expandidos.
@ Vku:
Muchas gracias pero creo que voy a desistir, lo he intentado y solo llego a poner la imagen de + al lado del titulo, lo veo muy complicado para mi torpeza
he encontrado algo que me parece facil, lo tengo puesto lo que pasa es que tus botones me gustan mas..
Hola Vku, vengo un a pedirte un favor, acabo de abrir mi blog y me he encontrado con una cosa feisima, donde tengo puesto "gracias por dejar tu comentario", al final del articulo, hasta donde estan los botones para compartir hay un espacio libre horrible y no se a que se debe ni que ha podido pasar, anoche cuando lo cerre no estaba..si me puedes ayudar a quitar y que quede seguido como estaba, te lo voy a agradecer infinitamente...
espero tu ayuda porfa
teo:2)
Lo que desaparecieron fueron los botones de compartir.
En el css de la plantilla agrega .post-share-buttons {display:inline-block}
Si no resulta prueba con .share-button {display:inline-block}
@ Vku:
¿DEBAJO DE DONDE LOS PONGO?
@ teofermi:Yo si veo los botones, ademas en todo el espacio que tengo en negro si pasas el cursor notaras que parece que hay algun enlace o algo, esto es rarisimo, anoche estaba todo bien
arriba de: ]]></b:skin>
@ Vku:
La distancia del espacio negro se ha arreglado con tu segundo codigo pero yo veo botones dobles, los de blogger y los otros que yo tenia..¿tu que ves?
Yo veo doble el de Google Buzz.
Si no tenias los botones de compartir, puedes quitarlos.
Ve a Diseño, Elementos de la página y en Entradas del blog le das en Editar.
Ahí desmarcas en "Mostrar botones para compartir" - guardar
@ Vku:
Si los tenia, por eso te digo que ahora los tengo dobles, tengo los botones de algo asi..
...................
pero me pasaba algo raro tambien, que para verlos tengo que tener marcados los de blogger en los elementos de pagina y si los quito, desaparecen todos y se me monta el titulo de la siguiente entrada.....
Se ve que están repetidos los códigos, yo eso no lo puedo ver, solo vos en tu plantilla. Busca el código de Buzz repetido y borralo con cuidado.
Y/o debes haber puesto el código de los otros botones dentro del div de los botones de blogger.
Antes de hacer cambios resparda la plantilla por las dudas.
@ Vku¿por donde busco mas o menos?¿como debe abrir y cerrar un codigo?¿sabes el codigo de los de blogger y por donde los busco?perdona por tanta insistencia pero es que no se como arreglarlo
Mandame la plantilla por correo.
anfelweb@gmail.com
@ Vku:
Espero que hayas recibido mi correo, solo paso para reiterarte mi agradecimiento que ya sabes que es mucho..
en deuda contigo, eres genial VKU
Otra vez por aqui tu pesadilla española, soy asidua a tu blog y te voy a tener que poner un sueldo jaj, he puesto de nuevo el boton de facebook pero me guatria que vieras como me ha quedado, me gustaria que quedaran los de blogger al lado o justo debajo unos de otros y no tan separados, ¿eso es posible? no se donde tocarle para que me queden juntitos
abusando nuevamente de tu ayuda
teo
Teo lo vemos por correo.
@ Vku:
Holaaa, acabo de ver tu correo, he seguido tus indicaciones y tengo que decirte que ha quedado "chapeau", gracias a tu enorme ayuda mi blog esta quedando "niquelao"
¡¡¡¡Quedo perfecto!!!!
Ahora espero no darte mas en toston durante una temporadita
¡¡¡MIL GRACIAS!!
y un beso desde Andalucia (España)
Fue un gusto poder ayudarte Teo.
Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.
Elegir un botón o imagen, Seleccionar, copiar (Ctrl+C) y pegar en formulario de comentarios.
Nota: solo los miembros de este blog pueden publicar comentarios.