1 de ago. de 2012

Menu dentro do cabeçalho


Oi gente, tudo bem? Espero que sim. Hoje foi o meu primeiro dia de aula. Foi legal reencontrar todo mundo *-* Mas vou sentir saudades das férias, elas foram legais também. Enfim, o post de hoje vai ser um tutorial, ensinando como fazer um menu como esse, que estou usando no layout atual do blog. Querem aprender? Então continue lendo.


O menu é feito com o gadget "Páginas", que já vem no modelo Viagem do Blogger. Obs: foi testado apenas nesse template, certo? Pra quem ainda não sabe de que menu eu estou falando, tem um print:


É só clicar pra ver em tamanho maior. A primeira coisa a se fazer, é remover o gadget do cabeçalho e o colocar no blog pelo HTML. Só desse jeito que dá certo. Clique nesse link (www) e você vai ser redirecionado para outro blog que tem o tutorial de como colocar o cabeçalho desse outro jeito. Foi lá que eu aprendi. Mais uma coisa: quando for fazer o seu cabeçalho, deixe um espaço em baixo (de 30px a 50px) para que o menu caiba.

O próximo passo é adicionar o gadget de páginas. Coloque ele no lugar onde ficaria o cabeçalho. Agora chegou a hora de personalizar! Vá em "Designer do Modelo" e "Avançado", é lá que vamos mexer com as cores. Siga o print:


No HTML, procure por .tabs-inner .section { e substitua a parte que está lá, por essa aqui:
.tabs-inner .section {
  margin: -30px; /* Tamanho do espaço onde vai o menu, aquela barra que fica em baixo */
}
.tabs-inner .widget ul {
  padding: 0;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
margin-left: 290px; /* Serve para alinhar o menu, aumente ou diminua */
}
.tabs-inner .widget li {
  border: none;
}
.tabs-inner .widget li a {
  display: inline-block;
  padding: 20px; /* Esse é o espaço entre cada título do menu */
  color: $(tabs.text.color);
  font: $(tabs.font);
}
Já tá tudo explicado no próprio código. E é isso, é só você alterar e pronto. Se estiver alguma coisa confusa ou ruim de entender, me avisem. Beijos!

45 comentários:

Laura disse...

Vou tentar! Estou procurando esse tutorial faz um tempão, obrigada! ^^

the-rain-will-pass.blogspot.com
ll-theotherside.blogspot.com

Larissa Fonseca disse...

Amei o tutorial, sempre quis saber o jeito que fazia mas nunca encontrava nada explicando...

Beijos ♥ Jeito Único

Paula disse...

É só isso mesmo? Nossa, que fácil Anna! *u* Vou testar no meu próximo layout! rs Adorei o post, muito útil! Obrigada por postar :D


Beijão, Paula
sweetmakeups2.blogspot.com

Amoraah disse...

ótimo Tuto! Obrigada pela visita! seu blog é lindo, já estou seguindo!
beijos
http://morango-aos-pedacos-mp.blogspot.com.br/

Bella disse...

Owwwn't obrigada, acho seu blog super divo também :) xxxx

http://oficial-sweetgirl.blogspot.com.br/

Ingrid Sakamoto dos Santos disse...

Muito bom o tutorial Anna!
Gosteii! Muito bom e útil também!
Anna arrasou no post, sua linda ♥

Obrigada pela sua visita, ela é muito importante pra mim viu? Volte sempre amore♥
Blog
Sorteio-Anel Laço

Gessica Amaral disse...

Awn,que legal
amei,eu já estava procurando um tuto assim mesmo
depois vou testar
beijos:*
http://lady-geh.blogspot.com/

Jujubah disse...

Menina eu tô precisando de tempo pra colocar o MENU em meu blog.. preciso dar uma repaginada, mudar o layout tb, tudo isso requer tempo...
+ gostei do tuto! Pode ter certeza q já está na minha listinha!
Super beijo flor!
http://www.universodajujubah.blogspot.com.br

Carol Al. disse...

Bom,já sabia como fazia o menu no cabeçalho,mas de outro jeito.O seu foi bem melhor e bem explicadinho !

Parabéns,seu blog é perfeito,conteúdo e design!Tudinho mesmo !Seguindo já ^^

Kisses ;*
Let's Dream||Sweet Carolyne(my new blog)

Marina Ribacki disse...

Bó, não sabia que era fácil assim. Meu menu horizontal é bem diferente e tá do jeitinho que eu gosto, mas quando eu quiser mudar já sei onde recorrer, haha.

Beijo :D

Unknown disse...

Adorei o tutorial,
conheço também outra forma de colocar o menu de páginas do blog.
http://s2perfectdesigns.blogspot.pt/

Marina Listing disse...

Que tuto fácil, pensei que fosse mais difícil, por isso nunca arrisquei por isso pelo GM! Bem útil, e parabéns teu blog tá cada vez melhor! <3
xoxo
garotasmustaches.tk

Unknown disse...

amei o tuto flor :)
http://s2hay.blogspot.com/

Stephanie Vieira disse...

Puuuxa esse é bem mais simples do que aqueles que tem que fazer o cabeçalho já com o espaço da página, amei, favoritei e vou usar em breve!
#http://garotadoolharsincero.blogspot.com/

dribs disse...

Gostei do tutorial, eu amo personalizar o menu do cabeçalho!
http://pinkpimenta.blogspot.com.br/

Anna Carollyne Oliveira disse...

Já usei um desses no layout antigo do World Cutest. Sempre gostei dele por que dá pra por no cabeçalho e facilita bastante *O*

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

Barbara disse...

