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.

49 comentários:

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

    ResponderExcluir
  2. 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
  3. Como você centralizou o seu?
    Já tentei de todos os jeitos, não adiantou :/
    Bjks

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


    Obrigada,

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

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

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

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

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

    http://bubblegumburts.blogspot.com/

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

    garora-tendencia.blogspot.com

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

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

    ResponderExcluir
  13. 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
  14. Eu adorei o tutorial, e o place fame extras é muiito legal!

    http://meublogblogdadanii.blogspot.com/

    ResponderExcluir
  15. 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
  16. Adorei o tutorial,eu estou usando no meu blog!
    Muito lindo seu blog parabéns!

    magicmih.blogspot.com

    ResponderExcluir
  17. 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
  18. 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
  19. Aih adoreii consegui fazer,ficou mt lindo!

    http://casadophotoscape.blogspot.com/

    ResponderExcluir
  20. Adorei,meu ajudou muito!!!

    http://magicmih.blogspot.com/

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

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

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

    ResponderExcluir
  23. 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
  24. os links do meu ficaram escuros porq?

    ResponderExcluir
  25. 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
  26. eu não consegui, ficou menu vertical !! me ajuda!

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

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

    www.meninacute-s2.blogspot.com

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

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

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

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

    http://thingsofagirl.blogspot.com/

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

    ResponderExcluir
  34. 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
  35. 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
  36. Como eu posso subir ele? Posicionar no lugar que eu quero?

    ResponderExcluir
  37. 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
  38. Fiz tudo a risca mas não pegou. E agora? Pode me ajudar? :(

    ResponderExcluir
  39. 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.