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

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 ...

Tecnología e Internet

Huawei es una de las marcas que más iniciativas realiza cada año para interactuar con sus usuarios y una de las más destacadas es su concurso de fotografía NEXT-IMAGE 2021. En esta ocasión ya se ha abierto la inscripción para subir sus obras de fotografía y vídeo y tener la oportunidad de ganar uno de los 70 increíbles premios, que van desde uno de sus teléfonos hasta sumas de dinero de 10 mil dól ...

Linux

Si usted es un artista o diseñador digital, sin duda ha oído hablar del GNU Image Manipulation Program (GIMP) , a menudo conocido como la alternativa de código abierto preeminente a Photoshop. Pero, ¿sabías que puedes ampliar las funciones de GIMP drásticamente con un plugin llamado G’MIC? G’MIC significa Magic Image Converter de GREYC, pero hace mucho más que convertir imágenes. Propo ...

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 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 ...

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 artesanos craftspr.com ...

Amigas artesanas o manualistas para proteger tus creaciones o para que te puedan contactar es importante que coloques un "watermark" en las fotografías que publicas en las redes sociales. Existen muchísimos programas de edición pero algunos requieren de presupuesto o conocimiento para utilizarlos. Aquí por medio de fotos, voy a estar mostrándote como colocar un "watermark" en ...

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 ...

móviles google maps ...

Google Maps cuenta con una nueva actualización que renueva la imagen en como podemos ver la ciudad y es que para mayor facilidad la ubicación se muestra un poco mas real de lo que estamos acostumbrado a verla. Desde la versión 5 de Google Maps para Android es posible visualizar mapas de ciudades en 3D y navegar por ellos visualizando las calles y edificios en volumen. Estaban disponibles ya multit ...

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 ...