Sitio en cosntrucción

Crear un Widget para insertar About.me en nuestra web

Personalmente le tome mucho cariño a about.me por la posibilidad que brinda de ser una elegante tarjeta de presentación online en la que se pueden vincular todas nuestras redes sociales y demás. Después de varios años sin usarlo, volví hace poco para actualizar mi perfil y poder usarlo como presentación en mi blog. No existe un widget de about.me para insertar en Blogger, antes existía para Wordpress pero el nuevo diseño de about.me ya no lo permite. Es por eso que me tuve que tomar el trabajo e buscar una forma de adaptar mi “elegante” tarjeta de presentación para poder insertarla como un widget HTML/Javascript tanto para Blogger como para cualquier otra web, y procedo a compartir.

Sin más preámbulo el código utilizado se basa en crear un <iframe> que es una potente característica de HTML en la cual meter muchas cosas, en este caso embeber la web de about.me. El problema es que para que poder contener la web entera en un espacio pequeño hay que escalarla y setear bien las divisiones <div> de nuestra web para que todo encaje. 

Para todo esto recurrimos al siguiente código:

<iframe id="iframe" width="345" scrolling="no"  height="1020" frameborder="0" src="http://about.me/arielivandiaz" style="
transform: scale(0.63); /*En general*/
-webkit-transform: scale(0.63); /*Para Chrome y Safari */
-webkit-transform-origin: 0 0;
-ms-zoom: 0.63; /*Para Internet Explorer */
-moz-transform: scale(0.63); /*Para Firefox */
-moz-transform-origin: 0 0;
-o-transform: scale(0.63);  /*Para Opera */
-o-transform-origin: 0 0;
">&nbsp;</iframe>





Donde lo que tienen que configurar para reutilizar este código son los siguientes parámetros:
width= “El ancho de nuestro recuadro que va a contener la web embebida”
height= “El alto de nuestro recuadro que va a contener la web embebida”
scrolling= “Si se puede hacer o no scrolling dentro del frame”
frameborder= ”Si se desea dibujar una línea de borde”
src="La URL de nuestra web”
"navegador"-transform: scale(“Valor de escala para ajustar la web al recuadro, va a prueba y error”);


Share:

0 comentarios:

Copyright © Blog de Ariel Ivan Diaz | Powered by Blogger
Design by SimpleWpThemes | Blogger Theme by NewBloggerThemes.com | Distributed By Blogger Templates20