Image Map

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:

Unknown disse...

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

Ecleticus

Anônimo disse...

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

Lygia Benevides ; disse...

amei , !

Anônimo 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

Fala, Dantas❤ disse...

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

daniela 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

Caroline Rodrigues 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

uhh disse...

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

Saula Cecília disse...

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

http://sapatosdeveludo.blogspot.com

Belieber Mineira . 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]

Anônimo 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

Linn Rodrigues disse...

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

Esther 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 disse...

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