Depois de dividir com vocês o novo cabeçalho do blog e a nova área de ''Sobre'', leitoras vieram me pedir dicas de como personalizar o cabeçalho do blog com as redes sociais, link direto para a ''Home'', ''Sobre'' e ''Contato''. Aqui na plataforma do WordPress não é possível fazer esse tipo de alteração se você não tem como acessar o HTML do blog, mas se você tem uma conta no Google e usa o Blogger, boas noticias pra vocês, vocês podem usar sim um cabeçalho com links, até porque no Blogger é possível acessar a área de HTML, área que vamos precisar para poder fazer essa alteração.

Para poder ajudar vocês, criei um blog teste e um cabeçalho personalizado para mostrar como funciona e tudo o que vocês irão precisar :D. O layout usado no blog teste vocês podem encontrar no ''My Blogger Themes'' e é o template ''Persona''.

Esse foi o cabeçalho que eu criei para o tutorial de hoje!

Procurei colocar vários ícones para mostrar como será colocado o link em cada um deles, o que é bem fácil na verdade.

O QUE VOCÊ PRECISA:

• Criatividade;


• Ter um blog na plataforma do Blogger;


• Ícones;


• Image Maps.

Os ícones que eu usei foram encontrados no site ICONFINDER (já está linkado na palavra ''ícones'') e o ''Image Maps'' é o site onde vamos colocar os links nos ícones do nosso novo cabeçalho.

1. Acesse o site IMAGE MAPS (está linkado acima) > Procure pelo cabeçalho que você criou (Browse For File) > Clique em ''Start Mapping";


2.  Você será direcionado para página de ''Upload'' > Clique em ''Click To Continue'';


3.  O mouse ficara como uma ''mira'' e agora você vai centralizar o mouse nos ícones e clicar com o botão esquerdo do mouse e selecionar a opção "Creat Rect'' e vai abrir uma nova janela e um retângulo, o qual você irá deixar do tamanho do ícone e colocar sua URL no lugar indicado.

4.  Depois de colocar a URL em todos os ícones, clique novamente com o botão esquerdo do mouse e selecione a opção ''Get Code'' > Selecione a opção ''HTML'' e copie o código. Lembrando que o código fica beeem lá em baixo!

5. Depois de copiar o HTML você vai em ''Modelo'' (lá no seu blog) > Editar HTML > Clique dentro da caixa onde tem o código do seu blog pressione Ctrl + F e na barra de pesquisa que abrir, procure por "</head>" e logo abaixo de </head> digite o seguinte: "<center>cole aqui o código que você copiou do image maps</center>". Tem um exemplo logo abaixo!

5. Depois de escrever e colar o código, clique em ''Visualizar Modelo'' para ter certeza de que deu tudo certo. Se estiver tudo ok com o modelo, só clicar em ''Salvar Modelo'' e prontinho.

Veja como ficou o meu layout clicando AQUI! Claro que ele não tem nada, foi criado apenas para mostrar pra vocês como vai ficar. Podem ver que todos os ícones podem ser acessados diretamente do cabeçalho. Curtiram o tutorial?

Espero ter ajudado vocês, mesmo sendo atrapalhada na hora da explicação, eu espero que tenha conseguido explicar tudo certinho.

Qualquer duvida, comenta aí!

<3