Un widget para tener perfil despegable en tu blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Un widget "Perfil desplegable" para tu blog

Es muy probable que en tu blog dispongas de un apartado en el que incluyes datos personales, una breve descripción de ti o simplemente una fotografía. Además, blogger nos ofrece un gadget denominado "Perfil" ideal para esto mismo.

Basándome en dicha herramienta he querido idear un nuevo widget, un elemento que despliega tu información al pulsar un botón, tal y como puedes ver en esta imagen:


¿Lo mejor de todo? la facilísima instalación que conlleva.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> en tu plantilla y añade esto encima:

<script type='text/javascript'>
function blcnperf1(blconted) {
var c=blconted.nextSibling;
if(c.style.display=='none') {
c.style.display='block';
} else {
c.style.display='none';
}
return false;
}
</script>
<link href='https://sites.google.com/site/scriptsbalcon/b/blcnperf.css' media='all' rel='stylesheet' type='text/css'/>

Guarda la plantilla.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega el código:

<a onclick="return blcnperf1(this);" style="cursor: hand; cursor: pointer;"><center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk2i-ewkUuHR4pHx_DoEwZgVM12dwkT02bT2hLAzTTIwaTmwaqivQAh3hcH7Aeps8Q4CfkUJsW4v1xq_PaAhhfruxRN0n8Im-LfrIMQBYkJfQnhl3D2oJghDIzc4YhQJdz7N_XKNqFJuGo/s320/blmiprf.png" /></center></a><div style="display: none;">
<div id="blcn1"><img src="URL DE TU FOTO" />
<span id="balcneleM">Nombre:</span>TU NOMBRE
<br /><span id="balcneleM">Sexo:</span>TU SEXO
<br /><span id="balcneleM">Profesión:</span>TU PROFESION
<br /><span id="balcneleM">Ubicación:</span>TU UBICACION
<br /><span id="balcneleM">Intereses:</span>TUS INTERESES
</div>
</div>

Ahora tan solo necesitas rellenarlo. Para ello, sustituye las frases en color verde con tus datos personales y guarda el gadget una vez hayas terminado.

Ten en cuenta que puedes incluir una fotografía por lo que deberás reemplazar URL DE TU FOTO con la dirección de la imagen que previamente hayas alojado en blogger o en algún otro servicio.

Si deseas añadir más campos de texto, utiliza líneas como esta (insértalas siempre antes de los cierres </div> y </div>):

<br /><span id="balcneleM">Intereses:</span>TUS INTERESES

Ahora, tan solo disfruta de tu nuevo widget.