Inserir Links na Imagem de Cabeçalho de um Jeito Fácil

Nesse tutorial vou mostrar como fazer para mapear uma imagem de cabeçalho de um jeito bem simples, ou seja, vamos colocar links em textos que aparecem em uma imagem. Já postei como fazer isso uma vez, mapeando com o site Image Maps, o de hoje é manualmente. E deixo para vocês também esse cabeçalho acima, caso alguém queira usar, que fiz usando o Homekoro que desenhei.

Primeiro você precisa inserir o cabeçalho no template. Vá em Modelo-Editar Html...

Procure por header h1 e assim que encontrar, coloque abaixo dele: display: none;

Isso fará com que o título do seu blog fique oculto, já que usaremos uma imagem na qual o nome do seu blog esteja escrito.

Agora, antes de /b:skin insira:

 /* Header */
.topo{
margin: 0px;/*distancia do topo*/
height: 0px;/*altura da imagem*/
background: url('URL-DA-IMAGEM-HEADER') no-repeat top center;
background-size: cover;
}

Mude o valor em margin para ajustar a imagem de acordo com o topo, sendo que números negativos farão o cabeçalho 'subir'; mude a altura de acordo com o tamanho da imagem, substitua o link do cabeçalho.

Agora procure por </header> e abaixo dele cole:

 <div class='topo'></div>
     <style type="text/css">
 dl.image_map {display:block; width:440px; height: 0; position:relative; margin:2px auto 2px auto;}
 a.LINK0 {left:0px; top:0px; background:transparent;}
 a.LINK0 {display:block; width:76px; height:33px; padding-top:33px; overflow:hidden; position:absolute;}
 a.LINK1 {left:0px; top:0px; background:transparent;}
 a.LINK1 {display:block; width:76px; height:33px; padding-top:33px; overflow:hidden; position:absolute;}
 a.LINK2 {left:0px; top:0px; background:transparent;}
 a.LINK2 {display:block; width:76px; height:33px; padding-top:33px; overflow:hidden; position:absolute;}
 a.LINK3 {left:0px; top:0px; background:transparent;}
 a.LINK3 {display:block; width:76px; height:33px; padding-top:33px; overflow:hidden; position:absolute;}
</style>

<dl class="image_map">
 <dd><a class="LINK0" title="Home" href="#"></a></dd>
 <dd><a class="LINK1" title="Sobre mim e o blog" href="#"></a></dd>
 <dd><a class="LINK2" title="Respostas para Duvidas Frequentes" href="#"></a></dd>
 <dd><a class="LINK3" title="Pagina Fofa" href="#"></a></dd>
</dl>

Nós fizemos a imagem do cabeçalho aparecer para mapeá-la. Em width: 440px definimos a largura total da área a ser mapeada. Os valores em left servem para aproximar ou afastar os links em relação à esquerda e os de top, em relação ao topo. O plano de fundo ficará transparente para que a imagem seja vista, mas uma dica é colocar uma cor em background (black, por exemplo) na hora de editar o código para que quando você visualizar a imagem apareça um quadradinho indicando onde está o link, fica mais fácil para posicionar exatamente onde a gente quer que fiquem os links.

Width:76px, height:33px e padding-top: 33px, são a largura e altura das palavras que aparecem no cabeçalho, definem a área exata onde clicar, para não ultrapassar o link de um no outro.
Se quiser adicionar mais links, basta copiar os códigos alterando os números:

Depois de posicionar tudo, mude os textos que aparecem em title para uma descrição do link e troque '#' por links.
E é isso :D

0 Comentários

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

Reino Kawaii