CÓMO HACER DESPLEGABLES TUS GADGETS DE BLOGGER

26 feb. 2015

COMO HACER DESPLEGABLES GADGETS BLOGGER

Muy buenas a todos. ¿ Cómo estáis? Yo sigo medio bien medio mal. Esta gripe es interminable... De hecho, en el vídeo que veréis hoy notaréis mi expléndida voz de teleoperadora sexy ( sí, vamos, seguro).

De hecho, por ese motivo había pospuesto este vídeo. Quería tener una voz medio decente para poder explicaros lo que vengo a contaros hoy: Cómo hacer desplegables los gadgets de blogger. Sé que no pronuncio todo lo bien que debería, pero por lo menos puedo decir la "m" y la "n" con algo de normalidad, sin parecer una chica francesa del mismísimo corazón de París.


A lo que vamos, hoy vamos a aprender algo que es muy muy sencillo y que queda genial en nuestros blogs. Yo puse los gadgets desplegables hace unas cuantas semanas y sois muchos quienes os habéis interesado, así que vamos a ver qué instrucciones os doy yo para hacer esto.

COMO HACER DESPLEGABLES GADGETS BLOGGER

Este tutorial, aunque modificado, lo he sacado de aquí, y además me consta que Irene, de El desván de Ideas también hizo sus pinitos con el tema. Así que hoy os traigo mi versión, como siempre, desmenuzada paso a paso para que no haya ataques de locura ni tirones de pelo. 

Creo es perfecto para los tres gadgets que vamos a ver: archivo del blog, posts populares y posts favoritos. Es una información que está muy bien que tengamos en nuestra columna lateral, pero que ocupa un huevo y medio. Esto hace que el blog se vea mucho más apelotonado.

Eso sí, tampoco os vengáis arriba poniendo todo desplegable y no se vea nada de nada en vuestra columna. Algún banner, una fotico, las secciones de vuestro blog, etc. Esto ya depende del gusto de cada uno. De hecho, al final del post os cuento cómo podéis hacer desplegables otros gadgets que no sean los que vemos aquí (esto ya es para pros y valientes).

COMO HACER DESPLEGABLES GADGETS BLOGGER

Así que sin más rollos, vamos a aprender cómo hacer desplegagles estos tres gadgets y conseguir un blog más ordenado. 

para comenzar

En primer lugar debemos hacer, sí o sí, una copia de seguridad de nuestro blog. No nos la queremos jugar, así que vamos a hacer esta copia de seguridad. Una vez hecha, ya podemos pasar al resto de instrucciones.

Antes de ver el vídeo,tenéis que descargar un documento word donde aparecen todos los códigos que vais a necesitar. Para descargarlo podéis pinchar aquí o pulsar sobre el botón de descargar.


los códigos que necesitaremos

Bueno ahora viene el momento en el que se os saltan las lágrimas, comenzáis a flipar, a decir que no lo vais a hacer y no sé qué más. Bueno, podéis hacer un drama si queréis, pero os aseguro que no es para tanto. De momento este es el código después, en el vídeo, os explico hasta el último detalle qué debéis hacer con él.

Este código es el mismo que encontraréis en el documento word. Bueno, en realidad es parte del código. Es el HTML necesario para poder hacer desplegable el archivo del blog. El resto lo encontraréis en el documento, que sino esto se hace eterno.

Código que copiaremos y pegaremos justo después de HEAD

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>


Código que necesitamos para hacer desplegable el gadget de archivo del blog

<b:widget id=' BlogArchive1 ' locked='false' title='Título del gadget de archivo' type=' BlogArchive '>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>
<span id='expandirGadget1' style='cursor:hand;cursor:pointer;'>
&#9660;
<data:title/>
</span>
</h2>
</b:if>
<div class='widget-content'>
<div class='expandir1' style='display: none;'>

<data:content/>


