Como por menu vertical no seu blog

|

Muuuita gente já me pediu, então finalmente vou mostrar como eu coloquei esses menus da sidebar:
 
O código desse menu é do site (mega legal) Coisinhas Mil. Só que quase ninguém entendeu como põe pela explicação que está no site, então vou explicar á minha maneira, que (modéstia a parte) é bem mais fácil.
Vamos lá!


th_seta Abra o blogger, clique em design.
th_seta Clique para adicionar um gadget na sidebar.
th_seta Escolha o gadget de HTML/Javascript.
th_seta Cole no gadget o código abaixo (selecione TODO o código):

<STYLE type="text/css">

#menuzinho {

display: block;

width: 100%;

height: 19px; /* ALTURA DO MENU /*

width:178px /* LARGURA DO MENU /*

vertical-align: middle;

font-family: Verdana, Arial, sans-serif;

font-size: 10px; /* TAMANHO DA FONTE */

font-weight: bold;

color: #FFB3D7; /* COR DA FONTE */

text-indent: 5px;

line-height: 17px;

margin-bottom: 3px;

margin-left: -1px;

background-color:#FFECF3; /* COR DO FUNDO */

}

#menuzinho:hover {

display: block;

color: #FF80C0; /* COR DA LETRA QUANDO PASSA O MOUSE */

background-color: #FFDFEE; /* COR DO FUNDO QUANDO PASSA O MOUSE */

}

</style>

<a id="menuzinho" href="URLDOLINK">NOME DO LINK DO SEU MENU</a>

Como podem ver, o códgio é auto-explicativo. Fiz algumas mudanças pra ficar mais fácil de personalizar.
th_seta Altere o código das cores como quiser. Para achar o código das cores, você pode ir ao designer de modelo do blogger, e escolher a cor:
image
Ou então veja essa tabela e essa caixinha seletora de cores.


th_seta Sempre que quiser por mais um link no menu, copie essa parte do código(que tá lá no final):
<a id="menuzinho" href="URLDOLINK">NOME DO LINK DO SEU MENU</a>

E cole logo abaixo. Depois é só substituir o link e o nome do link.
Depois de alterar tudo é só salvar! Espero ter ajudado, Kissus!

sing-liah

33 comentários

  1. Muito legal, acho que vou tentar fazer.

    xox
    buracosnojeans.blogspot.com

    ResponderExcluir
  2. Adorei o tutorial!
    Beijos,
    Retribui?

    http://blogbombaastic.blogspot.com

    ResponderExcluir
  3. Tô fazendo
    girlteen-s2.blogspot.com

    ResponderExcluir
  4. tenho umas duvidas

    qual é a altura do seu (é para que eu coloque no meu) e largura do seu?

    e tambem na onde esta escrito "menuzinho" é para fazer oque deixa assim como ta?!

    ResponderExcluir
  5. Amei o post!!! super bom o blog!! #seguidora !! bjss!!!

    ResponderExcluir
  6. Flor, não consegui!
    Fica só o link, e não o quadrado :@

    econnecteen@gmail.com

    ResponderExcluir
  7. eu nao consegui fazer :X
    paradateen1@hotmail.com
    me adc no msn e me explica melhor? *-*
    bjs

    ResponderExcluir
  8. perguntinha flor...que link eu ponho?
    não entendi isso!
    responde aqui:
    www.mixallof.blogspot.com

    ResponderExcluir
  9. Carolina-blogueirasteen1 de junho de 2011 20:27

    eu queria mtmt saber como fazia, e quando descobri seu blog e vi o tutorial, dei um grito!! Mais faz um tutorial (se você souber né, claro!) mostrando como se faz isso com imagem? bjks linda!!

    www.blogueirasteen.blogspot.com

    ResponderExcluir
  10. NOSSA EU QUERIA MUITO FABER DISTO MSM PARA COLOCAR NO MEU BLOG, PORQ ELE ESTA DE REFORMA AMOR..
    DÁ UMA AJUDINHA?
    EU QUERIA SABER COMO VOCÊ COLOCOU O FUNDO NO CBOX (CHAT) AQUELE FUNDO COM BOLINHAS?
    RESPONDE NO MEU BLOG:
    http://imagegirlpfs.blogspot.com/

    ResponderExcluir
  11. Oii ! Sou meio que nova nesse negócio de blooog e etcc. Então não sei onde fica o sidebar. Pode me explicar ? E na hora de colar o código no HTML, onde que cola ? No começo, no meio ou no final ? Sempre quis saber isso. kkk ! Obrigadinha pela atenção*~~~* Beijoos 

    ResponderExcluir
  12. Muiito lindo Liah...Obrigadaa!!
    Bjs

    ResponderExcluir
  13. Obrigada.
    Kiss de chocolate

    ResponderExcluir
  14. Não deu certo mais obrigada.

    ResponderExcluir
  15. Liaah ! Me ajuda urgeente haha ! Como faz para editar a pagina ? A pagina do link selecionado? #duvida extrema HELPE-ME PLEASEE KK
    Beijos e obg

    ResponderExcluir
  16. Me ajudou demais, e o código tá muito bem feito. Explicou tudo, MUITO BOM MESMO! :) 

    Um beijo!
    http://sl-senhoritaliberdade.blogspot.com

    ResponderExcluir
  17. olha meninas td bem?
    vlw meninas precisava mto para o meu trabalho da faculdade 
     um bjão para vcs meninas 
    e vlw 
    me adicionem no meu msn jhbm@hotmail.com

    ResponderExcluir
  18. Oii alguem pode me ajudar? o link selecionado (tipo os link do menu) como eu faço para editar eles? todos falam que não existe!!

    ResponderExcluir
  19. Nossa muito bom e simples de fazer adorei!! :D

    ResponderExcluir
  20. Brigada por ter acessado meu site.
    Adoro muuuito o seu viu?!

    Uso todos os seus tutoriais!

    Bjks

    ResponderExcluir
  21. Adorei o post!
    se tiver tempo dá uma olhadinha no meu blog?
    meu-mundinho-perfeito.blogspot.com
    valeuu!

    ResponderExcluir
  22. A Liah sempre salvando minha vida! kkk adorei! www.purplstar.blogspot.com

    ResponderExcluir
  23. Meu, você é muito incrível ;-;
    Smpre tive vontade de abrir um blog e agora posso graças aos seus tutos.
    Parabens *-*

    ResponderExcluir
  24. Este comentário foi removido pelo autor.

    ResponderExcluir
  25. Consigui,colocar mas nao consigo adicionar conteúdo no meu com faço me ajude pfv?

    ResponderExcluir
  26. Muito simples estou usando,adoro seus tutos beijos Sir Pizza

    ResponderExcluir
  27. Você pode me ajudar? Fiz meu blog há uma semana. Já tentei utilizar outros menus, mas todos que eu coloco, quando clico em uma opção, aparece "A página que você está procurando neste blog não existe". Eu usei os marcadores, não sei mais o que fazer.

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...