20 agosto 2011

Como colocar menu no cabeçalho

||
Muita gente me perguntou como por o menu que eu uso aqui no fs no cabeçalho , bom , vocês podem até saber uma parte , mais para dar certo no cabeçalho é preciso mais do que simplesmente mapear uma imagem .Querem aprender ?
Tumblr_ln3xmx0g721qkjqr0o1_500_large_large

1) Crie seu cabeçalho (de preferência no photofiltre stúdio) , e faça alguma coisa que destaque as partes que quer linkar , clique aqui e vejo o cabeçalho do Fashion scream .

2)Entre no site : image maps e faça o upload da sua imagem ou coloque por url e clique em 'start mapping your image' , vai aparecer uma pagina amarela e lá em baixo uma espécie de cronômetro , depois que chegar a 0 aparecera o link : 'continue to next step'

4) sua imagem irá aparecer,clique em 'retangle' e selecione SOMENTE a parte que você quer um link -uma a uma) depois de selecionada a parte na qual você quer um dos links irá aparecer uma paginazinha amarela em 'links for this map' você coloca o link e clique em salvar , para colocar o link em outros lugares repita esse processo

5)Depois de tudo pronto , em uma barra lateral no lado direito tem algumas seleções , desmarque essas (clique para ver a imagem)

6)clique em get your code , e depois em HTML code lá em cima (clique aqui para ver a imagem)
Tumblr_llvwgs9yuu1qezwmho1_500_large

Depois de copiar o código , vamos editar isso no blogger
7)vá em design >elementos da pagina > e no gadget do seu cabeçalho e o apague
8)depois va em editar html >expandir modelos de widgets > procure por : /* Header


9) Depois de cada 'parágrafo' antes de fechar a chave '{'  você deverá colocar o seguinte código : display: none;
Deverá ficar assim :



/* Header
----------------------------------------------- */
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 10px;
  padding-right: 10px;
display: none;
}


.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
display: none;
}


.Header h1 a {
  color: $(header.text.color);
display: none;
}


.Header .description {
  font-size: 130%;
display: none;
}


Isso fará com que seu cabeçalho desaparecerá (o espaço a o título)
10) Vá em design >elementos da página > HTML/javascript e cole aquele código da sua imagem mapeada , coloque onde o gadget do seu cabeçalho ficava e pronto ! Lembrando que esse tutorial não serve somente para os links do blogger,mais sim para qualquer link da internet
1301260184814_f_large

Galera , espero que estejam gostando dos posts e principalmente dos tutoriais , queria pedir a vocês que não usem a c-box como chat , e agradecer a todos que votam na enquete >< além disso queria avisar que eu não faço mais parcerias ,somente afiliações , abrirei mais vagas para afiliados no próximo mês 

