CÓMO HACER DESPLEGABLES TUS GADGETS DE 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.

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

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.
descargar
códigos html
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.

cursos para mejorar tu blog
MEGA PACK DISEÑA TODO Y MÁS pack carteles con todo el rollo Curso diseño corporativo pack emprendedor
75€
+INFO 
35€
+INFO 
35€
+INFO
50€
+INFO
catálogo completo 
de cursos online

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.  Nos leemos muy prontito majos
Un besazo


N E W S L E T T E R


NO TE VAYAS SIN DESCARGAR 
SI TE HA GUSTADO ¡COMPÁRTELO!



Share to Facebook Share to Twitter Email This Pin This Share on Google Plus

Otros posts intersantes: