[Tutorial] - Link dentro do banner (cabeçalho)!! « •My Mємσяιєѕ...•
Home Sobre o blog F.A.Q Contato Perfil completo Perfil do Twitter Página no Facebook Assine o Feed!

28 [Tutorial] - Link dentro do banner (cabeçalho)!!

Graças a uma dúvida da Camille,leitora fiel aqui do blog,decidi fazer esse post para responder a uma dúvida que muitos de vocês devem ter. Eu mesma demorei pra achar a resposta também...=*



A imagem da header (cabeçalho) com links inseridos dentro dela (também chamado 'Mapeamento de Imagem') dá uma aspecto mais profissional ao blog,e economiza espaço já que você não precisa usar o espaço da sidebar ou acima dos posts para colocar os links do menu. Além disso,a pessoa que estiver visitando seu blog pela primeira vez não vai se sentir perdida na hora de 'explorar' seu cantinho. Resumindo: é uma aposta super útil para o seu layout,e é mais fácil de se fazer do que parece!

Sem mais,vamos ao tutorial:



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

Abra o site Image Maps. É nele que vamos 'trabalhar' okay?!

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".

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 retâ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'.

A imagem,totalmente mapeada,deverá ficar assim:


Aí você deve clicar em 

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!

Prontiinho! Seu cabeçalho está devidamente mapeado! Haháá...\Õ/



Galera,sorry pelo post imeenso! Mas se tratando de um tutorial,não dá pra fazer um post pequeno,porque fica super mal explicado...e eu espero ter conseguido explicar direitinho pra vocês. Na prática isso tudo é mais fácil do que a teoria aparenta...rsrsrs
Enfim,espero ter ajudado a Camile e todas as leitoras que também tem essa dificuldade!

28 coment's...♥:

Dry Lima disse...

Adorei o post, super útil.
Antes de ler esse tutorial, eu mapeava de um jeito bem mais complicado. Eu tinha o código base, dai eu media as larguras e tudo mais no paint e depois colocava as coordenadas no código e depois os links. Era bem complicadinho, principalmente quando tinha vários links para fazer.
Mas agora, esse jeito que você ensinou é beeem mais prático, amei haha *-*
Aqui está muito muito lindo.

Big, big beijo ♥

http://paradiisegirls.com
@paradiisegirls

Sara Alves disse...

Gostei desse tutorial, vou usar ele no meu próximo layout. E sem contar que fica bem melhor do que colocar todos aqueles ícones de rede social, né?!

Adorei seu blog, estou seguindo. Se quiser passar no meu, fique a vontade. Beijos :)

http://sweetmachine.blogspot.com/

Julia disse...

Com certeza me ajudou bastante também, Fran! Vou usar no meu próximo layout...

Mari disse...

Oh Gosh... meio complexo... mas vou seguir passo a passo e tentar colocar no MariJust, qq duvida venho tirar aqui depois!!

bjo fran

Marília Pessoa disse...

Uau, achei muito legal esse tutorial, os ícones ficam mais organizados e unidos numa imagem só! Sem contar que nada passa despercebido aos olhos dos leitores,já uma das primeiras coisas que prestamos atenção em um blog é seu cabeçalho.
Bjssss,seu tutorial está ótimo!
http://blogtrashrock.blogspot.com/

Gaby disse...

Olá Francelle!
Tenho certeza de que seu tutorial irá ajudar muitas blogueiras, afinal, está super bem explicado e com boas imagens para orientação.
Fico feliz por ter fechado parceria com seu Blog. Tenho certeza de que valerá a pena.
Obrigada pelo elogio feito ao design do Versos Mudos. Aqui está demais!
Atualizei meu Blog. (:
Beijocas :*

Thalia Monteiro disse...

Adorei o tutorial ;)

http://blogjustmy.blogspot.com/

Tay disse...

UOL, adorei o tutorial *-*
Depois irei tentar fazê-lo.
Bjus ;*

Creativity and Personality disse...

Noooooooossa, tá tudo bem explicado, mas é complicadinho! Tem que ler e ir fazendo ao mesmo tempo hahahaha Parabéns pela dedicação amiga! Sempre lindo por aqui! Bjsss!

