Abeja volando en la pantalla

19 de abril de 2010 91 comentarios ,
Este es un script creado por Juan Rodríguez que nos pondrá a jugar un poco, pues hará que una abeja vuele por la pantalla del blog y no se detendrá hasta que consigas hacer click sobre ella.
Puedes ver un ejemplo en este blog de pruebas.

Para ponerlo en tu blog sólo necsitas realizar dos sencillos pasos, entra en Diseño | Añadir gadget | HTML/Javascript y ahí pega este código:
<h3 align='center'>Controles de la abeja</h3>
<div id='abeja' style='position:absolute; top:0px; left:0px; visibility:hidden; z-index:10'>
<a href='javascript:void(0)' onclick='abejacazada()'><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S7TLQwDUqeI/AAAAAAAAAOw/IIw_pAeBOM8/s1600/Abeja.gif" style="width:52px; height:51px; border:0;" /></a></div>

<center>
<input name="detener" type="button"
onclick="abejacazada()" value="Detener" />
<input name="volar" type="button"
onclick="iniciar()" value="Volar" />
</center>

<script type='text/javascript'>
// Juan Rodríguez [Consultor]
<!-- inicio
var velocidad=100;
var cambio=200;
var CamHorMax=25;
var CamVerMax=25;
var hor, ver;
var DesHor=2;
var DesVer=2;
var DirHor=true;
var DirVer=true;

function iniciar() {
ajustar();
volar(hor/2,ver/2);
document.getElementById('abeja').style.visibility="visible";
animar();
cambiar();
reiniciar(); }

function ajustar() {
if (document.all) {
hor=document.body.clientWidth;
ver=document.body.clientHeight }
else if (document.getElementById && !document.all) {
hor=window.innerWidth;
ver=window.innerHeight } }

function volar(PosHor, PosVer) {
document.getElementById('abeja').style.top=parseInt(document.getElementById('abeja').style.top)+PosVer + "px";
document.getElementById('abeja').style.left=parseInt(document.getElementById('abeja').style.left)+PosHor + "px"; }

function animar() {
PosHor=parseInt(document.getElementById('abeja').style.left);
PosVer=parseInt(document.getElementById('abeja').style.top);

if (DirVer) {
if ( (PosVer) > (ver-75) ) {DirVer=false; volar(0,-DesVer); } else {volar(0,DesVer); } }
else
{ if ( (PosVer) < 75) {DirVer=true; volar(0,DesVer); } else {volar(0,-DesVer);} }

if (DirHor) {
if ( (PosHor) > (hor-75) ) {DirHor=false; volar(-DesHor,0); } else {volar(DesHor,0); } }
else
{ if ( (PosHor) < 75) {DirHor=true; volar(DesHor,0); } else {volar(-DesHor,0); } }
setTimeout('animar()',velocidad); }

function cambiar() {
DirHor=(Math.floor(Math.random()*2)==0);
DirVer=(Math.floor(Math.random()*2)==0);
DesHor=Math.floor(Math.random()*CamHorMax);
DesVer=Math.floor(Math.random()*CamVerMax);
setTimeout('cambiar()',cambio); }

function abejacazada() { document.getElementById('abeja').style.visibility="hidden" }

function reiniciar() {setTimeout("window.onresize=releer",400) }

function releer() { window.location.reload() }

window.onresize = ajustar
window.onload = iniciar;
// final -->
</script>

Con eso tendrás un lindo insecto volando por la pantalla de tu computadora. Verás que si quieres hacer trampa te cansas de intentar cazarla puedes usar los botones de la sidebar, con el botón Detener la abeja desaparecerá, y con el botón Volar regresará de nuevo.

Si quisieras cambiar la abeja por otro insecto como una mosca, una mariposa, etc. sólo cambia la línea en color verde por la URL de la imagen que desees, ¡y a cazar se ha dicho!


91 comentarios en:

