Espero que este blog ayude a aquellos que están buscando conocimientos, al igual que yo.
Sígueme en:
Blogger Google+ facebook twitter you yube Ver perfil en Linkedin Agregar a Favoritos/Marcadores
pica pica curioso Mi Ping en TotalPing.com Buscar en el blog
Cerrar X Bienvenido amig@!!! Recuerda que puedes recibir las actualizaciones del blog a través de Facebook y/o Twitter, o Suscríbase al Feed vía RSS o vía Email.

Siempre, Siempre, Siempre, antes de modificar tu plantilla guarda una copia.

Descarga la plantilla o copias el código en el bloc de notas.

¿Que es RSS?:

RSS (Really Simple Syndication)

Es un sistema que nos permite enterarnos de las actualizaciones de las paginas que visitamos frecuentemente, sin tener que visitarlas directamente.

¿Cómo funciona?

Así cómo para poder leer correos electrónicos tenemos que tener una cuenta y un lector de correo electrónico, para poder leer nuestras paginas en RSS tenemos que tener un lector de RSS.
Existen muchos lectores de RSS pero uno de los mas sencillos de usar y mas utilizados por todos es el Google Reader, este lector se encarga de agrupar todos los sitios que visitamos frecuentemente mostrándonos la actualización que cada sitio tiene sin necesidad de ir a visitarlos.
Antes yo entraba a los sitios a mirar si habían publicado algo nuevo, ahora mediante los RSS cuando el sitio publica algo nuevo me llega su actualización.

Sencillo, rápido y útil.
votar
Achicar Entrada Agrandar Entrada
El ejemplo lo pueden ver en mi sidebar.

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" :  "http://2.bp.blogspot.com/_WvACVGW1iPE/TJkgxGifEvI/AAAAAAAABWY/3kBVCMnoalA/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 CONTENIDO


El código del ejemplo:
<a href="javascript: void(0);" onclick="togglvku(&quot;A&quot;); return false">
<img border="0" id="blockvkucollapseA" src="http://2.bp.blogspot.com/_WvACVGW1iPE/TJkgxGifEvI/AAAAAAAABWY/3kBVCMnoalA/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 en este caso es la de mas ya que estamos ocultando el contenido.
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(&quot;B&quot;); return false">
<img border="0" id="blockvkucollapseB" src="http://3.bp.blogspot.com/_WvACVGW1iPE/TJkfEMDWxyI/AAAAAAAABWU/URbObExo7xk/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(&quot;C&quot;); return false">
TITULO O ABRIR PARA VER EL CONTENIDO<img border="0" id="blockvkucollapseC" src="http://2.bp.blogspot.com/_WvACVGW1iPE/TJkgxGifEvI/AAAAAAAABWY/3kBVCMnoalA/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 != &quot;&quot;'>
<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(&quot;A&quot;); return false'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><img border='0' id='blockvkucollapseA' src='http://2.bp.blogspot.com/_WvACVGW1iPE/TJkgxGifEvI/AAAAAAAABWY/3kBVCMnoalA/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... Comentar esta entrada ▼ Ir al principio de la entrada
Magoplup dijo...

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)

Vku dijo...

@ 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 dijo...

Vku sin mucho mas que decir y esperando tu ayuda en la solucion de este truco te dejo el link de mi blog de pruebas es este http://pruebasalea.blogspot.com/ alli veras lo que hice copie y pegue tus ejemlos y no me quedo quisas algo no este haciendo bien gracias por tu respuesta :1) si tienes alguna sugerencia sobre ese blog sera bien recibida

Vku dijo...

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"

Magoplup dijo...

@ 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

Vku dijo...

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

Magoplup dijo...

@ 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

Vku dijo...

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.

PeliculasTube dijo...

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 == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:renderingUrl != &quot;&quot;'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<b:if cond='data:gadgetSnippet != &quot;&quot;'>
<data:gadgetSnippet/>
<b:else/>
<div class='widget-content'>
<b:if cond='data:nonSocialFragment != &quot;&quot;'>
<data:nonSocialFragment/>
</b:if>
</div>
</b:if>
<b:else/>
<data:errorMessage/>
</b:if>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

:24)

Vku dijo...

<b:widget id='Gadget2' locked='false' title='Sugerencias' type='Gadget'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript: void(0);' onclick='togglvku(&quot;A&quot;); return false'>
<!-- only display title if it's non-empty -->
<b:if cond='data:renderingUrl != &quot;&quot;'>
<b:if cond='data:title != &quot;&quot;'>
<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 != &quot;&quot;'>
<data:gadgetSnippet/>
<b:else/>
<div class='widget-content'>
<b:if cond='data:nonSocialFragment != &quot;&quot;'>
<data:nonSocialFragment/>
</b:if>
</div></div>
</b:if>
<b:else/>
<data:errorMessage/>
</b:if>

<b:include name='quickedit'/>
</b:if>
</b:includable>

PeliculasTube dijo...

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

teofermi dijo...

uffffffffffffff voy a ver si soy capaz, lo veo muy dificil...ya te contare

teofermi dijo...

@ teofermi: Estoy en el intento pero no entiendo donde debo poner los codigos que muestras en tus ejemplos
aggggg

Vku dijo...

Teo, lee desde donde dice:

Ahora voy a mostrar para adaptarlo en la sidebar para los gadget.

Vku dijo...

Ojo tienes que tener el primer código javascript y cambia las imágenes.
Todo se hace con artilugios expandidos.

teofermi dijo...

@ 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

teofermi dijo...

he encontrado algo que me parece facil, lo tengo puesto lo que pasa es que tus botones me gustan mas..

teofermi dijo...

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)

Vku dijo...

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}

teofermi dijo...

@ 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

teofermi dijo...

@ 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?

Vku dijo...

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

teofermi dijo...

@ 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.....

Vku dijo...

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.

teofermi dijo...

@ 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

teofermi dijo...

@ 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

teofermi dijo...

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

teofermi dijo...

@ 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)

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.

Si no puedes comentar, intenta con el antiguo formularioO leer solución

VituaRadio
Informe Importante

Por un tiempo voy a estar sin internet, así que no voy a actualizar ni poder contestar a los comentarios.
Suscribirse a las entradas Suscribirse a las entradas vía Mail Suscribirse a los comentarios
¿Que es RSS?