Menu Horizontal abaixo do cabeçalho

|
388537_313324005355470_197872870233918_1109581_1414418260_n_large
Acho que esse tutorial vai ser muito útil pra vocês, e é bem simples, porém, grande. Bom, aprendi a fazer este menu através do Extras Place Fame e do Coisinhas Mil, só que fiz várias alterações então os créditos vão para nós três.  Veja um exemplo de como ficará seu Menu:


1- Vá até Design, Editar HTML, aperte CTRL+F e procure por:
]]></b:skin>
E antes dele, cole o código abaixo fazendo alterações à seu gosto:
/*** menu tutoriaisattitudeincluded.blogspot.com ***/
.menuattitude {
background-color: #cccccc; /*** cor do fundo ***/
float:left;
font-family:Courier;
color:#333333; /*** cor da fonte ***/
font-size: 10pt; /*** tamanho da fonte ***/
width:158px; /*** largura ***/
text-align: center; /*** posicionamento ***/
margin: 3px;
line-height:25px;
margin-bottom: 1px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.menuattitude:hover {
background-color: #666666; /*** cor do fundo ***/
font-family: Courier; /*** Fonte ***/
color: #b779ff; /*** cor da fonte ***/
float:left; /*** posição do texto ***/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
  E se você quiser que seu menu fique com as bordas arredondadas MANTENHA o código em azul, e se você quiser que ele fique do jeito que o exemplo mostra, RETIRE o que está em azul.
2- Vá até Design, Elementos de Página, Adicione um Gadget e escolha HTML/javaScript e cole o código abaixo, fazendo as alterações:

<div class="menuattitude"><a href="LINK_DA_SUA_PÁGINA">TÍTULO_DA_PÁGINA</a></div>
<div class="menuattitude"><a href="LINK_DA_SUA_PÁGINA">TÍTULO_DA_PÁGINA</a></div>
<div class="menuattitude"><a href="LINK_DA_SUA_PÁGINA">TÍTULO_DA_PÁGINA</a></div>
<div class="menuattitude"><a href="LINK_DA_SUA_PÁGINA">TÍTULO_DA_PÁGINA</a></div>
<div class="menuattitude"><a href="LINK_DA_SUA_PÁGINA">TÍTULO_DA_PÁGINA</a></div>

3- Arraste seu Gadget para cima das suas postagens, exemplo:


Prontinho! Visualize, e se tiver dado tudo certo salve! Alguma dúvida? Fala aí!
Caso não dê certo, não sabemos como resolver, pois deu certo com a gente em todos os testes ): Em breve mais menus! Beijão.

19 comentários:

Jeff Bolton disse...

Hum, mto bom o tutorial gostei! SUCESSO! Breve to abrindo o Blog de Tutoriais, Layout Free e Dicas. AGUARDE.

Ecleticus

Isadora disse...

Muito legal, fica lindo *-*
Beijos
http://sogarotasentendem.com/

lygia benevides :]] disse...

amei , !

#Biiaanca.BN disse...

Nunca dá certo no meu esses menus que tem que editar na tag "]]>"...

... disse...

Não consegui o 3 passo! Me ajuda!

Ana Clah*_* disse...

Obrigadaaaaaa,deu certo é a primeira vez que isso acontece, daá uma passada no meu blog para ver:

http://garotassuecas-blog.blogspot.com

Jeu Dantas disse...

ta dando errado!
NAO APARECE O FUNDO E NDmasls o caps :/

@danysentinella disse...

Olá flor, tudo bom?
Flor, naum consegui fazer o menu ficar igual ao exemplo que você colocou na postagem... Ele fica sem o plano de fundo e fica meio deformado.
Poderia me ajudar?
danielasentinella.tk

Carol disse...

No meu não funciona, ficam todos na vertical, sem plano de fundo.. poderia me ajudar?

Beijos, Carol - The Fashion Wonderland.
www.conselhosdostardoll.blogspot.com

D@niel disse...

carol o meu tambem ficou assim todos no vertical já conseguiu

saula {amora} cecilia disse...

Estou usando, se quiserem visitar o blog, eu adoraria! :D

http://sapatosdeveludo.blogspot.com

Graciele Bachião disse...

Vou usar, no começo da minha nova IB ' Se quiserem visitar é: www.sonhosbelieber.blogspot.com

Luana disse...

Eu amei, mas o meu ficou um de baixo do outro e não sei como arrumar. Me ajuda? http://watermelon-bubble-gum.blogspot.com.br/ [em construção ahaha]

Kássia Barbosa disse...

fiz como vc colocou soh q não fica igual, será que tem como me ajudarem?
http://maywaltz.blogspot.com.br/

Kelly Costa disse...

Amei *=*

uprisingteen.blogspot.com.br

Linne Rodrigues disse...

Estou usando!!Amei demais...
lifeonalin.blogspot.com.br

Nosso mundo muito louco disse...

Aaaaaa fucionou ..
Amei amei ameii ..
Seu Blog é liindo !!
O seu foi o único que deu certo tentei varios varios !!
Obrigadiinha pela ajuda !!!
Bejos ..
Visite o meu lá pra vocc ver o resultadoo !!

http://ourcrazyworldmuto.blogspot.com

TMJ mais disse...

Adorei, só teve um pequeno probleminha! quando eu mudei o estilo, mudei o design do blog, os arquivos javascript estavam diferentes e sem os efeitos que estavam no modelo anterior. Será que tem um jeitinho de mudar isso sem ter que recolocar todos os códigos? espero sua resposta!

Meu Espelho Fosco - Adelina Dantas disse...

Foi o único que consegui fazer no meu Blog!!!
Muito obrigada!
bjoss
http://www.meuespelhofosco.com