Crea Gadgets utilizando Image Maps.

Créditos de Imagen

Me gusta lo fácil, rápido y sencillo, llámame floja pero así soy, y siempre ando buscando la forma mas sencillas de hacer las cosas, por ejemplo porque esperarte a que se descongelen las carnes para preparar la comida, si existe un microondas que alguien en algún momento de la historia lo invento y creo que pensó en mi, en la flojera que me da esperar, así que booomm lo meto al micro, lo descongelo y listo, si si ya se que es un ejemplo bastante absurdo pero así es, fácil, rápido y sencillo, como me gusta.

Hablemos pues de lo que te tengo hoy, hablemos de algo que te va a ahorrar vida y con vida digo tiempo, Image Mapping ! Whoa que es eso?? Ahora te explico paso a paso con imágenes.



Veras para crear este gadget de redes sociales(arriba) pensarías que necesitas un código bastante complicado, que tendrías que tocar la platilla HTML y tal vez personalizar el CSS, pero la realidad es; que es mas sencillo de lo que pareces y puedes hacer lo que se te ocurra. yo he hecho este diseño con powerpoint, pero tu puedes utilizar el que mas te guste o se te haga mas fácil, como Picmonkey 

Ya que tengas creada la imagen que utilizaras,(si gustas puedes utilizar la que yo he creado,solo con tu botón derecho del mouse dale en guardar imagen como....) vamos al primer paso.

Paso1. Vamos a Image-Maps sube la imagen que quieres agregar desde tu computadora



Paso 2. Ya que seleccionamos nuestra imagen vamos a iniciar mapping.



Paso 3. ya que esta tu imagen cargada pincha continuar(continue).



Paso 4.  Sigue exactamente los paso de la siguiente imagen desde el paso 1 hasta el 4 y la nota.

Para seleccionar el rectángulo presiona el boton derecho de tu mouse y te aparecera el cuadro de opciones, presiona creat rec(crear rectangulo) y arrastra el puntero por la primera red social, ya que la tengas seleccionada pega la URL dande te indica y asigna un nombre, presiona guardar, Tienes que repetir el mismo paso para cada red social.



Paso 5. Ya que hayas seleccionado todas las redes sociales y estén marcadas en rojo, presiona nueva mente el lado derecho de tu mouse y te aparecerá de nuevo el rectángulo esta vez presiona GET CODE(obtener código) 



Paso 6. Presiona donde dice HTML code, y en la parte de mas abajo estará el código que tienes que copiar, lo vamos a necesitar en el siguiente paso.



Paso 7. Whew ! ya mero terminamos.  Desde tu tablero ve a diseño blogger y seleccione Agregar nuevo Gadget ---- > Añadir HTML. Pegue el código que acabas de copiar . Hit guardar. LISTO!



Puede utilizar Image Mapping para cualquier cosa! para barras de navegación, iconos de redes sociales, encabezados, collages. Todo en absoluto. Es un salvador de vidas y tan fácil de usar! que lo Disfrutes!

Y ya para terminar tengo un grandeeeeeeeeeeee sorteo  en el blog con un valor de  en $249 dlls.

quedan solo 23 días para que termine, apúntate ahora, para la oportunidad de ganar un super Suero con células madre.

Bye !

DEMO

Image Map

Fuente: este post proviene de Blog de CYeyas, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Esta publicación está dirigida a un público de adultos mayores de 21 años. Esta campaña ha sido compensada por Collective Bias, Inc. y su anunciante. Todas las opiniones son solo mías. #SutterHomeSwee ...

Esta campaña ha sido compensada for Collective Bias, Inc. y su anunciante. Todas las opiniones son solo mias. Este contenido es para lectores de mayores de 21 años. #40DaysOfFlavor Si nunca has proba ...

Recomendamos

Relacionado

general