http://creativityandpersonality.blogspot.com/

Sonhos Pré-Concebidos disse...

Oie, adorei seu blog ,benhê *-* sou nova aqui, eu e minha amiga fizemos esse blog a pouco tempo, então se vc puder passar lá e dizer o que achou, vai ser ótimo rs *-* bjks
www.sonhospreconcebidos.blogspot.com

Unknown disse...

Acho que vou usar no meu próximo design *--*
Amei seu blog, to seguindo!
Se quiser, comenta e segue meu blog? Agradeço.
Beijos
deluxegirlsblog.blogspot.com

Vítor Teixeira disse...

Mapeamento é uma ferramenta ótima, já uso há um tempo nos meus trabalhos! =)
http://nossa-caixa.blogspot.com/

Marília Pessoa disse...

Tem post novo no Trash Rock! Aproveite e veja o visual novo do blog!
http://blogtrashrock.blogspot.com/

Camille disse...

eeeee!! é o tutorial que eu pedi!!!! mt obrigada fran!!! vou colocar em prática! ;)
ótimo 2012 pra vc!
bjs

Anônimo disse...

Muito bom o tuto!
Já havia feito no SC esse tuto tamém =D

Beijos, N.
http://soulcollide.tk

Vanda disse...

Adorei... a tempos eu procurava isso.

Lindooooooooooooo amei salvei nos favoritos!

Anna Carollyne Oliveira disse...

Nossa amr, você me ajudou muito! Vários blogs ensinam como Mapear a imagem de uma forma tão minimizada que não conseguir fazer :s

Mas, depois ficou umas letras abaixo do cabeçalho como se fosse créditos .. Tem como tirar?

http://world-cutest.blogspot.com/

lu disse...

Muito obrigada amei o tuto!
Você poderia ensinar como TIRAR o cabeçalho mapeado?
Beijos *-*

Prof. Sandro Job disse...

ADOREI O POST!!!! ESTAVA PROCURANDO ! VOU FAZER NO MEU BLOG E DEPOIS TE MANDO O LINK PRA VER!!! ABRAÇOS!!

Unknown disse...

nao consegui,da uma mensagem dizendo que ouve um erro e o meu blog é muito sem graça queria ter um blog igual ao seu,perfeito.

Imagine Fanfictions disse...

Tá dando erro. Primeiro apareceu que o "fref" tem que terminar com ";". Blz, eu coloquei o ";". Aí depois apareceu a mensagem de que foi referenciado mas não declarado. Não tô conseguindo colocar. Me ajudaaa

Unknown disse...

Adorei o tutorial, procurei em vários blogs e vc foi a única que ensinou a por no lugar do cabeçalho, gostei muito (:

Vickys disse...

Obgd me ajudou muito <3

Francelle Machado disse...

Gente, que bom que o tutorial ajudou. Fico meega feliz!
E olhem só, aos que tiveram problemas: tentem de novo, não desistam, porque eu mesma tentei mapear uma imagem hoje e deu tudo certo! \Õ/

Qualquer coisa, é só entrar em contato pelo e-mail: blogmymemories@gmail.com

Beeijos galera!

Anônimo disse...

adorei seu tutorial...e coloquei seu blog como link ..pode????

Anônimo disse...

caso nao possa me avisa...ja virei sua seguidora
bjs

Julliana disse...

Muuito obrigada !!
Super consegui fazer, é um milagre consegui mexer no html =D

Unknown disse...

Infelizmente comigo não rolou :'(

Diga o que você achou do post,vou amar saber a sua opinião!!! \Õ/

Mas atenção!!!
→ Não uso moderação de comentários,mas mesmo assim não permito:
•Xingamento a mim ou ao conteúdo do blog;
•Spam:
propaganda de algo que não seja um blog ou site de confiança.Odeio aqueles anúncios que te mandam clicar em um link suspeito...=*
•Palavrão ou qualquer outro tipo de desrespeito!!


Caso você viole as regrinhas,seu comentário será deletado tá ok??!!

Mas fora isso,fique a vontade para comentar!!!

Related Posts with Thumbnails