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:
Vou tentar! Estou procurando esse tutorial faz um tempão, obrigada! ^^
the-rain-will-pass.blogspot.com
ll-theotherside.blogspot.com
Amei o tutorial, sempre quis saber o jeito que fazia mas nunca encontrava nada explicando...
Beijos ♥ Jeito Único
É 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
ótimo Tuto! Obrigada pela visita! seu blog é lindo, já estou seguindo!
beijos
http://morango-aos-pedacos-mp.blogspot.com.br/
Owwwn't obrigada, acho seu blog super divo também :) xxxx
http://oficial-sweetgirl.blogspot.com.br/
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
Awn,que legal
amei,eu já estava procurando um tuto assim mesmo
depois vou testar
beijos:*
http://lady-geh.blogspot.com/
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
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)
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
Adorei o tutorial,
conheço também outra forma de colocar o menu de páginas do blog.
http://s2perfectdesigns.blogspot.pt/
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
amei o tuto flor :)
http://s2hay.blogspot.com/
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/
Gostei do tutorial, eu amo personalizar o menu do cabeçalho!
http://pinkpimenta.blogspot.com.br/
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/
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
Ameei o tutorial ;)
Beijos ;*
www.thalitamaia.com
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/
Amei o tutorial,o resultado fica super lindo <3
Sweetkawaiioficial.blogspot.com
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/
Quw mole, ameeei o tutorial, fica lindo o menu assim >.<
Beeeeijos
#Nhaaac >>>http://the-lovers-official.blogspot.com/
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
iNJUSTISA , Eu to na escola de volta a 2 semanas ! OMG! Fica lindo :D
->http://smileretro.blogspot.com.br/
é muito legal esse tutorial, muito facil e fica um lindo resultado.
Otimo post.
Seguindo de volta aqui querida (:
♥Fabulosa!
Ótimo tutorial Anna, fica lindo e foi super bem explicadinho! ><
http://www.blogmundodamoda.com/
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
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
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/
Ótima tutorial, estava mesmo procurando ele, vou usar no meu proximo layout. =)
Beijos; @Raah_Castroo
www.vidaadegarotaa-vdg.blogspot.com.br
Adorei o tutorial.
http://meumundo-meuestilo.blogspot.com.br/
finalmente encontrei alguém que sabe explica direitinho o tutor, eu adoreii!
Materiais PhotoScape e PhotoFiltre
Gostei imenso do resultado,
seu blog é lindo,
Beijos,
http://carol-be-happy.blogspot.pt/
Tem selinho para você lá no meu blog, passa lá.
Bjs,Bruna
http://bruhh-castro.blogspot.com.br/
to adorando esse tutorial para layout vou mudar o meu e acho que vai fica bom :)
http://blogdaprigomes.blogspot.com.br/
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/
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
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/
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!
Ah, esse menu fica lindo! Eu adoro o resultado. Fica super organizado :)
Beijos,
http://momamoraes.blogspot.com
http://lilieneferreira.blogspot.com
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
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?!!
Não Consegui Achar esse Texto ".tabs-inner .section { "
O Que Faço?
Não Consegui Achar esse Texto ".tabs-inner .section { "
O Que Faço?
querida...
o link do blog com o tutorial está quebrado...
Postar um comentário