esse tuto é super prático né?
o efeito final também é super massa..
então.. eu TAVA sumida, agora eu voltei (: tava viajando...rs

http://blogportalteen.blogspot.com

Thalita Maia disse...

Ameei o tutorial ;)

Beijos ;*
www.thalitamaia.com

Caio Barros disse...

Amo seu blog e amo os tutoriais....
Se puder, pode dar uma passadinha no meu blog? Estamos começando agora e se puder também seguir obg, estou seguindo aqui!!!
Bjs

http://jansyk3s.blogspot.com.br/

Anônimo disse...

Amei o tutorial,o resultado fica super lindo <3
Sweetkawaiioficial.blogspot.com

Larissa Canziani disse...

adorei a dica


Aguardo a sua visita, e clique em sorteios, participe ( pulseira corujinha, esmalte, e uma presilha, veja mais no blog!!

http://larissacanziani.blogspot.com.br/

Lary Yah disse...

Quw mole, ameeei o tutorial, fica lindo o menu assim >.<

Beeeeijos
#Nhaaac >>>http://the-lovers-official.blogspot.com/

Anônimo disse...

Flor, eu tenho facebook sim *-* Procura lá: Paloma Mendes Morais. Se você tiver msn, me passa também.
Ah, e o nome da fonte é Brannboll fet.
http://momamoraes.blogspot.com

Unknown disse...

iNJUSTISA , Eu to na escola de volta a 2 semanas ! OMG! Fica lindo :D
->http://smileretro.blogspot.com.br/

Anônimo disse...

é muito legal esse tutorial, muito facil e fica um lindo resultado.
Otimo post.
Seguindo de volta aqui querida (:
♥Fabulosa!

Sabrina Machado disse...

Ótimo tutorial Anna, fica lindo e foi super bem explicadinho! ><

http://www.blogmundodamoda.com/

Sophia ♡ disse...

Esse tutu é legal e muito útil,mas sou muito preguiçosa e sei que não vou fazer,mas tem gente que curte mexer nessas coisas de blog,haha!
#Seguindo aqui ♥-♥
Beijos^^~~
www.cotidianodeumabarbie.blogspot.com

Luly disse...

Nossa, não sabia que era tão fácil assim! Uma boa opção para próximos layouts do blog. Ah, e tomara que seu primeiro dia de aula foi bom :3 Um beijo.
the-zombie-attck.blogspot.com

Anônimo disse...

Eu aqui louca pra trazer esse tutorial, achando que era dificil... Mais é bem simples! Você explicou super bem Anna!

O blog ta de cara nova, passa lá pra conferir!
http://rosaschiclete.blogspot.com.br/

Vida de Garota disse...

Ótima tutorial, estava mesmo procurando ele, vou usar no meu proximo layout. =)

Beijos; @Raah_Castroo
www.vidaadegarotaa-vdg.blogspot.com.br

Jéssica Melo disse...

Adorei o tutorial.

http://meumundo-meuestilo.blogspot.com.br/

Gabriela Karolina disse...

finalmente encontrei alguém que sabe explica direitinho o tutor, eu adoreii!
Materiais PhotoScape e PhotoFiltre

Anônimo disse...

Gostei imenso do resultado,
seu blog é lindo,
Beijos,
http://carol-be-happy.blogspot.pt/

Bruna Castro disse...

Tem selinho para você lá no meu blog, passa lá.

Bjs,Bruna

http://bruhh-castro.blogspot.com.br/

Pri Gomes disse...

to adorando esse tutorial para layout vou mudar o meu e acho que vai fica bom :)

http://blogdaprigomes.blogspot.com.br/

thalita. disse...

Eu uso um tutorial que dá o mesmo efeito, que é só colocar no HTML que o menu já aparece, daí é só alterar uns números para ajustar a posição. Mas que legal, adorei desse jeito que você faz, é bem prático também! E fica muito lindo, mais tarde vou tentar fazer desse jeito *-*

Tá arrasando em Anna! Beijos <3
http://quinzedilemas.blogspot.com.br/

Fernanda Zucolotto disse...

Olá! Acho lindo esse tutorial, o resultado fica maravilhoso. Já usei em muitos designs lá do blog e ficou super diferente. SUPER útil!

Beijos!
http://meianoiteequinze.tk | @meianoitequinze

Letícia Faria disse...

Amei muito o tutorial, muito útil!!
Amr, aceita afiliação? Gostei bastante do seu blog, seria uma honra se você aceitasse. Espero que sim (:

Beijos!!
http://garotavertigem.blogspot.com.br/

Beatriz Andrade disse...

Obrigada flor, por postar o tutorial que te pedi. Vou usá-lo no próximo design lá do blog!

Beijos,
Paraíso de Menina | Sorteio de um par de brincos + colar. Participe!

Anônimo disse...

Ah, esse menu fica lindo! Eu adoro o resultado. Fica super organizado :)
Beijos,
http://momamoraes.blogspot.com
http://lilieneferreira.blogspot.com

Carol disse...

Adorei o tutorial, valeu mesmo, ajuda muito essas coisas.

Muito bom o seu blog,
Já tô te seguindo.

brogandome.blogspot.com
facebook.com/brogandome

twitter: @carolposeidon
Carol

Madu disse...

Me ajuuda ! Urgentemente rsrsrs
eu arrumei l'a tudo, mas tem um problema: o menu est'a ficando em baixo da imagem do cabecalho, entende, ele n~ao ta ficando em cima :S alguem Me ajudaaa?!!

Anônimo disse...

Não Consegui Achar esse Texto ".tabs-inner .section { "
O Que Faço?

Anônimo disse...

Não Consegui Achar esse Texto ".tabs-inner .section { "
O Que Faço?

Izayoki disse...

querida...
o link do blog com o tutorial está quebrado...