Comprender el funcionamiento de la plantilla de Blogger te abre las puertas a un nuevo nivel de conocimiento en la herramienta, pasas de ser un usuario estándar a convertirte en un usuario avanzado. Es muy distinto trabajar con la plantilla de Blogger sin saber qué está sucediendo "detrás" que sabiendo qué sucede y cómo controlarlo para conseguir el efecto que te propones. Hicimos un pri ...

tecnología e internet

AI Image Transformer es una nueva herramienta que nos permite convertir fotografías existentes en dibujos u obra artísticas, y lo hace mediante el poder del aprendizaje automático, la inteligencia artificial y el blockchain. Obviamente no se trata de la única herramienta que existe para ello, pero su propuesta es cuanto mínimo interesante y los resultados son espectaculares. Lo que diferencia AI ...

general apple open street map ...

En la presentación oficial del "Nuevo iPad" también hubo un hueco para presentar la nueva versión de iPhoto, aplicación que Apple usa para organizar, editar y visualizar imágenes, mediante geolocalización de mapas. Hasta ahora se usaba Google Maps para esta tarea, pero ahora, según se ha dicho, ya no habrá más Google Maps en iPhoto. . Pero desde la compañía de Cupertino en la presentació ...

general

En la anterior entrega aprendimos a crear nuestra primera plantilla. La idea no era copiar y pegar el código que "nos dan hecho", esta vez se trataba de conseguir entender bien cómo y porqué se hace cada cosa en Blogger. Con el mismo espíritu de dominar el código que lo conforma y la filosofía del "poco a poco", hoy continuamos con la "maquetación", el siguiente gran ...

general apps tutoriales ...

Para ahora ya tendrías que ver visto la pestaña de The Shop en el blog, cierto ? Si pasas el cursor sobre esa pestaña te direcciona a la tienda donde vendo algunos diseños de plantillas pre-diseñadas. Hoy es tan fácil y practico vender online, existen de todo tipo de tiendas vía internet, como por ejemplo Ebay donde puedes vender de todo tipo de productos, Etsy donde la mayoría vende productos he ...

Recursos FreshInbox Herramientas ...

Las imágenes rollover o de sustitución son aquellas en las que al colocar el puntero sobre una de ellas se alterna con la siguiente. Muy útil en casos en los que deseas mostrar diferentes ángulos de un producto, un caso en el que se muestre el antes y el después, crear contenido interactivo o en cualquier otra situación que desees. El truco no es nuevo, pero hoy es más sencillo de aplicar y utiliz ...

general

En este tutorial iniciaremos un nuevo juego utilizando el Framework "Phaser", usando HTML y CSS3. Phaser es un framewprk/engine muy completo y facil de usar. Hola amigos, como ven en el video, el juego es muy simple de jugar, apenas tenes que comer las frutas para mantenerte en vuelo y cuidar para que las estrellas negras no te toquen o mueres. Si tienen un smartphone Android puden desc ...

general

La creación de un menú fijo para la parte superior del Blog es una popción a tener en cuenta dependiendo del tipo de presentación y la plantilla que se está utilizando. Cuando tratamos Blogs que enumeran gran cantidad de entradas y estas hacen qe haya que desplazarse verticalmente por los contenidos, el usuario puede quedar desprovisto de elementos de navegación hasta que llega a la parte inferior ...

general social

Las publicaciones que realizamos en Facebook a menudo contienen información, no ya de índole personal sino también comercial o promocional que puede interesarnos mostrar en nuestra web o Blog. No sólo nuestros seguidores sino también cualquier visitante del sitio web, podrá pulsar el "me gusta" correspondiente, comentar la publicación o compartirla en su muro con otros usuarios. Los post ...

general curso blogger desde cero

Si estás siguiendo de cerca el curso "Blogger desde cero", sabrás que la promesa de publicación para este sábado era profundizar en un tema referente al mundo del diseño de blogs. Ofrecerte una información útil de aproximación a los códigos inverosímiles que observamos -entre el estupor y el pánico- cuando nos proponemos modificar la plantilla de nuestro blog. Con este fin, tengo el abs ...