Muitos temas do WordPress trazem uma imagem no topo, com o nome do blog em um link. A imagem é apenas um pano de fundo, o título é definido pelo usuário, que não tem muitas opções, já que deve se ater a fontes comuns, disponíveis em qualquer computador.
Daí, você pega uma bela imagem, acrescenta o nome do seu blog no Photoshop, com a fonte que sempre sonhou. Então vem o primeiro problema, como se livrar do título que insiste em aparecer?
Você faz uma busca e encontra a resposta, “display: none;” logo abaixo do CSS que define o header. Problema resolvido e você não pensa mais no assunto.
Porém, ah porém, O Google, assim como qualquer site de busca, não vê imagens. Mesmo que você acrescente as tags alt e title, como manda o figurino, seu site nunca será visto da mesma maneira que um utilizando o método tradicional.
Por que isso acontece? Simples, tags alt e title não têm o mesmo peso que o título entre as tags <h1></h1>.
Sem contar os navegadores configurados para não mostrar imagens, navegadores modo texto etc. Poucas pessoas usam esses navegadores, mas Deus gosta de sites que sejam de fácil acesso, leia-se que funcionem em qualquer dispositivo. E “display:none” esconde realmente o que está por trás dele, inclusive dos buscadores.
A melhor maneira de lidar com isso é mostrar tanto a imagem quanto o título original, dentro das tags <h1></h1>.
Mãos a obra:
A primeira coisa é localizar, no CSS do seu blog, o código responsável por gerar o link do título. Ele é mais ou menos assim:
#header h1 a{
text-decoration: none;
color: #006600;
}
Substitua pelo código abaixo:
#header h1 a {
display: block;
width: X% or Xpx;
height: Xpx;
outline: none;
text-indent: -9000px;
text-decoration: none;
background: url(YOUR IMAGE ADRESS) no-repeat left top;
border-bottom: Xpx solid #006000;
}
“Width” pode ser em porcentagem ou píxels, dependendo do seu tema, “height” é a altura da sua imagem;
“border-bottom” é com você, dependendo se quer ou não uma linha abaixo da imagem, remova ou mude a configuração, se for o caso;
O pulo do gato é o “text-indent: -9000px”, o que ele faz é dizer ao navegador para jogar seu título para bem longe da página visível, 9000px de distância, para ser mais exato. Porém, e agora o porém é legal, seu site será visto perfeitamente em qualquer navegador e, o que é melhor, pelos mecanismos de busca.
| Tweet | Compartilhar |
Uauuuuuuuuuuuu
Parabens!!! No dia que eu resolver sair da configuração padrão do blogger e criar uma imagem lega para o meu cantinho é claro que vou usar o pulo gato!!!
P.s: vai lá no meu blog e eu pode curtir muito com a minha cara
rs
Bjs
Cara! Acho que você anda lendo pensamentos… Acabei de ter a idéia de colocar um logo no lugar do nome do blog e dou de cara com este post…
Valeu a dica! Vou usar…
abraços
OLá, tudo bem? Adorei o novo layout do blog! Um abraço e boa semana!
Você é o homem das idéias. Sempre umaas novidade, cada vez que visito.
E o overflow:hidden?
Doufer,
Sendo header, você não precisa usar, nem faz sentido um header maior que o espaço disponível. A largura é definida em porcentagem para os templates elásticos e em px para os fixos, logo é só ter em mente a imagem final, para não ficar esquisito, principalmente no tema elástico.
Noronha,
você autorizou?
http://portalwordpress.com.br/wp/hacks/header-clicavel-no-wordpress/#more-104
abraços
Excelente dica. Valeu, Noronha. Já apliquei no novo layout que estou preparando para o Poltrona.TV.
Ale Rocha
Isso não é considerado Black Hat não amigo?
Não.