Ao abrir um site pelo seu celular você já deve ter visto uma diferença nos cabeçalhos de alguns, onde uma cor padrão cria grande destaque na entrada.
Site da Saraiva
www.saraiva.com.br
Site da BCOMB Digital
www.clauboaventura.com.br
Esse estilo é dado pela <meta>, encontrada no HEADER(cabeçalho), ela é uma tag do CSS que define algumas funcionalidades de um site. Mesmo que não apareça no corpo do site, ela é usada principalmente para criar descrições e chaves para pesquisas (As famosas “METAS TAG’s DESCRIPTION” usadas pelo algoritmo do Google, muito importante para o seu site).
Com a tag <meta> é possível inserir o THEME-COLOR, um dos names usados para a mais nova atualização do Google Chrome Mobile. Se liga!
Com a atualização 39 do Google Chrome o theme-color se tornou possível de um jeito prático, funcional e agradável a cara do seu site em versões mobile.
Para a definição da cor que você deseja usaremos a seguinte linha de código:
<meta name=”theme-color” content=”#COR-DESEJADA”>
Se liga como aparece no site da BCOMB
**Você não pode esquecer, essa Meta Tag do Theme-color e todas as outras Metas deve ficar sempre dentro do cabeçalho <head><meta></head>.**
Com isso é só meter a mão na massa! Encontre o seu arquivo HEADER (Se o seu site é WORDPRESS baixe esse vídeo de 13s e saiba como encontrar o arquivo header.php), insira a linha do THEME COLOR e altere para a sua cor desejada (No resto da linha não é necessária a mudança pois pelo name é onde o código entende e interpreta a ação da tag).
Do mesmo modo que o do site da BCOMB é #0090cf e o da Sairava é #fd0 você só precisa encontrar a cor em Hexadecimal (Você pode encontrar por esse color picker http://www.w3schools.com/colors/colors_picker.asp) e mandar ver.
Poucos são os sites que fizeram o uso dessa tecnologia, então insira em seu site e saia na frente dos seus concorrentes em termos de inovação.
Espero que tenha aprendido com esse post, mantenha-se ligado no nosso BLOG que estaremos agora, ainda mais, atualizando-o.