" Abeja volando en la pantalla "

  1. jahajaha esta muy bueno para darle otro toque al blog... muchas gracias

    ResponderEliminar
  2. Hola Potro, la verdad es la primera vez que escribo en tu blog. Pero he estado al pendiente de la informacion que has publicado ya que me ha ayudado para poder configurar el mio. El script esta bien chido para jugar un rato... Gracias por la ayuda, Estare escribiendo pronto por aqui..Saludos!

    ResponderEliminar
  3. MCarlitooH2, para que se diviertan un rato tus lectores :)

    Oliver, muchas gracias por tu comentario y qué bueno que te haya gustado el script. Bienvenido al blog!

    ResponderEliminar
  4. jaja estuvo muy divertido atrapar a la abeja, pero lo mas dificil fue buscarla la primera vez porque no sabia donde estaba.

    Saludos.

    ResponderEliminar
  5. Por cierto, veo que ya aparecen los links entradas mas recientes, antiguas y pagina principal, pero en mi blog no aparecen, que puedo hacer.

    ResponderEliminar
  6. Hola potro

    wow muy bueno, realmente me sorprendes con cada nueva entrada tuya ;)

    saludos!

    ResponderEliminar
  7. Hola El Venado,

    Si antes estaban y ya no aparecen busca en tu blog esta línea y pega lo que está en negrita:

    #blog-pager {
    clear:both;

    Saludos.

    ResponderEliminar
  8. samantha, gracias por tus comentarios y por supuesto por visitarnos seguido.

    Jpz, fuiste más rápido que yo, la primera vez pasé como 15 minutos y no podía, jaja.

    ResponderEliminar
  9. Hola Potro, bonito script, lo pondré en mi blog una temporadita para que se entretengan los visitantes, le voy a intentar cambiar la posición ya que me sale encima de la cabecera. Un saludo

    ResponderEliminar
  10. muy buen script ^^ pero hay que reconocer que la abeja es cutre eh! xD

    gracias potro ^^

    ResponderEliminar
  11. ahh casi me pica, jajaja.
    Muy bueno

    ResponderEliminar
  12. Un script muy original
    Muy bueno :P

    Saludos!!

    ResponderEliminar
  13. Alberto, está bien dejarlo aunque sea un rato, ya cuando se aburran de cazarla lo quitas ;)

    Troyanonano, a mí me parece linda la abeja :)

    PepeX, ten más cuidado, no vaya a ser la próxima un abejorro, jajaja.

    Mathias, qué bueno que te ha gustado :)

    ResponderEliminar
  14. Muy mona la abejita, pero me pone de los nervios, jajajaaja, así que paso de ella, de lo que no he pasado es de poner vuestro banner, ya que me parece uan página imprescindible para mí y todos mis seguidores, que son muchisimos (conmigo por lo menos dos)
    Un beso y tenéis uan nueva seguidora.
    Nela

    ResponderEliminar
  15. Muchísimas gracias Nela, eres bienvenida las veces que así lo desees.
    Besos.

    ResponderEliminar
  16. Por nada Potro, me gusta bastante tu web :)

    saludos!

    ResponderEliminar
  17. Hola potro, como puedo quitar en la plantilla de RevolutionChurch lo de ad Banner es un incordio,ponga lo que ponga siempre esta, gracias

    ResponderEliminar
  18. Hola Rober y July,

    Entra en Diseño > Edición de HTML y busca esta línea:
    div class='headerright'

    Debajo de ella está el código del enlace y de la imagen de ese banner.

    Saludos.

    ResponderEliminar
  19. hola man que buena esta la abeja sta re buena
    me gusta mucho esta página tiene entradas muy creativas

    ResponderEliminar
  20. Gracias de nuevo potro, pero me dice

    "No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "body" must be terminated by the matching end-tag ""."

    Ha sido al copiar lo del body y tal. Sólo vuela cuando le doy a volar. Gracias por la ayuda

    saludos

    ResponderEliminar
  21. muchas gracias, perfecto
    En la plantilla Havenly-Blue no puedo quitar la chica que sale en la cabezera,, hechame una mano Potro
    muchas gracias

    ResponderEliminar
  22. carlos, qué bueno que te ha gustado, a mí me parece muy divertida :)

    Patgor, revisa que no estés eliminando ningún otro código y que lo hayas puesto tal como se indica, si te sale de nuevo el error, cierra la sesión, entra de nuevo e insiste.

    Rober y July, ¿cuál es tu blog para verlo? parece que lo has quitado de tu perfil.

    ResponderEliminar
  23. casi entrando en el top 100.000 alexa!!! felicidades...
    jejeje, mi blog a progresado bastante también... tengo 500.000!!! jesjejeje, igual no me comparo ni con tus talones ;)
    un saludo potro, espero que andes super bien!

    ResponderEliminar
  24. http://infomedicinas.blogspot.com/ buenas potro es sólo la plantilla pero me gusta el diseño,
    como puedo quitar la chica? gracias
    es que no he encontrado oro tipo de plantilla que pueda meter tu codigo ese de mostrar sólo los enlaces, mire muchas pero solo encontre dos
    muchas gracias

    ResponderEliminar
  25. Ya está Potro. Mi fallo fue sustituir en vez de . Hay tantos "bodys" y total por una barrita jeje

    Gracias Potro majo!!!!
    La abejita es graciosa (supongo que me cansaré enseguida jajajaja) ;)

    ResponderEliminar
  26. Joaco, con el tiempo estarás dentro de los primeros =)

    Rober y July, sigo sin poder ver el blog, dice que sólo admite a lectores invitados.

    Patgor, jaja seguro que sí, después de un rato terminarás odiando a la abeja =P

    ResponderEliminar
  27. perdona potro,, ya lo tienes y gracias

    ResponderEliminar
  28. Es un poco complicado pues son dos imágenes las que componen la imagen de la chica.
    Tendrías que editar estas dos imágenes, una se encuentra en el #header-wrapper

    http://3.bp.blogspot.com/_8GxSJXcDIwk/S42TadWy4II/AAAAAAAAAUE/URyFfslKyuo/s1600/bg_header.jpg

    Y la otra en el #outer-wrapper

    http://2.bp.blogspot.com/_8GxSJXcDIwk/S44Wl8qCY4I/AAAAAAAAAUY/Vj--Jdmwfo4/s1600/bg_base_top.jpg

    Tendrías que editarlas, subirlas a la red y sustituir las URL en la plantilla.

    Saludos.

    ResponderEliminar
  29. Muchas gracias Potro acertaste,,
    saludos

    ResponderEliminar
  30. oye bro... se puede limitar el vuelo unicamente sobre los anuncios XD jajajajajajajjajaja y que intenten atraparla alli!!!! jajajajajajajajajajajja

    Me encantó!

    Un abrazo!!!

    ResponderEliminar
  31. Jajajaja, fíjate que igual lo pensé, pero no dije nada para que luego no dijeran que ando promoviendo cómo conseguir clicks falsos :P

    ResponderEliminar
  32. Jajajajajajajajaajaj... hiciste bien.. aunque yo lo hubiese puesto con un hermoso Strike !!! jajajajaja pero tu tienes una imagen que cuidar, eres el alcalde de esta ciudad, y el rey de blogger!


    Un abrazo!!!

    ResponderEliminar
  33. Jajajaja, podremos hacerlo "sin querer", el problema es que tantos clicks de una persona será sospechoso y correremos el riesgo de que nos sancionen :S

    Un abrazo!

    ResponderEliminar
  34. hahahahaha este esta genial para lo que no le quieren picar en la publicidad xd xd

    gracias potro :D

    ResponderEliminar
  35. Jajaja, todos nos hemos sentido tentados a ponerlo en la publicidad :P

    ¡Saludos!

    ResponderEliminar
  36. Ya he montado la abejita en BLOGONORREA, pero no he podido montarla a Fruto Frívolo porque tengo un gif de preloader del blog, entonces la etiqueta
    body onload='iniciar()' no aplica el script a la abeja si no a el gif preloader.

    ¿Qué hago Potro?

    Gracias por la pronta respuesta.

    ResponderEliminar
  37. Busca en este código todas las veces donde diga iniciar() y cámbialo por iniciar2()
    Luego en el otro código que quede así:

    body onload="iniciar(); iniciar2();"

    Saludos.

    ResponderEliminar
  38. Hola El potro
    Una pregunta, este script alenta mucho la pagina? es que mi blog ya se está volviento bastante lento al cargar.
    ¿Lo puedes checar y decirme que se le puede quitar para evitar que demore tanto en cargar?
    La dirección es: http://metalmetalrovazcas.blogspot.com
    Espero que no sea necesario quitarle tdo jajaja.
    Gracias.

    ResponderEliminar
  39. El script no es muy pesado pero si ya de por sí tarda en cargar tu blog lo mejor será que no lo pongas.

    No podría decirte qué quites o qué no, sólo tú debes saber qué de lo que tienes es realmente necesario, lo que creas que de verdad no es útil sería mejor prescindir de él de lo contrario hará tu página muy lenta.

    ResponderEliminar
  40. Sale, pues muchas gracias, entonces buscaré algo para borrarle y así cargue más rápido, muy bonito efecto bastante entretenido espero poder ponerlo en mi blog Hasta luego.

    ResponderEliminar
  41. Hola potro! Muy buenos trucos los tuyos. Muchas gracias por tanto ingenio. He tratado de colocar la aveja pero no encuentro la etiqueta "body" y si trato con cualquier otra parecida me sale el mismo mensage que a Potgor: "No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "body" must be terminated by the matching end-tag "". Qué hago? soy http://rockon-wwaannddaa.blogspot.com/

    ResponderEliminar
  42. Hola Wanda Martinez,

    En las plantillas nuevas de Blogger debe ir dentro de:
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

    Es decir, debe quedar así:
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass' onload='iniciar()'>

    ResponderEliminar
  43. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  44. Hola, gracias por compartir tanto! he aplicado algunas sugerencias. Ahora, la abeja no se ve con nada, ya no se que hacer. Podrán checkear en mi humilde blog, soy novata, autodidacta, pero voy aprendiendo. Salu2

    ResponderEliminar
  45. Muy probablemente sea por otro script, como por ejemplo el de las letras que siguen al cursor. Usualmente cuando se tienen juntos varios de estos scripts uno o varios dejan de funcionar.

    ResponderEliminar
  46. Uyyyyyyyyyyyyyyy
    genial falto la miel jajjjaaj oleeeeeeeeee
    me gustan los efectos...

    gracias

    ResponderEliminar
  47. Linda la abeja ¿verdad? =)
    Qué bueno que te ha gustado.

    ResponderEliminar
  48. Hola, soy nueva en esto jeje! Y no consigo ponerlo alguien me podria explicar un poco mas detalladamente como es?

    ResponderEliminar
  49. al cambiar la parte body me dice que body tiene que estr cerrado correctamente

    esto pork es

    ResponderEliminar
  50. Verifica que no estás eliminando otro código sin darte cuenta. Si te aparece de nuevo el mensaje inténtalo de nuevo un par de veces más.

    ResponderEliminar
  51. Lee de nuevo las indicaciones para saber cómo encontrarlo.

    ResponderEliminar
  52. NO ENTIENDO COMO CAMBIAR LA ETIQUETA DE BODY...

    ME SALEN MUCHOS SCRIPTS, PEO EN LETRAS, YA VI DONDE ESTA LO QUE DICE BODY, ENTONCES.. ELIMINO TODAS ESAS LETRITAS HASTA DONDE ME SALE UN ----------------------*/ ???????

    Y LE PONGO ESE NUEVO DE BODY INICIAR, PERO NO ME DA, ENTONCES NO SE COMO HACERLO :l

    ResponderEliminar
  53. Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger debes buscar esta línea y agregar lo que está en negrita:

    <body expr:class='&quot;loading&quot; + data:blog.mobileClass' onload='iniciar()'>

    ResponderEliminar
  54. gracias tio me anda muy ben tu aplicacion es un muy buen toque para el blog y tus posteos y ayudas para mejorar los blog son exelentes :)

    ResponderEliminar
  55. Qué bueno que ha sido de tu agrado :)

    ResponderEliminar
  56. Esta muy bn :D
    entren a

    http://informatica-sake.blogspot.com/

    ResponderEliminar
  57. Hola Potro
    No he logrado ubicar la abeja en ninguno de los dos blogs de prueba, pues solo me salen los letreros "abeja volando", "controles de la abeja", "detener" y "volar"...me echas una ayudadita?
    probandobichos@blogspot.com y probandobichos1@blogspot
    Ahh lo coloqué como le explicaste a Wanda, pues al igual que ella no encontraba el "body"
    Gracias lindo

    ResponderEliminar
  58. Hola Soraya,

    Sólo veo que lo hayas puesto en uno de ellos y en ese caso el problema está en la URL de la imagen de la abeja que al parecer pudiste haber modificado sin querer.
    Elimina ese código que está dentro del elemento HTML/Javascript y ponlo de nuevo tal como está en esta entrada sin hacerle ningún cambio.

    Saludos!

    ResponderEliminar
  59. Oye, mi abeja si sirve pero siempre que queda a los lados del blog y no pasa al centro como en tu blog de pruebas, como arreglo eso

    ResponderEliminar
  60. Quizá moviendo el gadget arriba de las entradas. No sé por qué a veces hace eso, en realidad la abeja de mueve de forma aleatoria, si tuviera una ubicación específica sí podríamos arreglarlo modificando el código, pero como se trata del azar es poco lo que se puede hacer.

    ResponderEliminar
  61. ¡Que chulo! Lo que hare sera poner un personaje de mis videojuegos que es como un pájaro XD! jaja muy bueno potro, sobre todo esta muy bien porque podemos poner la imagen que queramos. justo lo que queria.

    ResponderEliminar
  62. Exactamente, puedes poner cualquier imágenes e igual podrá verse bien. Yo hubiera puesto una mosca pero sé que no a todos les agradan :)

    ResponderEliminar
  63. Potro se puede desactivar este truco sin necesidad de eliminar el codigo ? simplemente eliminando la direccion de la imagen ??

    O seria complicado hacer que funcionara solo cuando se le diera click en -volar-??

    ResponderEliminar
  64. cuantas ocurrencias mias verdad? jajaja

    ResponderEliminar
  65. Pues desactivarlo no, pero si no lo usarás por un tiempo lo mejor es eliminarlo, ya sabes que todo eso lo sigue leyendo el navegador y puede hacer el blog más pesado aun :/

    ResponderEliminar
  66. Caray, a sucedido algo muy raro, instale este truco y al ver que me alteraba las flechas -de subir- -y bajar- decidi quitarlo, pero balla sorpresa cuando entre a -Diseño- ya no me permitio ver toda la estructura del blog resulta que ahora solo se ve la parte superior, la cabecera, y me ha echo sentir un escalofrio jejejeje-

    ya volvi a pegar la linea que habia quitado de *body* y borre la otra pero nada! no me aparece toda la parte inferior de la seccion de Diseño.
    Que sucederia.!!

    ResponderEliminar
  67. ¿Usas Chrome? Porque ese parece ser más un problema con el navegador, yo desde hace ya varios meses veo mis blogs cortados (en Elementos de la página), pero sólo con Chrome, si entro desde Firefox se ven bien.

    ResponderEliminar
  68. Vaya ! uff jajaja Afortunadamente parece que es verdad lo de los navegadores, era al parecer un especie de error del navegador aunque yo uso Opera, ya me volvio a aparecer todo completito!!

    Nada tenia que ver el truco con dicho error...

    gracias por la respuesta.

    ResponderEliminar
  69. Qué bueno que ya todo volvió a la normalidad :)

    ResponderEliminar
  70. Si ya tengo un código en HTML/Javascript, dónde puedo agregar éste??? o sólo se puede poner un código??? Estoy empezando, me cuesta mucho entender, sorry!!!

    ResponderEliminar
  71. Hola Sandra,

    Puedes crear tantos gadgets HTML/Javascript como quieras, pero si quieres agregarlo en ese que ya tienes también lo puedes hacer, sólo dale click en Editar para agregar este. Sin embargo siempre es preferible agregar cada código en su propio gadget para cuando quieras eliminarlo sepas dónde está y te sea más fácil localizarlo.

    Saludos!

    ResponderEliminar
  72. Hola..! body lo encuentro dentro o por donde está /body o puede estar en cualquier lugar de la edicion html ..? ayudame porfavorcito no lo encuentro y ya lo revise varias veces expandiendo la plantilla. gracias de antemano.

    ResponderEliminar
  73. No Puse <> porque no me permitó ponerlo en el comentario.. espero si haberme explicado..

    ResponderEliminar
  74. Usa las teclas CTRL + F, al presionarlas se abrirá una barra de búsqueda, escribe ahí el texto que estás buscando y lo encontrarás mucho más rápido.

    ResponderEliminar
  75. ok.. lo haré como dices solo una pregunta más el ultimo pasono le he hecho y aun asi se ve la abejita.. entonces mi duda es para que es el ultimo paso...

    ResponderEliminar
  76. ya lo hice y me lleva a < / body> y no al que tu indicas... saludos

    ResponderEliminar
  77. Posiblemente usas una plantilla del Diseñador de plantillas de Blogger. Si es así entonces mira el comentario #43

    ResponderEliminar
  78. Gracias Potro por tu tiempo..mira no he hecho esto que pones... "Luego entra en Diseño > Edición de HTML, busca la etiqueta < body > y cambiala por esta otra:
    < body onload='iniciar()' > "

    y aun asi veo la abejilla.. mi pregunta es.. para que sirve este último paso..?

    ResponderEliminar
  79. El último paso es para que la abeja vuele desde que carga la página, pero si prefieres activarla desde los botones puedes omitir ese paso. Saludos!

    ResponderEliminar
  80. Hola, he utilizado tu script en una web en pruebas, y veo que siempre empieza en el mismo sitio y siempre tira hacia arriba, ¿es normal?. Utilizo todo menos el codigo de los botones

    ResponderEliminar
  81. Es normal Angel, de cualquier forma puedes mover de lugar el gadget, de esa forma la abeja podría volar en otra ubicación.

    ResponderEliminar
  82. ok, gracias por tu pronta respuesta y por tu trabajo

    ResponderEliminar
  83. yo lo tengo pero,cuando toco la abeja no desaparece

    ResponderEliminar
    Respuestas
    1. Pues todas las veces que yo lo he probado funciona bien.

      Eliminar
  84. Hola Potro, se puede hacer que aparezca la abeja volando y no aparescan los controles

    ResponderEliminar
    Respuestas
    1. Hola, elimina esta parte del código:

      <center>
      <input name="detener" type="button"
      onclick="abejacazada()" value="Detener" />
      <input name="volar" type="button"
      onclick="iniciar()" value="Volar" />
      </center>

      Eliminar
  85. hola , sabes esta super entretenido el script, pero tengo una consulta, se pueden poner 2 o mas elementos e iniciarlos al mismo tiempo ??

    ResponderEliminar
    Respuestas
    1. Sí, pero todas las abejas se moverían en sincronía, lo cual dejaría de verse natural. Si aun así quieres hacerlo entonces cambia esta parte:

      <h3 align='center'>Controles de la abeja</h3>
      <div id='abeja' style='position:absolute; top:0px; left:0px; visibility:hidden; z-index:10'>
      <a href='javascript:void(0)' onclick='abejacazada()'><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S7TLQwDUqeI/AAAAAAAAAOw/IIw_pAeBOM8/s1600/Abeja.gif" style="width:52px; height:51px; border:0;" /></a></div>

      Por esta otra:

      <h3 align='center'>Controles de la abeja</h3>
      <div id='abeja' style='position:absolute; top:0px; left:0px; visibility:hidden; z-index:10'>
      <a href='javascript:void(0)' onclick='abejacazada()'><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S7TLQwDUqeI/AAAAAAAAAOw/IIw_pAeBOM8/s1600/Abeja.gif" style="width:52px; height:51px; border:0;" /></a>
      <a href='javascript:void(0)' onclick='abejacazada()'><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S7TLQwDUqeI/AAAAAAAAAOw/IIw_pAeBOM8/s1600/Abeja.gif" style="width:52px; height:51px; border:0;" /></a>
      </div>

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger