Mapeando uma imagem + Menu dentro do cabeçalho




Oi gentee, como vai vocês? fiquei meio sem postar ne? mas eu juro que essa semana eu vou me dedicar mais a esse blog e o blog das fanfics, já eu to meio sem ter o que fazer por causa da férias, ainda nem sei como que eu vou postar quando começar as aulas, porque quero me dedicar bastante a escola, talvez eu só poste na sextas, quando eu tenho um tempinho para fazer alguma coisa, mas não vou pensar nisso agora.

Hoje eu trouxe um tutorial bem útil para vocês, bom...para mim foi bem útil, acho que para vocês também vai ser. O tutorial de hoje e como mapear uma imagem/capa e como bota-la no blog, o famoso menu dentro do cabeçalho é bem simples, não tem muito mistérios, então vamos lá? click em leia mais e vamos ao tutorial.




  • Primeiramente você deve criar sua capa, faça ela do jeito que você achar melhor, eu sempre faço minhas capas em png, porque uma imagem feita em png e muito mais fácil de usa-la no blog, por poder botar fundos diferente sem precisar mexer na capa. Agora você pega essa capa que você criou para o cabeçalho e vamos mapea-la seguindo os seguinte passos. ( por favor não ligue para capa do exemplo porque era do meu antigo blog que eu exclui ) 



  • Agora você vai entrar nesse site image-maps.com, e vai encontrar tudo exatamente assim. Qualquer coisa clique na imagem para vê-la maior.




  • Veja a imagem, qualquer coisa clique para vê-la melhor.



  •  Agora você vai em ''start mapping your image''. Veja a imagem a baixo. 



  •  Depois de você ter feito o processo do 4° passo, tudo vai ficar assim:





Você deverá esperar 10 segundos para poder começar a mapear sua imagem, como você pode ter notado sua imagem ficar em baixo dessa ''baixa'' amarela, se sua imagem não tiver em baixo dessa caixa não se preocupe e assim mesmo. 

  •  Depois de você ter esperado 10 segundos, você vai encontrar uma frase em azul escrito ''continue to next step'' e você deverá apertar nela. 





  • Tudo vai ficar exatamente assim.




Caso sua imagem não aparece repita todo o processo.Na barra lateral você vai encontrar algumas opções marcadas, desmarque elas, deixe todas as opções desmarcadas. 



                                Vai estar assim:                      Depois deve ficar assim:




  •  Agora você vai no botão ''rectangle''. 

  •  Você pode notar que vai sumir o botão e vai aparecer um pequeno quadradinho no topo da imagem junto com um retângulo em baico do quadradinho, assim:



  •  Você deverá colocar o quadradinho a onde você quiser que fique o link e depois preencher os retângulos.





No local onde você pode escrever alguma coisa para aparecer quando a seta passar por cima, não é necessário botar, eu prefiro que não coloque nada. 

  •  Agora você vai em ''save'' 




depois de ter feito isso você vai em ''get your code'' 






E pronto, você vai para outra pagina e você vai entrar em ''HTML Code''






E você vai ver que vai aparecer um código e você vai copiar esse código e salve em algum lugar que você irá usar depois para botar a capa no seu blog. 






Agora vamos aprender a como botar essa imagem/capa mapeada no cabeçalho do blog.

  • Primeiro de tudo você deve pagar o seu cabeçalho desse jeito:
você vai em ''editar html'' e vai apertar ''ctrl + F'' e vai procurar pelo seguinte código: 

 Header1

     você deverá achar algo parecido com isso: 

<b:widget id='Header1' locked='true' title='NOME DO SEU BLOG (Cabeçalho)' type='Header'/>



Pague essa parte que você achou e salve essa parte em qualquer lugar que você quiser, porque pode precisar depois. Você pode notar que seu cabeçalho sumiu, ótimo! É assim mesmo. Depois que você salvou seu html e o código que você apagou vamos para o ''Layout'' e você vai adicionar um ''Adicionar um Gadget'' e vai adicionar esse aqui: 





Agora você entra nele e vai fazer exatamente isso:



Salve depois que você colocar os eu código e deve ficar assim: 




Salve tudo e pronto, seu menu dentro do cabeçalho está pronto :D espero que esse tutorial tenha te ajudado, bjss ate o próximo post <3

Nenhum comentário: