¡Hola, querid@s arrinconad@s!

Como trabajo todos los días, habrán momentos en que demoraré en la actualización del blog o en responder sus comentarios, así que les pido paciencia, sepan que sí o sí cumpliré y seguiré con el blog cueste lo que me cueste. ¡Gracias! ¡Ah! Para estar al día con las actualizaciones, pueden seguirme por Facebook, Twitter o suscribirse por email.
Gabriella Yu

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!

8 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
  3. Muchas gracias por el tutorial, me fue de mucha utilidad :)

    ResponderEliminar
    Respuestas
    1. ¡Hola! Tanto tiempo sin saber de vos, ¿cómo estás? Cualquier día paso por tu blog :)
      Me alegra mucho que te haya ayudado en algo :>)

      Besos!

      Eliminar

DEJA TU COMENTARIO, SIEMPRE CON RESPETO O LO ELIMINARÉ.
ANTES DE PREGUNTAR ALGO, BUSCA PRIMERO LA RESPUESTA EN LOS COMENTARIOS ANTERIORES.

SI QUIERES INSERTAR UNA IMAGEN USA ESTE CÓDIGO:
[img]URL de la imagen[/img]
SI QUIERES INSERTAR UN VIDEO USA ESTE CÓDIGO:
[video]URL del video[/video]
NO INCLUYAS MATERIAL INADECUADO O TU COMENTARIO SERÁ ELIMINADO.

SI NO RESPONDO TU COMENTARIO UN DÍA DESPUÉS DE QUE LO PUBLICASTE, SEGURO QUE ESTOY MUY OCUPADA CON MI TRABAJO O QUE NO TENGA INTERNET, ASÍ QUE PIDO DISCULPAS POR LAS DEMORAS Y RUEGO QUE SEAS PACIENTE HASTA QUE PUEDA RESPONDERTE. ¡GRACIAS!

:) :-) :)) =)) :( :-( :(( :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...