Editar página web desde el navegador

10 de julio de 2010 46 comentarios ,
Este es un script que bien muchos pueden usar para jugar un rato pero otros tantos sabrán que puede ser de utilidad antes de hacer pequeñas modificaciones al blog.

Se trata de un script que logra editar el sitio Web que estamos viendo desde el navegador, es decir podemos eliminar el texto y poner otro o arrastrar las imágenes de uno a otro lugar.
Sólo hay que pegar en la barra de direcciones este código:
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Inmediatamente podrán ver que el cursor cambia de forma parpadeante lo cual indica que se puede editar el texto de la página.

Como mencioné antes, muchos pueden usarlo para divertirse un rato, pero también puede ser útil antes de modificar la plantilla, de este modo antes de tocarla podremos darnos una idea de cómo se verían algunos elementos del blog cambiándoles el texto, título o imágenes.
Por supuesto ninguno de estos cambios se guarda en la página, una vez que se cierre y se abra de nuevo o se actualice regresará al modo normal.

Pueden probarlo en esta misma página y disfrutar un rato del ocio.


NOTA: En Internet Explorer sólo se pueden arrastrar las imágenes pero no editar el texto.


46 comentarios en:

" Editar página web desde el navegador "

  1. Jajaja. ese truco si esta bueno.
    Creo que voy a jugar con mis lectores a que los artistas me conocen, pues veran mi nombre en su pagina web.

    jaja saludos.

    ResponderEliminar
  2. Jajaja buena idea, ahora mismo iré a Google y me pondré como autor y dueño único, jajaja.

    ResponderEliminar
  3. potro una pregunta como se puede cambiar el icono de blogger. eske tu lo btienes y esta chulo.

    ResponderEliminar
  4. Jajaja, que genial este script, me di cuenta que tiene otra utilidad, si le tienes rabia a alguien, le destruyes todo el blog XD
    http://img33.imageshack.us/img33/9518/jajaa.png

    Un saludo ;)

    ResponderEliminar
  5. CHiCken, ya te borraré el tuyo, jaja.

    adriancybor, ¿verdad que sí?

    mariocrack6, supongo que te refieres al favicon, aquí se explica cómo ponerlo.

    Joaco, en esos casos es mejor ir a un psicólogo, jaja.

    Luis, qué bueno que te gustó :)

    ResponderEliminar
  6. Es un truco muy original, gracias Potro.

    ResponderEliminar
  7. Jaajaja, el psicólogo es para los tontos, ahora hay blogs de psicología que te facilitan todo XD

    ResponderEliminar
  8. Muy bueno, además estoy de acuerdo en que puede servir para mucho más que solo jugar un rato con el blog.. De paso aprobecho potro para preguntarte si de casualidad conoces algún metodo para que no aparzca la fecha en las url del blog. Es decir que en lugar de:

    http://ciudadblogger.com/2010/07/editar-pagina-web-desde-el-navegador.html

    Sea:

    http://ciudadblogger.com/editar-pagina-web-desde-el-navegador.html

    Saludos

    ResponderEliminar
  9. Seba, en Blogger no es posible modificar las URL de las entradas.

    Mauricio y Ana Maria, qué bueno que les ha gustado :)

    ResponderEliminar
  10. hola potro tengo la misma plantilla que tu "Revolution Church de Bloganol" pero tengo un problema, [no me aparecen los enlaces de entradas antiguas/entradas recientes] me gustaria que me pudieras ayudar gracias

    ResponderEliminar
  11. Saludos,
    Potro, amigo, tengo un problemita y vengo haber si puedes ayudarme.

    He Personalizado una Plantilla y me ha gustado como me va quedando, solo que quiero colocarle un sistema de votacion de estrella (YA LO CONSEGUI Y FUNCIONA PERFECTAMENTE). http://directorio-internacional.blogspot.com/

    Lo que quiero es que se vea asi como en este Blog. http://www.colorizetemplates.com/

    ResponderEliminar
  12. Hola Chilaverde,

    Busca esta parte de tu plantilla y elimina lo que está en negrita:

    #blog-pager-newer-link {
    float: left;
    display:none;
    }
    #blog-pager-older-link {
    float: right;
    display:none;
    }
    #blog-pager {
    text-align: center;
    display:none;
    }

    Saludos.

    ResponderEliminar
  13. Hola Blogs Cristianos,

    Te lo voy a deber, nunca lo he hecho así que erraría con las indicaciones, yo tengo uno parecido en Fondos240 pero ya lo traía la plantilla.

    Saludos.

    ResponderEliminar
  14. oye potro sigue sin aparecer, pero presione ctrl+f para buscar "entradas antiguas" y si lo encuentra, luego modifique un poco las medidas de la plantilla y se asomo un poquito pero se deforma la plantilla espero que me puedas ayudar,,, gracias

    ResponderEliminar
  15. Seba: por eso me pasé a hosting propio con la CMS de Wordpress. Es una total ventaja, además de tener todos tus archivos en tu host sin riesgos.

    ResponderEliminar
  16. Chilaverde, entonces agrega debajo de:
    #blog-pager {

    Esto:
    clear:both;

    ResponderEliminar
  17. gracias potro, CiudadBlogger y tu se me han hecho indispensables, pondre un enlace en mi blog como agradecimiento

    ResponderEliminar
  18. jaja... Esto lo encontré en Youtube un día antes a que lo postearas. jajaj... Gracias por compartir!
    Potro una ayudita, como saco el espacio entre imágenes??? Esto: http://i30.tinypic.com/w6owfm.png

    ResponderEliminar
  19. Busca esta parte:
    a img {
    margin: 5px 5px 5px 5px;
    padding: 0px 0px 0px 0px;
    }

    Elimina lo que está en negrita y cámbialo por 0

    ResponderEliminar
  20. No Potro nada, no se quita el espacio. Probé con:
    a img {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }

    a img {
    margin: 0px;
    padding: 0px 0px 0px 0px;
    }

    a img {
    margin: 0;
    padding: 0px 0px 0px 0px;
    }

    Y nada :-(

    ResponderEliminar
  21. Entonces pon el código de la imagen sin espacios entre cada una ni saltos de renglón.

    ResponderEliminar
  22. Potro, sí se puede editar en Internet Explores, al menos tengo el Windows Internet Explorer 7, y funciona... Edita el texto y mueve imágenes.

    Era sólo una aclaración, saludos.

    ResponderEliminar
  23. Pozo+10™, entonces no sé qué pueda ser.

    Jorge Alonzo, gracias por la info, yo lo probé en dos sitios con IE8 y no se pudo el texto :(

    ResponderEliminar
  24. Bueno, en este caso es WIE7. Saludos.

    ResponderEliminar
  25. Por un momento me sentí el rey de Blogger...emmmm..digo... el dueño de ciudad blogger XD jajaja

    Un abrazo!!!

    ResponderEliminar
  26. jajajaja, nada más no me lo vayas a destruir... jajaja
    Un abrazo!

    ResponderEliminar
  27. como,qe barra de direcciones potro,espero qe me digas...

    ResponderEliminar
  28. La barra de direcciones es ese espacio en blanco arriba del navegador donde aparece la dirección de la página donde estás.

    ResponderEliminar
  29. a siiiii,ya se!! grasias potro,se vastante de eso pero no sabia qe se llamaba asi...

    ResponderEliminar
  30. Estimado Potro:

    En mi blog (www.castaparasitaria.com) que, pausadamente, he ido construyendo desde mi retaguardia escuchándote en silencio, no pocas cosas se deben tu paciente magisterio.

    Como podrás ver, es un blog sencillo, quizá con algún gagdet demás: por ejemplo, el de “Aumentar texto” de las entradas, repetido por ignorar si existe alguna forma de incluirlo, de manera clonada, en el cajetín de todas la entradas, aunque, a decir verdad, tampoco es algo que me quite el sueño.

    Ahora bien, si aún no me lo ha quitado, sí por lo menos es algo que me preocupa bastante el problema que acabo de detectar, cuya causa, sin duda, radica en algún código indebidamente añadido por mí a la última plantilla. En suma, se trata del siguiente doble problema:

    1.- Siendo correcto el cuerpo de texto correspondiente al resumen de las entradas, tal como éste se presenta antes de pulsar “seguir leyendo...”, resulta, sin embargo, que al pulsar “seguir leyendo...”, el despliegue del texto íntegro de cada artículo o entrada presenta un cuerpo menor, que, por lo mismo, obliga al lector a echar mano del recurso “Aumentar texto”.

    Te pido, pues, que si te es posible me indiques cómo conseguir que el cuerpo del texto desplegado de cada entrada coincida con el mostrado por sus resúmenes. Por lo demás, la solución incorporada en “Editar entradas” es muy ortopédica, ciñéndose muy estrictamente, las variaciones de cuerpo ofrecidas por la opción “Tamaño de fuente”, a cinco unidades de cuerpo muy limitadas; de manera que si elijo la siguiente (Grande) a la actualmente elegida (Normal) el resultado me resulta inaceptable.

    2.- Pero también veo que, al desplegar el texto íntegro de la primera entrada (y sólo de la primera entrada), sucede, primero, que el cuadro que contiene los distintos botones mostrados a pie de entrada (para edición rápida, etiquetas, compartir, etc) ha dejado de aparecer, lo mismo que el cajetín para publicar comentarios; y en segundo lugar, en vez de este cajetín, aparece toda la tabla de contenidos de la página estática que titulé “Índice por temas”.

    O sea, un caos; por eso recurro a ti, como los platónicos al Demiurgo. Incluso confesándome públicamente con ruego de absolución, porque echando la vista atrás, no sé si en mi trajín con la plantilla, no habré tomado algún licor café de más —del que me trae la mujer desde Ribadavia (Ourense). De hecho, como tan bien me iba la plantilla, hasta el plantillazo, con la administración personal de dicho licor, pensaba yo que, aparte de mi anterior presentación, mi primera intervención podía consistir en recomendar unas dosis tasadas al ilustre personal de noctámbulos que, jornada tras jornada, aquí se concita. Pero respetado Potro, visto lo visto, creo que más procede abstenerme de mis buenas intenciones.

    Un abrazo desde Galicia

    ResponderEliminar
  31. Estimado Potro:

    En mi blog (www.castaparasitaria.com) que, pausadamente, he ido construyendo desde mi retaguardia escuchándote en silencio, no pocas cosas se deben tu paciente magisterio.

    Como podrás ver, es un blog sencillo, quizá con algún gagdet demás: por ejemplo, el de “Aumentar texto” de las entradas, repetido por ignorar si existe alguna forma de incluirlo, de manera clonada, en el cajetín de todas la entradas, aunque, a decir verdad, tampoco es algo que me quite el sueño.

    Ahora bien, si aún no me lo ha quitado, sí por lo menos es algo que me preocupa bastante el problema que acabo de detectar, cuya causa, sin duda, radica en algún código indebidamente añadido por mí a la última plantilla. En suma, se trata del siguiente doble problema:

    1.- Siendo correcto el cuerpo de texto correspondiente al resumen de las entradas, tal como éste se presenta antes de pulsar “seguir leyendo...”, resulta, sin embargo, que al pulsar “seguir leyendo...”, el despliegue del texto íntegro de cada artículo o entrada presenta un cuerpo menor, que, por lo mismo, obliga al lector a echar mano del recurso “Aumentar texto”.

    Te pido, pues, que si te es posible me indiques cómo conseguir que el cuerpo del texto desplegado de cada entrada coincida con el mostrado por sus resúmenes. Por lo demás, la solución incorporada en “Editar entradas” es muy ortopédica, ciñéndose muy estrictamente, las variaciones de cuerpo ofrecidas por la opción “Tamaño de fuente”, a cinco unidades de cuerpo muy limitadas; de manera que si elijo la siguiente (Grande) a la actualmente elegida (Normal) el resultado me resulta inaceptable.

    2.- Pero también veo que, al desplegar el texto íntegro de la primera entrada (y sólo de la primera entrada), sucede, primero, que el cuadro que contiene los distintos botones mostrados a pie de entrada (para edición rápida, etiquetas, compartir, etc) ha dejado de aparecer, lo mismo que el cajetín para publicar comentarios; y en segundo lugar, en vez de este cajetín, aparece toda la tabla de contenidos de la página estática que titulé “Índice por temas”.

    O sea, un caos; por eso recurro a ti, como los platónicos al Demiurgo. Incluso confesándome públicamente con ruego de absolución, porque echando la vista atrás, no sé si en mi trajín con la plantilla, no habré tomado algún licor café de más —del que me trae la mujer desde Ribadavia (Ourense). De hecho, como tan bien me iba la plantilla, hasta el plantillazo, con la administración personal de dicho licor, pensaba yo que, aparte de mi anterior presentación, mi primera intervención podía consistir en recomendar unas dosis tasadas al ilustre personal de noctámbulos que, jornada tras jornada, aquí se concita. Pero respetado Potro, visto lo visto, creo que más procede abstenerme de mis buenas intenciones.

    Un abrazo desde Galicia

    ResponderEliminar
  32. Hola Roberto,

    El gadget del tamaño de la fuente, como se trata de un script un poco elaborado no puede ir dentro de las entradas, es necesario que esté en la sidebar para que pueda funcionar.

    En el script de los sumarios hay una propiedad de la fuente que obliga que este resumen tenga un tamaño de fuente mayor, es por eso que en la portada la letra se ve más grande, pero al ingresar a la entrada esta propiedad se pierde y la fuente recupera el tamaño predeterminado de la plantilla.
    Si deseas usar el mismo tamaño grande sólo busca esta parte:
    .post-body {
    font-size: 110%;

    Y cambia ese 110% por 19px

    El otro asunto sí parece algo extraño, pero lo cierto es que no es la página misma la que se ha incrustado, porque de haber sido así, también aparecería el título de dicha página.
    Existe la posibilidad de que en la entrada misma tengas el script de esa tabla de contenidos, que quizá por error, o por los efectos de ese licor, has agregado sin darte cuenta.
    Edita esa entrada y revisa hasta el final de ella, mira si encuentras un código como este:

    <script src="http://robertomalestar.blogspot.com//feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
    </script>

    De ser afirmativo, elimínalo. Eso deberá resolverlo, sólo en el supuesto que sí estuviera ese código por error.

    Un abrazo.

    ResponderEliminar
  33. Estimado Potro:

    Antes de nada, mis disculpas por la repetición de mi consulta. Como no veía su texto, creí que no había llegado, volviendo, por ello, a enviarla de nuevo; pero ahora, al ver duplicada mi intervención, entiendo que se debe esperar un tiempo para la incorporación de los nuevos post. Perdón, pues, por la duplicidad de mi intervención.

    Por otra parte, ignoro si el tema elegido para mi consulta era el adecuado. El caso es que, después de buscar durante un tiempo en Ciudad Blogger, no encontré mejor sitio. De manera que si el procedimiento es otro, te ruego me lo indiques.

    Bueno mi querido y respetado maestro, como se suele decir, tu nueva imposición sobre el cuerpo de una ignorancia evidente resultó mano de santo. Tanto uno como otro problema han desaparecido, y con ello, al caos infiltrado en mi blog no le ha quedado otra que ceder y replegarse ante la luz de tu admirable sapiencia austral.

    Incluso, como los textos ya se pueden leer correctamente en su integridad, he procedido a suprimir el tercer gaddet para “Aumentar texto” que constaba en la sidebar, concluyendo así ésta con el código de barras del IBSN, dicho sea de paso, más por minucia estética que por otra cosa.

    En relación con el control del cuerpo de los textos (tamaño de las fuentes), pregunto ahora: ¿cabría administrar una solución pareja a la que me has facilitado, en este caso, para aumentar el cuerpo del texto de los comentarios? Y también, para aumentar el cuerpo de los textos de la sidebar; especialmente, el de artículos destacados como «Homilía funeral sobre el socialismo español»; o también el de textos destacados como “...cuando creemos contemplar el horizonte, etc.”

    Finalmente, lo mismo desearía para la zona inferior del blog, que comienza, a partir de las barras separadoras y los iconos de los lectores sentados, con apartados de «ARTÍCULOS DE OTROS AUTORES» y «PARA LA “MEMORIA HISTÓRICA”»; en el sentido de que me gustaría poder ampliar algo el cuerpo, a mi entender, ínfimo de conjunto de textos reportados por unos y otros links. En suma, que todo esa sección del blog aumentase de cuerpo textual en su conjunto.


    Recibe, con mi gratitud, un abrazo,
    Roberto

    Mi blog: www.castaparasitaria.com

    ResponderEliminar
  34. Hola de nuevo Roberto,

    No te preocupes por la duplicidad del comentario, como el texto era extenso automáticamente se fue al área de SPAM y por eso no podías verlos, hasta que de forma manual los saqué de ahí.

    Qué gusto que ambos problemas se haya resuelto, y que estos hayan permitido prescindir del gadget de la sidebar.

    Sí es posible modificar el tamaño de la fuente de todo el blog en general. Eso usualmente se hace desde el Diseñador de Plantillas, pero también es posible realizarlo desde la Edición de HTML de la plantilla. Busca una línea muy parecida a esta, la reconocerás por el primer código que he puesto en negrita:

    <Variable name="body.font" description="Font" type="font"
    default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

    Ahí verás también una medida en pixeles, en mi ejemplo 12px, en el tuyo puede ser otro. Esa esa es la medida de la fuente general del blog, puedes modificarla a la misma que estableciste para las entradas, que en este caso son 19px.
    Ese cambio deberá aplicarse también a la parte baja (footer) del blog donde tienes los gadgets que has mencionado.

    Saludos cordiales y gracias por el reconocimiento que has añadido al final :)

    ResponderEliminar
  35. ¡Qué barbaridad, no queda otra que descubrirse! Sin duda, aquí, amigo Potro, el único que merece llevar sombrero eres tú. Como decimos por esta tierra: “quedei pasmadiño”.

    Desde luego, mejor HTML, porque, si no me equivoco, el Diseñador de Plantillas creo recordar que da más de lo que se le pide; quiero decir, que cambia a veces más lo que uno desea cambiar.

    Con tu permiso, “troesma” (maestro) me voy a dormir mi tango a la catrera, que a ver quién me levanta mañana —perdón, hoy.

    Un abrazo,
    Roberto

    ResponderEliminar
  36. Te lo agradezco mucho Roberto, y qué grato que ya todo ha quedado completamente resuelto.
    Que descanses.

    ResponderEliminar
  37. No va :( lo he intentado y no me deja.

    ResponderEliminar
    Respuestas
    1. Las últimas actualizaciones de los navegadores ya no lo permiten Juan.

      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