26 de jul de 2011

Menu Simples • Horizontal

Desk

Esse menu creio eu que será mais útil para vocês, pois vocês usam mais, e também é mais fácil de editar conforme seu gosto. 




Instalando:
Vá no seu CSS (Design > Editar HTML) e proucure pela tag ]]></b:skin>, cole o código acima dela e salve.

/*** MENU SIMPLES extras-placefame.tk ***/
.menusimples {
background-color:#f8f8f8; /*** cor do fundo ***/
float:left;
text-shadow: 1px 1px 0 #E4E4E4; /*** cor da sombra da letra ***/
color:#707070; /*** cor da fonte ***/
font-variant:small-caps;
width:150px; /*** largura da aba ***/
font-size: 10pt; /*** tamanho da fonte ***/
text-align: center;
margin: 3px;
line-height:25px;
margin-bottom: 1px;
-khtml-opacity: .70;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.menusimples:hover {
background-color:#FF99CC; /*** cor do fundo ***/
float:left;
color: #fff; /*** cor da fonte ***/
text-shadow: 1px 1px 0 #acacac; /*** cor da sombra da letra ***/
-khtml-opacity: .70;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
Utilizando:
Adicione o Gadget abaixo do cabeçalho (como mostra aqui), e escolha HTML/Javascript e cole o código abaixo fazendo as devidas alterações.
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
Para retirar as bordas arredondadas apague as  linhas que estão na cor azul. Qualquer dúvida ou erro entre em contato comigo, não repasse e nem retire os créditos JAMAIS. Comentem se gostarem ou utilizarem.

50 comentários:

  1. adorei me ajudou bastante *-*
    queria saber se tem como centralizar o menu? obg
    parabens por mais esse sucesso! (:

    ResponderExcluir
  2. Não está dando certo no gadget :/

    ResponderExcluir
  3. Tambem não deu certo no gadget do meu blog >.<
    Já estou seguindo.
    Amei o visual do blog, estilo themer de tumblr rsrs *-*
    1bj♥

    http://garotasederivados.blogspot.com/

    ResponderExcluir
  4. Como você centralizou o seu?
    Já tentei de todos os jeitos, não adiantou :/
    Bjks

    ResponderExcluir
  5. Por favor, como se centraliza? Faz um tuto de como colocar aquela barra fixa lá em cima, como aqui?


    Obrigada,

    ResponderExcluir
  6. o meu não deu certo como assim abaixo acima

    ResponderExcluir
  7. o meu não deu certo como assim abaixo acima

    ResponderExcluir
  8. novo post ! http://paradateen1.blogspot.com/2011/07/videos-pra-quem-gosta.html comenta ? ;D

    ResponderExcluir
  9. amei o tutorial e ja vou dar os créditos assim que eu terminar a reforma ;D

    ResponderExcluir
  10. Amei o tutorial, já estou usando, e já dei os créditos... Beijos!

    http://bubblegumburts.blogspot.com/

    ResponderExcluir
  11. o meu deu certo so que quando aperta aparece not fund me ajuda

    garora-tendencia.blogspot.com

    ResponderExcluir
  12. amei! ficou muuito lindo *-* Parabéns pelo blog, os tutoriais são perfeitos! Beijos :*
    goimagines.blogspot.com

    ResponderExcluir
  13. não esta dando para ver no blog, quando eu salvo não da para ver, agora quando esta em visualizar dá.

    ResponderExcluir
  14. eu ja fiz e refiz umas 3 vezes, ja personalizei, ja coloquei como ta, sem personalizar...
    mas nao funciona :/
    consigo mudar as cores, mas nada funciona:/

    ResponderExcluir
  15. Eu adorei o tutorial, e o place fame extras é muiito legal!

    http://meublogblogdadanii.blogspot.com/

    ResponderExcluir
  16. seu codigo me odeia -.-
    http://weheart-it-things.blogspot.com/

    agora consegui colocar,,funcionar,mudar a cor...
    mas so funciona na barra lateral,se coloco o gadget na parte abaixo do cabeçalho,nao funciona mais, oque faço?HEEEEEEEEEELP
    me add?jeudantas@hotmail.com

    beijao

    ResponderExcluir
  17. Adorei o tutorial,eu estou usando no meu blog!
    Muito lindo seu blog parabéns!

    magicmih.blogspot.com

    ResponderExcluir
  18. Amei! Estou usando! Os créditos estão na pagina Sobre... se quiser conferir.
    Beijinhos...
    P.S.:Tou dando uma reforma e fechei o blog, na verdade vou começar o blog do 0

    ResponderExcluir
  19. Coloquei no meu blog , ficou mt massa , segue meu blog?? www.toda-garota-gosta.blogspot.com

    Eu sigo o seu !
    Ps: seu blog ta mt lindo !!
    Beijooos ♥
    Jeenii

    ResponderExcluir
  20. Aih adoreii consegui fazer,ficou mt lindo!

    http://casadophotoscape.blogspot.com/

    ResponderExcluir
  21. Adorei,meu ajudou muito!!!

    http://magicmih.blogspot.com/

    ResponderExcluir
  22. to usando!
    http://diario-piink.blogspot.com/

    ResponderExcluir
  23. Adoorei *-* , é uma pena que não funcionou no meu :/ .

    Beijinhos :*
    http://leticiac04.blogspot.com/

    ResponderExcluir
  24. Eu coloco tudo direitinho no Html , depois vou para o gadget e no Html/Java Script , eu coloco aquele código lá , edito e salvo , só que não aparece as imagens :/
    Não sei nem o que fazer :/
    Me ajuda ?

    Beijinhos :*
    http://leticiac04.blogspot.com/

    ResponderExcluir
  25. os links do meu ficaram escuros porq?

    ResponderExcluir
  26. eu consegui
    tentei no meu blog e testes
    maaaas a fonte fica amarela :/
    eu editei, coloquei o código e muda as cores do fundo e talz, tudo normal, mas da fonte não muda, fica amarela :/
    Nem vo usar.

    ResponderExcluir
  27. eu não consegui, ficou menu vertical !! me ajuda!

    ResponderExcluir
  28. consegui!! finalmente!!
    sweetscupcakeoficial.blogspot.com

    ResponderExcluir
  29. Não deu certo! Fica uma imagem pequena e não como fica o seu! Ajuda??

    www.meninacute-s2.blogspot.com

    ResponderExcluir
  30. Agora eu consegui,mas como eu coloco pra ficar tipo o seu,sem sombra nos títulos? Beijos Estou utilizando (:

    ResponderExcluir
  31. Eu consegui fofa ' mais ... como tira aquela letra Maiuscula ? tipo : CONTATOS

    ResponderExcluir
  32. To usando u.u
    Amei!
    http://blog-da-byaa.blogspot.com

    ResponderExcluir
  33. Adorei!
    Tô usando, e é claro que já creditei, fofa! ;)

    http://thingsofagirl.blogspot.com/

    ResponderExcluir
  34. Como adiciono postagem em cada parte do Menu?

    ResponderExcluir
  35. Adorei, muito útil! Só poderia me dizer como eu tiro esse fundo que fica rosa no meu blog? Não sei explicar muito bem.. É que o código deu certo, funciona e tal, mas fica atrás do menu um fundo rosa.. Se alguém puder me ajudar eu agradeço.
    Grata desde já, beijinhos.

    http://twindrills.blogspot.com.br/

    ResponderExcluir
  36. Depois de muito tempo mexendo no layout consegui ajeitar. Obrigada pelo ótimo tutorial, já coloquei os créditos também.

    Beijinhos!

    twindrills.blogspot.com

    ResponderExcluir
  37. Como eu posso subir ele? Posicionar no lugar que eu quero?

    ResponderExcluir
  38. Oi! Usei alguns tutoriais aqui do place fame, e adoro esses blogs como o seu que dão várias dicas de html me ajudam muito, Visita quando tiver tempo http://siteblogit.blogspot.com.br/!

    ResponderExcluir
  39. Fiz tudo a risca mas não pegou. E agora? Pode me ajudar? :(

    ResponderExcluir
  40. deu certinho :) mt obg pela ajuda !!!

    ResponderExcluir

Comentários como "o blog tá lindo, bjo" "to seguindo, segue de volta??" "ai que lindo o blog, retribui a visita/comentário?" serão ignorados. Por favor, leia a FAQ e as outras páginas internas antes de perguntar qualquer coisa.