PERSONALIZA LA BARRA DE NAVEGACIÓN DE CHROME EN ANDROID
Alex Sanchez

Alex Sanchez

Entusiasta, emprendedor, amante del buen fútbol y loco por los bull terrier. Me apasiona lo que hago, las tecnologías y el deporte. Si buscas contenido interesante sobre WordPress, Prestashop, Marketing, y algo de SEO este es tu blog.

Personaliza la barra de navegación de Chrome en Android

Tardarás en leerlo: 4 minutos

Personaliza la barra de navegación de Chrome en Android
5 (100%) 13 votos

Como le he personalizado la barra de navegación en Android a mi blog.

¡Hola!

¿Preparando ya las maletas para el viaje de semana santa? ¿O eres de los que se quedan en casita disfrutando del relax?

Yo esta vez voy a aprovechar como un campeón con un mini viaje ;P

Pues nada, estaba añadiendo el color a la barra de navegación de Chrome en Android y me he dicho, ¿Por qué no se lo explicas a todos tus lectores?
Si seguro que os encanta y le vais a sacar uso!

Pues dicho y hecho, un mini post a modo de “despedida” para estas mini-vacaciones 😀


Como ya habrás visto en varias páginas web, ahora se puede personalizar el color de la barra de navegación del navegador Chrome en Android, ¡y además es muy fácil!

Parece una tontería, pero a mi me ha molao mucho 😛

Le da un toque de color a la página web, en vez de tener la aburrida barra de navegación blanca y sosa, pues la podemos personalizar con nuestro color significativo de marca por ejemplo.

(Ahora falta que lo añadan en la versión de PC por ejemplo y los super Iphone)

Aquí te dejo unas capturas de como queda 🙂

SUSCRIBETE YA A MI BLOG Y RECIBE EN TU CORREO 2 EBOOKS GRATUITOS

¡ÚNETE YA A MI PEQUEÑA TRIBU!

Te mandaré al instante los 2 Ebooks que he preparado para ti :)

Responsable: Alex Sanchez Onofri (MASQUEUNAWEB) Finalidad: Gestionar el envío de 2 ebooks y otras notificaciones sobre diseño y de páginas web, tiendas online, y marketing. Legitimación: Consentimiento del interesado
Destinatarios: El envío de contenidos a los usuarios está gestionados por entidades cuya sede y servidores se encuentran dentro del territorio de la UE o por entidades acogidas al acuerdo EU-US Privacy Shield, cumpliendo con los preceptos del Reglamento Europeo de Protección de datos en materia de privacidad y seguridad. Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos.

 

Bueno, vamos al lío, deja el café 5 minutitos, que en nada lo tendrás listo.

Desde la nueva versión 39 el navegador Google Chrome se integra más con el sistema operativo de nuestro móvil Android y puedes personalizar el color de la barra de navegación.

La manera de hacerlo es realmente sencilla, no esperaba menos tampoco… Solo tienes que modificar el archivo header.php en WordPress o header.tpl en PrestaShop.

Si, acabas de leer bien, vas a poder cambiar el color en la barra de navegación tanto en páginas web o blogs en WordPress como en tiendas online en PrestaShop. (digo yo que esto se aplicará también a los demás CMS, pero como no lo he probado, no lo digo 🙂 )

 

También te puede interesar:  Elegir hosting web sin ser un PRO

Cambiando de color la barra de navegación de tu Blog o Página web en WordPress

Vamos a empezar con WordPress,
Como ya te he dicho antes, es muy sencillo, pero tenemos que tocar un archivo que está en nuestra web. Para ello tienes 2 maneras de hacerlo, o bien desde el mismo WordPress si tienes instalado Jetpack, o desde tu FTP (que para mí, siempre es lo más sencillo.)

Al lío, abres tu FTP y te diriges a la carpeta wp-content/themes/nombredetuplantilla/ y busca el archivo header.php (aunque uses un tema hijo, busca el archivo en la plantilla original (tema padre)

localizando el archivo header.php en el FTP

 

Bueno, una vez lo tengas localizado, haz click derecho encima de header.php y selecciona Ver/Editar

editando-header.php

Una vez abierto (se te abrirá en el bloc de notas o cualquier editor php que tengas instalado),  solo tendrás que añadir el siguiente código dentro de la etiqueta <head> (Recomiendo que lo metas siempre justo debajo de <head> para asegurarte)

<meta name="theme-color" content="#3F51B5">

añadiendo el codigo necesario

 

Recuerda cambiar lógicamente el color hexadecimal por el que mas te guste a ti.

 

¡Y ya está! Ahora vacía el caché de tu página web y ves a verla en tu Android. Ya lucirá con su nuevo color 😛

 

Cambiando de color la barra de navegación de tu tienda online PrestaShop

En PrestaShop no te pienses que es mucho más complicado….

No voy a explicártelo todo otra vez, pero es básicamente lo mismo:

 

En PrestaShop, hay que hacerlo si o si desde el FTP, asi que ya sabes, el mismo proceso que he explicado antes.

Abre tu FTP y dirigete a la carpeta themes/nombredetuplantilla/ y busca el archivo header.tpl (ojo, .tpl)

headertpl

Como antes, haz click derecho encima del archivo y selecciona Ver/Editar.

 

Exactamente igual, verás la etiqueta <head> unas lineas más abajo.

Pega el código justo debajo y cambia el color hexadecimal por el que representa tu tienda online por ejemplo.

<meta name="theme-color" content="#3F51B5">

 

Ahora, hay un paso extra en PrestaShop.

Tienes que forzar la compilación para que los cambios se vean.

 

Para ello, ves al backend de tu tienda PrestaShop y accede a Parametros avanzados > Rendimiento

Una vez allí selecciona Forzar compilación y haz click en guardar.

 

Abre tu tienda online (en el móvil Android, claro), y comprueba que se vea la barra de color (no te olvides de vaciar la caché, sobre todo si usas un módulo externo!)

Una vez lo veas bien, vuelve a seleccionar Nunca recompilar los archivos de las plantillas y dale a guardar.

 

Voilá 😀 Ya tienes tu barra de navegación molona en tu tienda online PrestaShop también.


 

No me enrollo más, ¡que el café me da a mi que se te ha enfriado!

Espero que te haya gustado el post de hoy, ¿Tú ya lo sabías y no me lo habías contado? ¿Lo habías visto muchas veces y no sabías como demonios se hacia? 

Me encantaría leer muchas respuestas, nos vemos a la vuelta de este mini parón de semana santa.

También te puede interesar:  La política de devoluciones en ecommerce: Tu arma secreta para vender más.

¡Un abrazo!

Facebook
Google+
Twitter
LinkedIn
Pinterest

Posts relacionados

2 comentarios en “Personaliza la barra de navegación de Chrome en Android

Deja un comentario

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas de privacidad.

GDPR

Advertising

Cookies de terceros

Cookies necesarias para recabar datos de navegación y cookies pertenecientes a Google.

IDE ,NID, _ga, _gid, _gat*
_gat,_gid, _ga

Other

Ahora, si quieres, puedes seguirme en mis Redes Sociales y así estar en contacto :)