Cómo colorear la barra de navegación de tu Web en Chrome (Android)

Por iRe
Ago 21st, 2015
13 Comentarios

Desde Android 5.0 Lollipop, Chrome está más integrado con el sistema operativo de Google y muestra, en la vista de aplicaciones recientes, cada una de las páginas Web abiertas. Este cambio llegó con la posibilidad de personalizar la barra de navegación de un sitio Web, tal y como lo hacen las aplicaciones Android. No obstante, son muchas las personas que a día de hoy aún desconocen esta opción de personalización. Si eres una de ellas y tienes una Web o un blog, prepárate para añadir una simple línea a su código HTML y darle más color en Google Chrome para Android. ¡Seguro que ya lo has visto al visitar sitios como Pinterest o Facebook!

personalizar-chrome-color-web

Cómo personalizar Chrome con el color principal de tu sitio

El siguiente tutorial es un paso a paso del cambio utilizando WordPress como CMS. Si utilizas otro y no te aclaras con la inclusión del código, te espero en los comentarios 😊

1. Una vez en el panel de WordPress, accede a la edición HTML (Apariencia / Editor) para situarte por encima del cierre de la etiqueta head – es decir, </head> – en el archivo header.php.

2. La linea que has de añadir es la siguiente:

<meta name=”theme-color” content=”#tucolor”/>

Como puedes suponer, debes cambiar “tucolor” por el código HTML del color que quieras. Aquí tienes una completa paleta muy cómoda de utilizar para este tipo de modificaciones. Por ejemplo, el azul de ADNFriki es #4994D6.

Personalizar-Barra-Navegacion-Chrome-Android3. Haz click sobre el botón “Actualizar archivo” para guardar los cambios.

4. Vacía la caché en caso de que utilices algún plugin como WP Super Cache y accede a tu sitio con tu Android, para comprobar cómo queda y cambiar el matiz del color elegido si lo crees conveniente 😜

¡Espero que te haya sido útil! ¡Hasta la próxima!

Sobre mí

- He aquí la mamá de ADN Friki :) Adicta al mundo Web. Más sobre mi en el apartado sobre mí o Google+. En resumen adoro las letras y tengo unos cuantos blogs. Empecé trabajando para otros en Internet y un día me dije a mi misma: "¿Por qué no hacerlo para mi?". En eso estoy desde el año 2011.

13 comentarios

  • Muchísimas gracias es justo lo que estaba buscando, pero no sabia que era tan sencillo colorear personalizadamente la barra de mi navegador en mi celular. Ahora mismo lo pongo en practica te pasaste! Me leeré mas temas de tu web gracias.
  • Muy explicativo el tutorial. Hace poco actualice mi android a Lollipop 5.0 y empecé a ver estos cambios en algunas webs famosas (pensé que sólo ellos lo podían hacer). Ahora mismo actualizo a mi color favorito la barra de navegación de mi web.
  • Se ve genial, elegí este color #64B5F6 ya que es el que más favorece a mi web, gracias por el tuto ya lo deje implementado, me encanta personalizar siempre, ya que esos pequeños detalles hace que los visitantes se identifique y quieran volver.
  • Muchas gracias por el tutorial Ire, siempre me pareció curioso esto y no sabía como hacerlo para ser sincero jaja. Cuando entraba a Facebook siempre se ponía azul pero cuando entraba a otras webs no, entonces pensé que era algo que sólo Facebook "tenía permitido" o algo así, pero por lo visto, todos podemos. Saludos :).
  • Yo con el LG Leon y con Android 5.0 , sin saber que estas maravillas se puede lograr esto. Lo bueno que se puede elegir el color que mas me guste y vaya con mi web. Gracias por el tutorial