Image

A COR DO NAVEGADOR

Grande parte das visualizações de um site na Internet tem sido por meio de dispositivos móveis. Por conta disso, um […]
,
Grande parte das visualizações de um site na Internet tem sido por meio de dispositivos móveis. Por conta disso, um layout deve ser responsivo e integrado com a nova realidade de comunicação. E há recursos que vem a incrementar ainda mais o mobile de modo a chamar atenção, a atrair mesmo.

E um desses casos é a coloração da barra de endereços do Google Chrome para Android. Esse recurso do Material Design (diretriz de design do Google) está disponível desde a versão 5 do Android, o Lollipop.

Em alguns sites, e eu vou mostrar o segredo, se bem que não tem, a cor que aparece na barra do navegador é a mesma do padrão do site. Como aqui no Blog Josivandro Avelar, onde a coloração é azul-clara, que nem nas bordas do site.

Outros sites famosos adotam esse recurso (se você estiver no Chrome via Android, clique em um deles e veja):

*G1
*Globo Esporte
*GShow
*Terra
*Yahoo
*WordPress.com
*TecMundo
*Tudo Celular
*AndroidPit
*Facebook

Aqui temos outros sites desenvolvidos por mim que ganharam as colorações de suas respectivas identidades visuais.

E sim, qualquer um que tiver um site, até mesmo no Blogger, pode fazer isso. Porque não tem segredo. O segredo é o código:

<meta name="theme-color" content="#000">

Onde #000 é a cor que você deseja inserir. A que está no Blog Josivandro Avelar é #1e73be, que vem a ser esse azul. Procure a cor que deseja e altere o código hexadecimal para essa cor.

Como se insere

Agora sim, vamos começar a mágica.

Para WordPress.org (em WordPress.com não se mexe nos arquivos de tema), o código deve ser inserido entre as tags <head> e </head>, que ficam no cabeçalho do site (header.php). O arquivo está em Aparência> Editor. E é só procurar o header.php; o <head> está lá. Coloque o código acima abaixo de <head>, simples.

Só salvar e ver o resultado.

Para Blogger, o código deve ser inserido no editor de HTML (ir para Modelo > Editar HTML). O código deve ser inserido abaixo da tag <head>.

Além de adicionar o código, feche a tag, adicionando ao lado a tag </meta>, ficando assim:

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

Sem ela, não vai, dá o erro, pede essa dica de fechar a tag. Então faça já fechando a tag.

Só salvar e ver o resultado.

Há temas preparados, sabia?

É o caso do tema do OCD Holding. O tema está em WordPress.com, não pode ser mexido, porém o tema Blaskan, empregado no site, possui o código em questão embutido, e por isso, a coloração aparece. Um trabalho a menos para o editor.

E é o que eu digo: os temas e recursos da Internet estão disponíveis para todos, do maior grupo de comunicação do mundo até um site simplezinho de pouquinhas visitas, e até para quem não gasta nada. É onde todos somos iguais e temos de certa forma o mesmo peso.


Receba os posts do site em seu e-mail!

Toda vez que um post for publicado no site, você irá receber na hora.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

Antes de deixar o seu comentário, leia a Política de Comentários do site.

Luneta Sonora

Um podcast sobre tudo e o nada ao mesmo tempo.
  1. Luneta Sonora 130: Mais uma semana trazendo novidades
  2. Luneta Sonora 129: Um episódio organizado no meio da desorganização
  3. Luneta Sonora 128: Só mais um episódio com recados da semana
  4. Luneta Sonora 127: Sério que eu esqueci dos três anos do podcast?
  5. Luneta Sonora 126: Se eu esqueci de alguma coisa, eu não me lembro
  6. Luneta Sonora 125: Como eu esqueci de oito desenhos?

Assine A Luneta

Receba os posts do site em uma newsletter enviada às segundas, quartas e sextas, às 8 da manhã.