</div>
<script>$(document).ready(function(){$(&#39;#expandirGadget1&#39;).click(function(){$(&#39;.expandir1&#39;).slideToggle(&quot;slow&quot;)})});</script>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
el vídeo tutorial

Y ahora viene la madre del cordero. En el vídeo os explico todo con detalle, así que no me perdáis ojo. Id dando todos los pasos al mismo tiempo que lo hago yo. Seguro que os sale estupendamente.


hacer desplegables otros gadgets

Para hacer desplegables otros gadgets tendréis que seguir las mismas instrucciones que hemos visto en el vídeo pero señalando el WIDGET correspondiente. El código que necesitaréis es el mismo que vemos en el documento word. Lo único que tendremos que hacer es cambiar el número que aparece en color azul. 

Es decir, si ya hemos puesto 3 gadgets desplegables, como es el caso del tutorial, y queremos poner un cuarto. Cuando vayamos a pegar el código deberemos cambiar el número 3 por el número 4. Mirad un ejemplo.
<span id='expandirGadget3
<span id='expandirGadget4' 

Y esto lo haremos en todas las partes del código donde aparezca el número. Lo cambiamos manualmente y listo. No obstante, como os digo, es más que suficiente con los gadgets que hemos visto antes, pero si os animáis aquí tenéis la respuesta.


Y esto es todo por hoy. Espero que os haya gustado la entrada, que la compartáis y que la pongáis en práctica. Y también aprovecho para recordaros que hoy, a las 23:59 acaba la oferta en los cursos de diseño, ahí lo dejo.


Nos leemos muy prontito majos
Un besazo
MAY
Share to Facebook Share to Twitter Email This Pin This Share on Google Plus

30 comentarios:

  1. Muy bueno el post May, creo que mañana mismo lo hago...es siper practico!!!
    Gracias por compartirlo...
    Besos
    by Ana Minaya

    ResponderEliminar
  2. Realmente muy útil, muchas gracias, eso definitivamente ayudará a que mi blog se vea mucho más organizado, lo has explicado muy bien y no se ve tan dificil ahora. Muchas gracias May!

    ResponderEliminar
  3. Genial May....ya estoy a ponerlo en practica!!

    ResponderEliminar
  4. Genial May!! Gracias por tus consejos!!!

    Un Besazo!!!!!

    ResponderEliminar
  5. Yo también lo pondré en práctica! :)
    Gracias! es magnífico el post...
    Besetes!

    ResponderEliminar
  6. Justo lo que buscaba! Sobre todo lo del archivo que ocupa mucho!
    Besotes y cuídate!

    ResponderEliminar
  7. Qué chulo May, pero me da un miedo tocar la plantilla HTML!!! en los videos se ve muy sencillo, pero luego hay miles de complicaciones, no encuentras bien dentro de la plantilla alguna palabra y ya te echas atrás, como me ha pasado en otras ocasiones :-( Intentaré probar el truco este fin de semana con alguna plantilla de prueba. Gracias!!!

    ResponderEliminar
  8. Y si no tenemos título en el gadget y tenemos una imagen (a modo de título) podemos hacerlo igual??
    Gracias!!

    ResponderEliminar
  9. Estupendo, habrá que ponerlo en práctica

    ResponderEliminar
  10. hola may! lo he hecho tal cual, y se me ha hecho bien hasta que le he clickado encima que no se me expande, sabes por qué podría ser?? lo he repasado y es que está igual

    ResponderEliminar
  11. JO! pues lo he hecho tal cual y creeme que no lo he logrado expandir! ¿Por qué será esto? AYUDA :((((

    ResponderEliminar
  12. YA lo he logrado, que tonta, no habia puesto algo jajaja gracias May! estupendo el tuto!

    ResponderEliminar
  13. Hola May !!! Gracias por todos tus tutoriales son ideales , lo he realizado y me ocurrio que al desplazarlo hacia abajo , no se queda abierto para que me de la oportunidad de escoger cual mes deseo ver, esto es en ARCHIVO del BLOG sino automáticamente se vuelve a cerrar ... si me pudieras ayudar... mil gracias .. Besos

    ResponderEliminar
  14. ¡Hola May! He seguido el tutorial al pie de la letra, pero no se me despliegan los gadgets. Me salen tal cual deberían estar, pero al clickar para que se expandan no funciona. No sé qué puede ser, me estoy volviendo loca jajaja, ojalá me puedas ayudar.
    ¡Un besazo!

    ResponderEliminar
  15. Me encantó!! y ya lo puse en práctica, ahora se ve mejor organizado!!!! MUCHAS GRACIAS!!, ME ENCANTA TU BLOG!! :)

    ResponderEliminar
  16. yo tampoco consigo que se me desplieguen

    ResponderEliminar
  17. ¡May, tengo un problema! Lo que pasa es que me sale todo, me queda como un menú hermoso y despegable, pero cuando le voy a hacer clic para que se despliege el menú y me muestre el contenido, ¡no me sale! Hace de cuenta que no hubiera anda allí.

    ¡Muero! Ayuda :c

    ResponderEliminar
    Respuestas
    1. Seguro que has seguido bien los pasos? Estos tutos son para las plantillas simples, si esa no es la que tienes puede ser que no funcione

      Eliminar
  18. Respuestas
    1. Has seguido todos los pasos, sin saltarte nada de nada¿¿

      Eliminar
  19. Llevo toda la tarde con esto. Ya son las 10 pm y no puedo todavia :S

    ResponderEliminar
    Respuestas
    1. hOLA!
      Pues no sé qué puede ir mal... no sé explicarlo de otra manera. Tienes la plantilla simple de blogger?

      Eliminar
  20. Hola guapi!!!
    Acabo de hacerlo todo tal cual como lo explicas en el video, y cuando lo pongo en el blog me sale el triangulito pero no me sale nada mas... ni se me ve lo de archivo ni sale el desplegable ni na de na! sabes por que puede ser?
    Gracias de antemano.

    Besines

    ResponderEliminar
  21. vale, nada... ya esta solucionado!!!! jejeje es que se puso un intro en el código y claro, lo separo y no lo reconocía ;)

    Besines

    ResponderEliminar
  22. ¡Muchas gracias! La única pega que le veo es que, en vez de decir "y pegamos esto aquí" deberías decir "y pegamos esto donde pone xxxx" ya que en el vídeo no se ven muy bien las letras del html.

    Besitos ^^,

    ResponderEliminar
  23. Me encanta May!! Que chulo!!
    Gracias a ti todo parece fácil de hacer! Gracias!

    ResponderEliminar
  24. Hey, Una pregunta; Como se hace para etiquetas?

    ResponderEliminar

Muchas gracias por escribirme!! Si quieres puedes hacer alguna petición, recomendación... ¡¡Me encanta leeros!!