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

Por Arántzazu Quiroga Alonso
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, del cual ya hablé en este otro post) 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 ?, ...
Quizás también te interese :
  • Efecto opaco en tus fotos al pasar el ratón sobre ellas
  • Consejos de blogger a blogger
  • Personalizar el tamaño de las fotos en Blogger