segunda-feira, 3 de dezembro de 2012

Tutorial - Link dentro do Banner

Red+dress+%252b+breatheyourdreams+on+tumblr_l766bndscl1qcssjfo1_500_large_large
 Quem nunca teve vontade de aprender a por links dentro do banner?Acho que ninguém por isso trouxe esse tutorial mas antes de aprendermos queria creditar o My Memories   e o Chocolate ao Leite   ok?
 Esse tuto parece ser mega difícil mas quando estamos fazendo vemos que não tem dificuldade nenhuma pois até eu que sou uma ignorante no assunto HTML consegui...Bora aprender?



 Crie uma imagem,de sua preferência,com o texto do menu já em seu devido lugar. Exemplo:

 Abra o site Image Maps pois nele que iremos mapear as imagens
 Escolha uma imagem do seu computador (From your pc) ou de um link externo (From a URL) para mapear. Depois,clique em "Start Mapping Your Image".
4º Na página que abrir,clique em:

 Irá abrir a página de mapeamento,que é assim:
1 - Rectangle ~ você cria um retângulo, onde irá colocar o link para o 'pedaçinho' de imagem.2 - Custom Shape ~ Você cria uma forma customizada, onde colocará o link, assim como na forma do ratângulo. Não é indicado para os iniciantes! Indico sempre o uso do retângulo, que é bem mais fácil de se entender...

Nas configurações que aparecem abaixo,você não precisa fazer nada,mas tenha certeza de desmarcar a opção 'Show Text Links',que é importantíssimo fazer!

 Clicando em 'Rectangle',vamos começar a mapear a imagem:

 Você poderá aumentar e diminuir esse quadradinho que aparece,e deverá colocar o endereço que você quer que seja clicável quando passar o mouse sobre o 'pedacinho' da imagem com o retângulo em cima.

Caso tenha alguma dúvida se o link escolhido é o certo,clique em 'Test Link' e veja se a página correspondente vai abrir.
Na parte 'Title/Alt for this map:',você poderá deixar em branco.
Não se esqueça de clicar em 'Save',e se quiser excluir o retângulo para criar alguma outra forma,clique em 'Cancel'.

7º A imagem,totalmente mapeada,deverá ficar assim:

Aí você deve clicar em:

8º Na página que aparecer,clique em 'HTML Code'. Você vai ver essa página:

Copie TODO o código,e agora vem um segundo tutorial pra ensinar vocês a colocarem no lugar do cabeçalho padrão estabelecido pelo Blogger...

Vá em Modelo > Editar HTML > Prosseguir.
Clique em 'Expandir Modelos de Widgets',e dê um Ctrl+F para abrir a caixinha de busca do seu navegador. Procure por <b:widget id='Header1' locked='true' e mude o "locked='true'" para "locked='false'". Isso dará a opção de excluir o cabeçalho padrão do Blogger,que no modo 'true',não é possível!
Vá no layout do Blogger e exclua o cabeçalho,deixando a header 'vazia',e após isso volte à edição do HTML.
Lembra do código que você copiou no 8º passo do tutorial?? Pois é,agora você vai precisar copiar ele e colar logo abaixo do <header>Caso tenha dificuldade para achar o <header> no código,vá ao Ctrl+ F de novo!
Após tudo isso,clique em Visualizar, e se estiver tudo certinho,clique em Salvar Modelo!




Nenhum comentário:

Postar um comentário