Cómo navegar por otra web sin salirte de la tuya

A la hora de hacer tutoriales,de mostrar páginas webs que nos gustan,.... los pantallazos se suelen convertir en nuestros grandes aliados... ¿ o no?. Bien, hoy quiero ir un paso más allá y mostrarte otra forma de presentación, muchos más dinámina, que podrás usar en algunos casos (especialmente en aquellos en los que en el pantallazo no te entre toda la información visual que desees recoger), siendo muy útil también para aquellos casos en los de desees publicitar en tu sitio web una web.




Este sistema que te muestro, estoy segura te agradará más, y que desde luego llamará más la atención sobre ese sitio web al permitir la navegación por el mismo !!




Por la "instalación" ni te preocupes... es tan sencillo como ir a la pestaña superior de "HTML" y pegar en el lugar deseado el siguiente código :

<iframe src="http://tritrazos.com" height="400" width="600" style="border: none" ></iframe>

No tendrás más que sustituir la URL indicada a continuación de src=, es decir  http://www.tritrazos.com/Retoques.php, por la de  tu elección, manteniendo en todo caso las comillas al inicio y fin de la URL.

Podrás además modificar  a tu gusto tanto el alto, height, como el ancho, width, de este elemento llamado iframe. Otra posible opción sería sustituir el valor de width por 100%, así te aseguras de que el iframe aproveche todo el ancho de tu sitio web, no olvidándote en todo caso de incluir las comillas tanto al principio como al final de los valores introducidos en height y width.

el fragmento style="border:none" lo utilizamos para eliminar el borde que sino saldría alrededor del iframe, puedes eliminar dicho fragmento de código y comprobar si te gusta más con él... incluso, puedes añadir un borde personalizado, con los colores y estilo que más te gusten... te muestro cómo hacerlo :

Tendrías que sustituir el fragmento  style="border: none" por style="border:5px dotted red", dónde podrías :
  • Aumentar o disminuir el ancho del borde, en este caso 5px.
  • Cambiar el estilo del borde, sustituyendo el del ejemplo, dotted, por alguno del tipo de :
    • solid (linea normal)
    • dashed (que sería línea discontinua)
    • double (líneas dobles)
    • Modificar el color, en el ejemplo es el rojo, pero podrías poner cualquier otro: blue, green,... incluso, indicar no ya el color, sino una tonalidad de ese color, para lo que deberías poner #0000000 (indicando el código hexadecimal de tu elección) en lugar de blue, green, ...

    Pero ¡ ojo !, debes de saber de antemano también que, según tengo entendido, no todos los navegadores permiten la visualización de Iframes...

    ¿ Qué te han parecido los Iframes ?, ¿ los habías usado alguna vez ?, ¿ sabías de ellos ?, ...

    ¡Muchas gracias por compartir el post!

    Sobre la autora

    ¡Muchas gracias por tu visita!, si te ha gustado el post no te olvides de comentarlo ni de compartirlo en tus redes sociales ; )

    2 comentarios:

    1. Creo que no lo he pillado del todo. Deberías explicarlo en algún vídeo en youtube, para que cualquiera pueda verlo...Pienso que si te vemos dando la explicación los contenidos se nos quedarían más claros...

      Un saludo.

      ResponderEliminar
      Respuestas
      1. Gracias por la idea, la tendré en cuenta ! Saludos

        Eliminar

    Follow my blog with Bloglovin