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.
Fuente: este post proviene de Diarios de la nube, 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:

Etiquetas: propuestas

Recomendamos

Relacionado

internet blogs chrome ...

Si navegas por la red desde tu dispositivo Android y tienes una de sus últimas versiones, habrás visto que páginas como Facebook o Pinterest tienen la parte superior del navegador Google Chrome personalizada del color de su marca. ¿Sabes que tú también puedes hacer lo mismo con tu blog? Además, no necesitarás más de cinco minutos para ponerlo en marcha. Este breve tutorial lo publiqué hace tiempo ...

Diseño para Blogs Herramientas Uncategorized

Cambiar el color del navegador por el de tu blog de añade un icono! Personaliza Google Chrome con el color principal del tema de tu blog  de una forma muy fácil cambiando el esquema de color , por defecto es el azul de google y añadir el logo de tu blog o una imagen que te guste, lo vamos a poder hacer en diferentes plataformas. Color azul por defecto de Chrome Fucsia de yo blogueo Hay que aprovec ...

videos y tutoriales

16 extensiones de Google Chrome para diseñadores y programadores web Google Chrome es el navegador web más usado del mundo y no hay ninguna duda acerca de ello. La tienda de Chrome, Chrome Web Store, ofrece una gran variedad de extensiones útiles para programadores y diseñadores web que aporta más valor funcional. Aquí te dejamos una lista de extensiones de Google Chrome para 2019 bastante práctic ...

general desarrollo web html5 ...

En esta nueva serie de tutoriales y videos, veremos los aspectos generales para la creacion de un game con HTML5, JavaScript y jQuery. Bienvenidos a otro tutorial de HTML5!Hoy iniciaremos la creación de un simple videojuego (bastante simple :)), utilizando apenas HTML5 y Javascript. hablaremos de algunos aspectos basicos de programacion con JavaScript, dando por hecho que ya tenés un poco de noció ...

Navegadores

Cuando se navega a una página web, la respuesta del servidor dependerá de una serie de factores: el sistema operativo utilizado se comprobará (Windows, Linux, Mac o Mobile) junto con el navegador (Firefox, Chrome, Safari y similares) y posiblemente la arquitectura del sistema (x86, x64, etc.) Estos elementos ayudan a los desarrolladores web a optimizar sus páginas y son una parte vital de la exper ...

general html5 programación ...

Existe una nueva forma de marcar una frontera semántica en HTML5, se trata de las nuevas posibilidades que tenemos de definir una estructura semántica más fuerte y más personalizada utilizando los microdatos (microdata) que nos van a permitir desarrollar mejor las estructura web dándole una gran prioridad al trabajo del SEO y la indexación a los diferentes buscadores. Los microdatos van a permiten ...

Internet Android Google Chrome

Buscando brindar una mejor experiencia de navegación para los usuarios sin Internet, el navegador Google Chrome ha realizado una serie de modificaciones en su modo de descarga de páginas. La modalidad sin conexión permite la descarga de los archivos principales de una web para que se pueda revisar su contenido sin necesidad de utilizar la conexión a datos de un móvil. Google Chrome para Android me ...

rendimiento

Optimizar las hojas de estilo mejora considerablemente el rendimiento del dibujado de una página web. Las hojas de estilo de tu sitio web o blog son las encargadas de darle presentación a los componentes que sirven para formar tu página web. El cuidado y optimización de las mismas suele ser pasado por alto con frecuencia, normalmente nos basta con que "funcione la presentación" pero no n ...

Navegadores

Hubo un tiempo en que Safari era una broma de un navegador web, pero ese tiempo ha pasado. Como dice el devoto de Mac John Gruber dice , Safari es un navegador estupendo. Es el único navegador que se siente diseñado para integrarse con macOS, tanto técnica como estéticamente. Pero Chrome es muy bueno también. ¿Qué hace que Safari sea mejor que Chrome? 1. Mejor privacidad Google gana su dinero ...

rendimiento

El rendimiento es algo fundamental para la mejora de la experiencia de usuario y, junto a la calidad de los contenidos que se ofrecen en una web, un gran impulsor del posicionamiento en buscadores. En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio web por medio de GTMetrix. GTMetrix es un servicio de análisis rendimiento de l ...