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 |
¿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:
Eso es todo, cualquier duda me tienes en los comentarios.
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.
ResponderEliminarHola 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.
EliminarCualquier duda aquí me tienes.
Gracias a ti por participar.
¡Lo conseguí! ¡Muchas gracias por compartir!
EliminarMe alegro mucho, a disfrutarlo. Cualquier cosa aquí estoy. Un saludo!
EliminarMe salta error The element type (meta) must be terminated by the matching end-tag (/meta)
ResponderEliminarHola 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.
EliminarMuchas gracias por participar!
Hey gracias por tu aporte, men, he intentado ponerla dentro y fuera de y no hace ningun cambio, sino mas bien me reporta un error en el codigo.... aveces no reporta el error guardo los cambios y no resulta, el blogg se queda intacto...
ResponderEliminarSólo funciona en Chrome. Asegúrate de que escribiste correctamente el código.
EliminarMuy buena información quiero comenzar a estudiar este curso diseño Web lo he visto mucho navegando y quería saber si lo conocen?
ResponderEliminar