39 comentários:

  1. eu ameei o tutorial, seu blog tem tutos perfeitos, já estou seguindo flor !


    www.garotascomplicada.com

    ResponderExcluir
  2. Estou criando uma comunidade no orkut, participa!
    Queria saber, como vcê coloca fundo colorido nas Categorias, ensina (;
    Beijão!

    http://closetteen-ct.blogspot.com

    ResponderExcluir
  3. Eu já havia visto no blog RG, mas não sabia como fazia. É muito legal esta tecnica ne?

    Flor, a vaga de afiliados ainda está aberta? :)

    Besos ,

    http://paraisodemenina.blogspot.com

    ResponderExcluir
  4. u__u' Amr quando ira fazer seu post?

    Preciso abrir logo o quadro "unhas vs make"...
    Beijos.
    http://diamontlilac-news.blogspot.com/

    ResponderExcluir
  5. Ta tendo muita procura por esse tutorial, né? Uma amiga minha mesmo esses dias me perguntou dele.
    Acho que fica legal o menu no cabeçalho, e acho que essa moda vai pegar pelos blogs. HAHAH
    Beijos!

    http://a-crossthestreet.blogspot.com/

    ResponderExcluir
  6. é fácil mesmo, muito legal hihih

    http://dezesseisamargos.blogspot.com/

    ResponderExcluir
  7. Olá , o lady.smart mudou , visita e diga o que achou ?

    Bjs.
    http://blogsmartgirl.blogspot.com/

    ResponderExcluir
  8. Ahh beem legal. Eu costumava fazer esse menu como mapeamento de imagem. Não sabia esse outro jeito. Gostie do tutorial.
    Beeijo, Luh.

    ResponderExcluir
  9. Ah, isso tem no menina nerd, se chama mapeamento de imagem!

    ResponderExcluir
  10. É super legal a técnica ^^
    Só que quando o site entra em manutenção fica tudo desfocado e borrado :/
    Aqui tá lindo!!

    blog-meninama.blogspot.com

    ResponderExcluir
  11. oi flor, aqui mudei o layout do blog, e como o fashion screm me ajudou pakas dei créditos. Bjinhos
    HTTP://TDiaryOfTeens.blogspot.com

    ResponderExcluir
  12. nem vem luh eu num tenho nem criatividade pra nada, como é que tu ta com saudade dos meus posts? :S , amanha eu vou postar um tutorial rs :D
    beijos ;*
    ah e pro próximo designer eu vou faser esse menu rs

    http://blog-garotadescolada.blogspot.com/

    ResponderExcluir
  13. Rachava mais o spencer rsrsrs ? nossa!
    nossa q legal o post, tentava fazer isso mais nao conseguia vou tentar valeu (:

    thegirlandboy.blospot.com

    ResponderExcluir
  14. Oii, queria te pedir desculpas se eu falei alguma coisa que você não gostou. Ah, sei que você gosta de saber das coisas e se não tiver testado ainda fiz um tutorial de como fazer o menu lá do blog ok? Beijos

    http://trasshygirl.blogspot.com/2011/08/menu-ao-lado-do-post.html

    ResponderExcluir
  15. adorei a dica vc vai colocar mais gente nos afilidos?
    porque queria participar dos afiliados!
    islandsgirls-manahatori.blogspot.com
    bjos

    ResponderExcluir
  16. Cada vez que venho ao teu blog me surpreendo com o teu design, puts só melhora! incrivel, parabéns
    http://booblesrepublic.blogspot.com

    ResponderExcluir
  17. Noss, tão nova e já é casada? o_o Obg por seguir, já estou seguindo de volta? Bem legal o tutorial, eu uso o ImageReady pra fazer o mapeamento do meu menu :D
    http://bonecanacaiixa.blogspot.com/

    ResponderExcluir
  18. que tudo, amei
    trendluxo.blogspot.com

    ResponderExcluir
  19. Este comentário foi removido pelo autor.

    ResponderExcluir
  20. AAhhh, consegui" *gritinho de vitória*.
    Muitissimo obrigada flor, seu blog é The Best.
    Uhuu!

    meujeitodeser-oficial.blogspot.com

    ResponderExcluir
  21. nem consegui ficou um espaço enorme entre o cabeçalho e o corpo do layout :S
    e eu coloquei as coisas que tu me pedio :S

    ResponderExcluir
  22. Oiie! Luh sempre evoluindo cada vez mais! Amei! Bjokasss

    ResponderExcluir
  23. Obrigadaaaaaaaaa, ajudo muitooo

    fcmileybrasil.blogspot.com

    ResponderExcluir
  24. PARABÉNS POST SIMPLESMENTE ESPETACULAR

    ResponderExcluir
  25. nossa eu adorei, tava procurando já faz tempo mas nenhum explica desse jeito, ficou mais facil agora *--*, já to te seguindo e me segue tambem, ainda sou nova nesse ramo de blogueira rs

    http://certaascoisas.blogspot.com/

    ResponderExcluir
  26. Este comentário foi removido pelo autor.

    ResponderExcluir
  27. esse post é muito bommmmmmmmmm mesmoooooooooooo.
    parabenssssssssssss

    um abraço

    @ns_rafael
    literaturaearte0809.blogspot.com

    ResponderExcluir
  28. Amei , vou tentar fazer para que o meu blog renove . amei , o seu blog você está de parabéns .

    grazielycrsitina.blogspot.com

    ResponderExcluir
  29. Obrigadão! Esse tutorial me ajuda tantas e quantas vezes, *-*

    ResponderExcluir
  30. Amei o tutorial amor. Adoro seu blog.

    http://acilesullan.blogspot.com.br/

    ResponderExcluir
  31. Ola, me desculpe atrapalhar em algo mas é que eu tenho uma pergunta sobre o PhotoFiltre.
    Eu fiz um cabeçalho teste assim que o instalei para ver se realmente funcionava, agora, quando tento fazer esse menu, a segunda imagem não quer abrir!! Ja tentei salva-la na primeira pasta mas não vai =( não sei se é desse site ou o meu programa. Se vocês puder me ajudar eu agradeço, obrigado e perdão pelo incomodo

    ResponderExcluir
  32. Oiiie
    Poor favoor me ajuda
    Eu fiz tudo direitinho
    Mas ali quando eu procuro o HTML do blog, é completamente diferente do seu.
    Oqueeu
    faço?
    Não estou conseguindo..
    Por favoor me ajudem
    meul e-mail:
    picseedicoes@hotmail.com
    Blog:
    eftandedc.blogspot.com

    ResponderExcluir
  33. Muito obrigada!
    Você praticamente salvou a minha vida!!
    Parabéns pelo blog incrivel!!

    ResponderExcluir
  34. sei que cheguei meio atrasada aqui, rs.. mas eu não encontro o "elementos da pagina" no blogger.. me ajudar poooooooor favor!!

    ResponderExcluir
  35. HAHA' muito fofo seu blog, já estou seguindo!

    Beijos!

    http://www.teimosasim.blogspot.com.br/

    ResponderExcluir
  36. No meu não dá certo :c Fica um fundo com listras azuis. E no HTML não encontro a parte de header :/
    Mesmo assim, adorei o tutorial, parabéns!

    ResponderExcluir

- Eu respondo todos os comentários do blog, por mais que demore um pouquinho sempre respondo.
- Se você me fez alguma pergunta por comentário eu respondo no próprio post, então é só voltar no post onde perguntou que sua resposta estará lá.
- Adoro receber e-mail de leitoras, com dúvidas, elogios, sugestões e até algum desabafo como muitas fazem, acreditem não é nenhum incômodo <3
- Se quer criticar, critique de modo construtivo.
- Eu adoro quando vocês participam, afinal o blog é feito para vocês <3

Related Posts Plugin for WordPress, Blogger...