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.

Read More

Como instalar una barra flotante en el 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.

Aviso o anuncio flotante que permanece fijo al navegar por el blog

Tras haber visto cómo incluir en el blog un cartel o aviso automático al pie de todas las entradas, descubriremos este otro truco de sencillísima configuración. Se trata de un recuadro que permanece flotando en una esquina del blog y que puede cerrarse con un solo clic.

Puedes ver el resultado en este blog de pruebas, desplazándote a través de la entrada para comprobar que el anuncio "flota" sea cual sea la posición a la que llegues.

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

Pega el script:

<div id="blanuncio">
<a href="" onclick="blcartel_cierra(); return false"><img title="Cerrar nota" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimwCC3znP6SNf2XyoidMdRpukB6C0zP5su-25ARLhq7bH04-e0WGEf2W22QKxaVkwKln1WT_DAwfq3fV5nIOj-pQygdOU9twh89lWdOQGAkjhyphenhyphen6wwcol0U2uGHzXl2_EbxGHxTCpY08fyk/s320/blcerra.png" border="0" /></a> CONTENIDO AQUI
</div>

<script type="text/javascript">
var blbtn_cerrar=1.1
var blcartl_1 = 30
var blcartl_3="fromtop"
var blcartl_2 = 5
function blcartl_Activo(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function blcartl_nuevo(llamo) {
var blcartel_aparien = llamo + "="
var blcartel_cam = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(blcartel_aparien)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
blcartel_cam=unescape(document.cookie.substring(offset, end))
}
}
return blcartel_cam;
}
function blcartel_cierra(){
if (blbtn_cerrar)
document.cookie="remainclosed=1"
document.getElementById("blanuncio").style.visibility="hidden"
}
function blcartel_posicion(){
barheight=document.getElementById("blanuncio").offsetHeight
var blcartel1 = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var blcartt = document;
function blavis(id){
var bblaviso=blcartt.getElementById(id);
if (!blbtn_cerrar || blbtn_cerrar && blcartl_nuevo("remainclosed")=="")
bblaviso.style.visibility="visible"
if(blcartt.layers)bblaviso.style=bblaviso;
bblaviso.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
bblaviso.x = blcartl_1;
if (blcartl_3=="fromtop")
bblaviso.y = blcartl_2;
else{
bblaviso.y = blcartel1 ? pageYOffset + innerHeight : blcartl_Activo().scrollTop + blcartl_Activo().clientHeight;
bblaviso.y -= blcartl_2;
}
return bblaviso;
}
window.stayTopLeft=function(){
if (blcartl_3=="fromtop"){
var blcartel2 = blcartel1 ? pageYOffset : blcartl_Activo().scrollTop;
ftlObj.y += (blcartel2 + blcartl_2 - ftlObj.y)/8;
}
else{
var blcartel2 = blcartel1 ? pageYOffset + innerHeight - barheight: blcartl_Activo().scrollTop + blcartl_Activo().clientHeight - barheight;
ftlObj.y += (blcartel2 - blcartl_2 - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 6);
}

ftlObj = blavis("blanuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", blcartel_posicion, false)
else if (window.attachEvent)
window.attachEvent("onload", blcartel_posicion)
else if (document.getElementById)
window.onload=blcartel_posicion
</script>
<style type="text/css">
#blanuncio {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2tuhlMvCJKAU7oI7JkjJJSycf9iZxH2oX10oUfrD7gVkPfnRj8BuISwsw-hyXvRAlH9eZEf_912JYYU4J3qovLvF506w5Mp4DN26vCT9bsWfDE3OfXurZiviZCAj7YKaKcvApwQSMD0m1/s320/blfondd.png") repeat scroll left top transparent;
border:1px solid #CCCCCC;
padding:2px;
position:absolute;
visibility:hidden;
width:576px;
z-index:100;}
#blanuncio img {margin-right: 8px;}
#blanuncio a:link, #blanuncio a:hover, #blanuncio a:visited {color: #000000;}</style>

Reemplaza CONTENIDO AQUI por el contenido (texto) que tendrá el anuncio.

Puedes personalizar el ancho que tendrá el recuadro del anuncio editando el valor 576px en la línea resaltada en verde, al final del código.

Para cambiar la imagen de fondo del aviso, borra la línea marcada en azul e inserta la dirección de tu imagen.

Finalmente, si deseas editar la imagen de cierre borra la primera URL del script (resaltada en verde) e introduce la URL de tu icono.

En caso de no saber el procedimiento para obtener la URL de una imagen, accede a esta entrada.

Una vez editados los parámetros, procederemos a guardar el gadget.

Read More