miércoles, 4 de abril de 2012

Cómo Hacer y Poner una Imagen Flotante con Opción "Cerrar" en tu Blog

Si te ha gustado la imagen con opción "cerrar" que tiene mi blog (abajo a la izquierda) puedes poner una en el tuyo con la imagen que quieras y darle la opción a tu visitante de cerrarla si le parece estorbosa y no lo deja leer el contenido de tu blog. Hacer esto no es difícil de hacer, ya lo verás; si yo pude hacerlo, cualquiera puede hacerlo también ^_^
Lo primero que tienes que hacer, es conseguir una imagen que te guste para ponerla en tu blog, para eso buscaremos una imagen en png en el buscador de imágenes de Google. (Generalmente, las imágenes PNG son de fondo transparente, pero también puedes utilizar los mal llamados "render" que son lo mismo). Por ejemplo, pondré en el buscador: Card Captor Sakura PNG. (Has clic sobre las imágenes para poder verlas más grandes).







¿Pero qué debemos hacer cuando queremos poner el texto arriba o al costado de la imagen?










Bueno, ya tenemos realizada nuestra imagen y ahora procederemos a guardarla en Picasa o en cualquier host de imágenes que tengas en la web (Photobucket, etc.) Una cosa más, si la imagen es demasiado grande (puede tapar el blog), la achicaremos con algún programa, yo utilicé el Microsoft Office Picture Manager.
Bien, ahora comenzaremos con lo "difícil", colocar esta imagen en nuestra plantilla.  

Para agregar esta imagen flotante con opción de cerrar entra en Diseño > Edición de HTML y antes de </head> pega esto:


<script type='text/javascript'>
//<![CDATA[
var ftr_arr = new Array();
var ftr_clear = new Array();
function ftrFloat(ftr) {
ftr_arr[ftr_arr.length] = this;
var ftrpointer = eval(ftr_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.ftrsrc = document.all? document.all[ftr] : document.getElementById(ftr);
this.ftrsrc.height = this.ftrsrc.offsetHeight;
this.ftrheight = this.cmode.clientHeight;
this.ftroffset = ftrGetOffsetY(ftr_arr[ftrpointer]);
var ftrbar = 'ftr_clear['+ftrpointer+'] = setInterval("ftrFloatInit(ftr_arr['+ftrpointer+'])",1);';
ftrbar = ftrbar;
eval(ftrbar);
}

function ftrGetOffsetY(ftr) {
var ftrTotOffset = parseInt(ftr.mtasrc.offsetTop);
var parentOffset = ftr.ftrsrc.offsetParent;
while ( parentOffset != null ) {
ftrTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return ftrTotOffset;
}
function ftrFloatInit(ftr) {
ftr.pagetop = ftr.cmode.scrollTop;
ftr.ftrsrc.style.top = ftr.pagetop - ftr.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("ftr_imagen").style.visibility = "hidden";
}
//]]>

</script>





Luego antes de </body> pega lo siguiente:


<div id='ftr_imagen'>
<img border='0' class='close' onClick='closeTopAds();return false;' src='http://4.bp.blogspot.com/_qgZA1ny_dAs/S0jtqeCcWUI/AAAAAAAADkA/qLZkUMRn7FU/s200/iconClose.gif'/>
</div>


Por último pega antes de ]]></b:skin> esto:

#ftr_imagen {
background: url(URL de la imagen flotante) no-repeat;
bottom: 0px;
right: 0px;
width: 128px;
height: 128px;

position: fixed;
}
.close {
float: right;
padding-right: 10px;
cursor: hand;
cursor: pointer;
}

Ya sólo agrega la URL de la imagen flotante donde se indica y en donde dice width cambia el ancho de la imagen y en height el alto.


De esta forma podrás tener una imagen flotante en tu blog que no le estorbará a nadie.


Espero que este tutorial le haya ayudado un poco, cualquier cosa, pueden preguntar ^_^ ¡Nos leemos en el próximo tutorial blogger!

6 comentarios :

  1. Gracias!! Gran tutoriaaal!
    Una pregunta: ¿Cómo hago para poner la imágen del lado izquierdo, en lugar del derecho?
    Gracias ^_^

    ResponderEliminar
    Respuestas
    1. Prueba con poner left en lugar de right en el último código. Son varios right, así que prueba cambiarlos todos a ver qué pasa y luego me cuentas cómo te fue ^_^

      Eliminar
    2. ¡Si funcionó! Muchas gracias. La verdad lo había intentado ya, pero me había salteado un "right" sin querer, y por eso no había funcionado, por eso pregunté. Pero esta vez busqué bien todos, y quedó. Muchas gracias.

      Eliminar
    3. De nada, amiga; y cuando tengas un botón de afiliación de tu blog, lo intercambiamos con el mío, ¿te parece? ¡Espero ver tu blog muy pronto! ^_^

      Eliminar
  2. Claro, sería genial. Aunque no tengo idea de cómo hacer uno, pero supongo que ya investigaré sobre eso. Por ahora estoy acomodando el blog, aún no está presentable para el público xD
    http://umiko-world.blogspot.com/ ese es el link, por si tienes algún consejo que darme xD
    ¡Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Lamento tanto leer tan tarde tu comentario... :(

      Eliminar

Deja tu comentario, siempre con respeto, si no lo haces, lo eliminaré.
Antes de preguntar sobre algo, busca primero la respuesta en los comentarios anteriores, tal vez ahí esté tu respuesta ^_^

Si quieres insertar una imagen usa este código:
[img]URL de la imagen[/img]

Si quieres insertar un video de YouTube o Vimeo usa este código:
[video]URL del video[/video]

No incluyas material para adultos, ni vulgar u ofensivo; tampoco contenido con odio, racismo o discriminación, de lo contrario tu comentario será eliminado.

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer
Related Posts Plugin for WordPress, Blogger...