92. Menu no Cabeçalho do Blog

Peça na Ask do blog aqui
\Yoo Pandinhas/
Como vão vocês? Espero que estejam bem. Eu estou um pouco melhor, tirando o fato de que vocês parecerem me abandonar T^T, mais tudo bem né bubu... Bom... voltando ao assunto do post, me pediram na ask para fazer um tutorial de como colocar um menu no cabeçalho do blog. Tentei por vários dias achar um tutorial que fosse bom, já conhecia um mais queria saber se ele era bastante usado e sim ele é bastante usado. Não é um menu com efeito ele só tem o link como podem ver aqui no blogroll do blog. Então vamos ao tuto? o3o


ANTES DE QUALQUER COISA
Você deve ter feito a base do seu cabeçalho com o menu em cima, em baixo, de um lado do outro você que decide... eu vou usar esse:
Se quiser pode usar como teste ^^

Agora você deve deletar o cabeçalho original pelo html do blog. Antes, faça uma cópia do modelo do seu modelo caso algo der errado.
Vá no html do seu blog e procure por Header1. Você deve achar algo parecido com isso:
<b:widget id='Header1' locked='true' title='NOME DO SEU BLOG (Cabeçalho)' type='Header'/>
Apague toda essa parte e salve, seu cabeçalho sumiu. Agora você deve mapear sua imagem. Vou ensinar...
Entre nesse site Image Map Tool. Lá tem a opção de fazer upload da imagem, mais eles não hospedam ela, então você deve hospeda-lá antes, eu sugiro o Tinypic
Depois de hospedar a imagem copie a url para sites e cole no "From a URL" como a imagem seguinte:


Agora clique em "Start Mapping Your Image", vai aparecer algo como isso:


Clique em "Continue to Next Step". Agora clique em image  na coluna lateral direita do site e faça um retangulo em volta da onde você quer o link e edite "Link for this map:" é o link que você quer e "Title/Alt for this map" é quando você passa o mouse por cima e aparece o título. Veja o exemplo:


Clique em "save" e faça isso em todos os lugares que você deseja. Quando acabar, clique em , feito isso clique lá em cima na guia "HTML Code" selecione o código até </map> e copie.


Agora vá no blogger, em design e adicione um gadget HTML/JavaScript. Cole o código na gadget e no fim do código cole a tag </div> para fecha-lo. Salve e arraste a gadget para o topo.


Está pronto seu cabelho com menu ^^,
Espero que tenham gostado do tutorial o3o

28 comentários:

  1. Bem simples,adorei ^^
    http://catchingfeelings-love.blogspot.com.br/

    ResponderExcluir
  2. Ótimo tuto, muito útil (: Me desculpe pela minha falta de comentários aqui amore D:

    ResponderExcluir
  3. Muito fácil* adorei o tutorial♥
    http://fabiolucas92.blogspot.com.br/

    ResponderExcluir
  4. Adoro esse tutorial, eu já aprendi fazer há uns anos.
    Meu blog é novo, podes passar lá qualquer hora?
    alternativeyeah.blogspot.com
    Beijo.

    ResponderExcluir
  5. Legaaaal, mas acho muito empenho ):

    Acabei de fazer um blog de HTML, com aulas de HTML e tudo o mais. Quero te convidar a dar uma passadinha lá, e se possível ser afiliada sua, pode ser? >3< Isso ajudaria muito na divulgação do meu blog. Já estou te seguindo, e te daria abraços e beijos se você fizesse o mesmo *-*
    Beijos da Kaira-san!

    breaking-doubts.blogspot.com.br

    ResponderExcluir
    Respostas
    1. *U* Já dei uma passadinha e amei muito ele é super divo *O*
      E sim aceito afiliação e já estou seguindo ^^

      Excluir
  6. Oie, ah já sabia disso mais não me lembrava que site era!
    Mais agora já sei obrigada beijos amei!" Até mais passa lá no blog:

    http://html-in-love.blogspot.com.br/

    ResponderExcluir
  7. Prontinho, á te coloquei nos afiliados, obrigada por aceitar afiliação :3
    Quer conferir? Sua sigla está como DMK.

    breaking-doubts.blogspot.com.br

    ResponderExcluir
  8. Já havia visto esse tuto. Mas no último cabeçalho que fiz assim, depois de um tempo no blog ele sumiu. Tipo assim, puf! Huahsuahs
    Beijos
    Purple Star

    ResponderExcluir
  9. Adoro esse tuto, deixa tudo tao simples e facil :)
    Perdao por nao estar acentuando as palavras pois o meu teclado esta terrivel :/
    Bjs, blog-sassygirl.blogspot.com

    ResponderExcluir
  10. Você recebeu um selinho
    http://another--time.blogspot.com.br/2013/07/selinho-recebido_19.html#more

    ResponderExcluir
  11. Selinho pra você

    http://princesa-descolada-myla.blogspot.com.br/2013/07/selinho.html

    ResponderExcluir
    Respostas
    1. Já recebi o selinho, mais vou colocar que recebi de você também porque ainda não respondi ^3^

      Excluir
  12. PELO AMOR DE DEUS MEU AJUDA ME AJUDA eu to desesperada porque tds aqui dizem que conseguem mais o meu não vai, quando chega na hora de arrastar la pra cima ele não arrasta todo ele vai só até uma parte sabe aquele cabeçalho parece q ele não exclui :( me ajuda

    ResponderExcluir
    Respostas
    1. Calma, primeiro eu preciso saber qual está sendo sua dificuldade. Não consegui entender direito.

      Excluir
  13. Oi Gasai-Chan (ou Shiory-Chan ^^),eu queria ajuda com um (olha kkk' eu to meia q doida hj entao vou dizer AQUELA BARRINHA DE ROLAGEM) ítem para meu blog.Por favorzinho com uma cerejinha emcima :3
    Arigatoo Gasai-Chan *^*

    ResponderExcluir

- Ler não mata, então leia o post antes de comentar
- Não serão aceitos comentários ofensivos.
- Não aceito tags nem selinhos.
- Aceito pedidos para seguir, se estiver seguindo o blog...
- Respondo todos os comentários.