Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

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/AVvXsEhPBvvGJXbbcUZZMZhY9gSmxsizhPRf8Ufn41NSuFFWShFNUdkZK3JsSj9t-ejg3moXWzlQuXSjP9bhQRbODx1MO5mUPmhvTwHlXgzzzM1sc12vQvsHqqz6RboubnFueyGevgdkqouC-yAQ/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/AVvXsEjneSR_hDZm-QoawEXXexcaJysRIHUHtMypxnemJfnZWo59pSrjBagF-sJqw8BSaQHbiZpetKznBId0n7QTnpTdZkLP8u71LRt57tJBmz_rCrd6FcV8gV3qkCfiTVTHMgyD9JATLlN0n1jD/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.

ajcruzgarcia dice...

Hola jaime me ha gustado este truco ;)
pero quisiera colocarlo en la parte derecha baja se podria??
que tengo que modificar??
Gracias
Salu2
Cuidate!

Montse dice...

Jaime, este gadget puede resultar muy útil para avisos que se quieran hacer resaltar.
No se trata de "atiborrar" el blog con muchos gadgets pero siempre es útil saber que existe la posibilidad de incorporarlos cuando sea oportuno, como es el caso de este tan fantástico. Tomo nota de este para tenerlo presente.

No me canso de agradecer el trabajo que haces, y con unas explicaciones sencillas que siempre funcionan.
Un abrazo!!

Jaime Trujillo Escobedo dice...

Me alegro mucho, Pirata1989. Por supuesto que puedes hacer lo que pides.

Para ello, agrega la línea margin-left:50%; dentro del bloque de código que empieza con #blanuncio { (lo encontrarás al final), de manera que obtengas esto:

#blanuncio {
margin-left:50%;
background:url("http://4.bp.blogspot.com/_gjBqKNTws4M/S9cfVZsRwaI/AAAAAAAACRY/mUhUnBC_Rno/s320/blfondd.png") repeat scroll left top transparent;
border:1px solid #CCCCCC;
padding:2px;
position:absolute;
visibility:hidden;
width:576px;
z-index:100;}

Guarda el gadget y listo ^^.

Jaime Trujillo Escobedo dice...

Así es, Montse. Aunque no tengamos determinados widgets instalados de forma permanente, siempre es bueno saber de su existencia. En el caso de este, nos será de utilidad mientras estemos de vacaciones en la playita ;).

No hay nada que agradecer, soy yo el que debe hacerlo por todos vuestros fantásticos comentarios.

Fuentecillas dice...

¡Ay Jaime¡¡
Este ya lo tengo, gracias.
Fiel seguidora de tu blog, el cual me encanta y me enseña mogollón . Me ha enganchado a tope,.
saludos

Jaime Trujillo Escobedo dice...

¡Ay Fuentecillas! A mi me parece que el que está enganchado al blog soy yo... ¡Pero leyendo tus comentarios! jajajaja

De veras, es un gusto poder responderte una y otra vez, (deseando estoy de acabar mis estudios) ;).

¡Gracias!

Anónimo dice...

Jaime, muy buen post,pero tengo un problema. Quisiera tener el anuncio siempre al entrar o actualisar la pagina este hay no solamente 1 ves.
Gracias

Jaime Trujillo Escobedo dice...

wwe-cv, en ese caso tan solo debes cambiar la cifra 1.1 en la línea var blbtn_cerrar=1.1 por un 0.

¡Ya me contarás!

Billy Barrios dice...

:) excelente mil gracias! :)

Jaime Trujillo Escobedo dice...

¡Gracias a ti por comentar, Billy Barrios!

Marcelo Mendoza dice...

Felicitaciones Jaime, excelente Tutorial, agradezco el tiempo y las ganas de aportar. Eres muy claro para explicar. Gracias y sigue adelante.

Saludos cordiales Akil3s

Jaime Trujillo Escobedo dice...

De veras agradezco un montón las felicitaciones, Akiles. Me alegra mucho que hayas podido conseguir lo que deseabas.

¡Abrazos!

Alexis dice...

Hola, muy bueno llevo meses buscándolo, solo teng un problema no se me pone en medio :-( miren el blog http://venitest.blogspot.com/, se queda debajo a la erecha, no se que pasa.

Thanks alexisjuan93@hotmail.com

Jaime Trujillo Escobedo dice...

Alexis, al incluir un archivo en flash, la 'caja flotante' se desconfigura. Prueba a incluir en ella una imagen o texto para comprobar si sigue mostrándose en la esquina inferior derecha.

Anónimo dice...

Welcome!!! :D

Anónimo dice...

Hola, muy buen script, rapido de implementar, muchas gracias, solo tengo una pregunta, resulta que lo coloque y se ve bien, pero detrás del banner principal (que esta en el encabezado y es flash) no se si haya forma de arreglarlo??

Gracias y saludos.

Jaime Trujillo Escobedo dice...

Por supuesto que tiene solución, Anónimo. Envíame la dirección de tu blog para que pueda comprobar la distancia a la que se encuentra el banner y el tamaño del márgen superior a incluir.

Zona Romantica dice...

hola man tengo un problema con tu codigo y que se pone detras de las letras y de los videos de las entradas y quisiera que se ponga delante no detras del texto agradeceria mucho que me respondas en mi blog deliciasdemiperu.blogspot.com

Jaime Trujillo Escobedo dice...

Zona Romantica, me temo que lo que comentas es algo muy complicado y raramente podría evitarse. Puedes probar con otros modelos de 'cajas de aviso'.

JGG dice...

Hola Jaime, me encanta tu web y me ayudas mucho.
Referente al anuncio, puedo hacer ese cajetín más grande?. He puesto de fondo un gif de cuchara como imagen y quisiera que se viera mejor, gracias

Jaime Trujillo Escobedo dice...

Hola Nana. Para aumentar la altura del marco añade esta línea en el gadget html-javascript (al final del código correspondiente al anuncio):

<style>#blanuncio {height: 100px;}</style>

Pulsa el botón guardar y listo.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo