6 mar. 2016

Cómo personalizar Google Chrome con los colores de tu web

Google ha incorporado interesantes novedades para la presentación de nuestras Webs y Blogs en su navegador Chrome para móviles y tabletas.

Podemos cambiar el color de todo el navegador para móviles y adaptarlo a la presentación de nuestra web, dándole un toque mucho más fresco e innovador.

En general estos cambios dotan de una presentación mucho más profesional a nuestros contenidos para vestirlos de largo y mostrarlos de una manera diferente en nuestros móviles. Verás lo sencillo que es y cómo conseguirlo en muy pocos pasos.


¿En qué consiste la personalización de colores en el navegador Google Chrome para Android?


Desde la aparición de Google Chrome 39 Beta para Android 5.0 Lollipop, se ofrecía la posibilidad a los desarrolladores de cambiar los colores del navegador con respecto a la web que se visita, para darle un aspecto más fresco y distintivo. Este efecto se encuentra ya disponible en todas las versiones actualizadas de Chrome para móviles y tabletas.

Tanto la barra de direcciones como las pestañas que identifican cada web en el navegador pueden cambiar el color, en la web para desarrolladores de Google nos muestran un ejemplo:

Ejemplo extraído de Google Developers
No es un efecto único de Android Lollipop, ahora funciona en Android 4.x también y el aspecto es excelente. Poco a poco irás notando que algunos diarios online y bastantes páginas de Internet en general ya comienzan a utilizar esta novedad.

¿Cómo puedo personalizar el color de Chrome para Android con mi web?

Es extremadamente sencillo, lo único que tienes que hacer en Wordpress, Joomla o en cualquier editor de HTML con el que hayas construido tu web es escribir directamente dentro de la etiqueta head de tu web la siguiente línea:

<meta name="theme-color" content="#color_deseado"/>

Donde <meta name="theme-color" indica que vas a cambiar el color del "theme" del Chrome donde se muestre tu web y content="#color_deseado"/el color que deseas aplicar al navegador para móviles y tabletas.

Colócalo dentro de la etiqueta <head> de tu web:
<head> 
<meta name="theme-color" content="#db5945"/>
 </head> 

Para buscar el color que prefieras, dado que hay que escribirlo con los códigos de color que utiliza el HTML, te recomiendo buscar en html color codes:


Puedes seleccionar el color que prefieres y después pegar el código resultante. No olvides chequear tu web con el móvil para ver los cambios.


Como ves es muy fácil. Si tienes Blogger, puedes hacerlo siguiendo estos pasos:


Simplemente entra en la edición de plantilla, después en Editar HTML y por último, justo después de la etiqueta  <head> añades la línea de código que antes expliqué: <meta name="theme-color" content="#color"/>

Eso es todo, cualquier duda me tienes en los comentarios.

Escrito por Miguel García Sánchez - Colomer

Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

6comentarios:

  1. Hola!! Que interesante! Me encantaria ponerlo en practica, pero soy bastante novata, donde puedo encontrar la etiqueta meta en wordpress para cambiar el diseño? ¡Gracias! Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola Esther, es muy fácil, verás, no tienes que buscar la metaetiqueta porque no está. Tienes que añadirla después de la etiqueta head. Es copiar y pegar la línea donde pongo la metaetiqueta en el head de tu WordPress. Con eso te funciona seguro, prueba con el móvil y verás. En mi web ya lo tengo puesto.

      Cualquier duda aquí me tienes.

      Gracias a ti por participar.

      Eliminar
    2. ¡Lo conseguí! ¡Muchas gracias por compartir!

      Eliminar
    3. Me alegro mucho, a disfrutarlo. Cualquier cosa aquí estoy. Un saludo!

      Eliminar
  2. Me salta error The element type (meta) must be terminated by the matching end-tag (/meta)

    ResponderEliminar
    Respuestas
    1. Hola Alberto, tienes que poner al final de la etiqueta un /> ,es decir, la / de cierre de etiqueta es necesaria. Olvidé meterlo en el código mío. Lo ajusto y lo cambio.

      Muchas gracias por participar!

      Eliminar

 

© 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.