Links lado a lado (menu horizontal)

Colocar um menu horizontal, aquele que os links ficam um do lado do outro, é mais simples do que parece, nós apenas precisamos de algumas linhas de CSS, se quiser fazer o mesmo com imagens veja aqui:Imagens Lado a Lado, Fazer Colunas nos Gadgets. Além disso uma outra forma de colocar um bonito menu no seu blog é usar um menu accordion no blog (menu sanfona).

Menu horizontal no blog
Para criar esse menu horizontal copie o código abaixo e coloque no seu blog através da pagina layout, adicionar gadget, html/javascript:

<style type="text/css">
<!--
#page-bar {margin: 0px;
padding: 0px;
width:auto;
}
#page-bar ul {
list-style-position: inside;
list-style-image: none;
list-style-type: none;
}
#page-bar li {
float:left;
display:block;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#page-bar li a{
margin: 0px;
color:#000000;
display:block;
text-decoration: none;
width: 150px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
padding-top: 5px;
padding-bottom: 5px;


}
#page-bar li a:hover {
color: #0000FF;
text-decoration: underline;}
-->
</style>
<ul id="page-bar">
<li><a href="url do item" target="_blank">Item 1</a></li>
<li><a href="url do item" target="_blank">Item 2</a></li>
<li><a href="url do item" target="_blank">Item 3</a></li>
<li><a href="url do item" target="_blank">Item 4</a></li>
<li><a href="url do item" target="_blank">Item 5</a></li>
</ul>



Se preferir que os links abram na mesma janela retire o trecho target="_blank" que está nas linhas acima, você pode retirar de todas ou escolher quais links devem ou não abrir em uma nova janela do navegador.

No meio desse código todo uma das partes mais importante é a configuração de largura dos botões veja no estilo #page-bar li a tem width: 150px; isso é a largura de cada item, então faça os ajustes necessários, ou seja, se o menu horizontal ficar menor que a largura do blog aumente esse valor. Caso um ou mais itens do menu ficar na linha debaixo é preciso diminuir a largura de cada item(150) ou tirar algum dos itens do menu.

A parte final do código é só colocar o endereço dos sites e trocar o texto item1, item 2.. pelos nomes dos sites, mais uma vez cuidado com a quantidade de links, pois se colocar muitos links o menu ficará muito largo então mudará de linha, como já dissemos se acontecer isso é preciso tirar links ou diminuir o valor 150px.

As partes #page-bar li a{...} e #page-bar li a:hover{...} são o que controlam aparência dos links, então se quiser é possível modificar esse estilo para deixar do jeito que combine melhor com seu blog. Já fizemos uma postagem sobre menu horizontal, mas alguns acharam que ficou difícil de instalar, espero que assim, colocando o código num lugar só fique mais fácil.

Veja também:
Fazer e alterar bordas
Colocar menu Horizontal
Fazer botões com imagens
Mudar o estilo do texto
Código das Cores
Programas para editar imagens
Onde e como hospedar imagens

283 comentários:

  1. No meu blog não estão aparecendo os gadgets e a lista de links quando se usa o navegador Internet Explorer.
    Tudo funciona bem com o Firefox.
    Meu blog: www.maiakowsky.blogspot.com

    ResponderExcluir
  2. Fabiano Roberto, guru destas coisas da internet, será que você pode ensinar a esta ignorante recém-blogueira como se fazem barras divisórias entre posts? Ou se você já ensinou aqui, onde procuro?
    Muito obrigada!
    ( Se é o mesmo Fabiano Roberto que me respondeu no Yahoo, desculpe ter-lhe trocado o nome quando agradeci!)

    ResponderExcluir
  3. entre na pagina editar html e coloque isso junto com os outros estlilos CSS

    .post{background-image: url(http://img211.imageshack.us/img211/2967/fim.gif);
    background-repeat: repeat-x;padding-bottom:27px;
    background-position: bottom;}

    é uma imagem que vai aparecer entre os posts depois pode trocar a imagem, veja nosso link no guia rapido sobre imagem de fundo

    ResponderExcluir
  4. nao entendi essa parte do css
    alguem pode me explicar?

    ResponderExcluir
  5. CSS: Cascading Style Sheet - folha de estilos que formam o padrão para o design de sites, como tamanho de fontes, cores, imagens, padrões de tabelas.
    Esta definição está na Net, Vitor.
    É só escrever CSS significado, que está tudo muito especificado.
    Obrigado Roberto!
    (agora até me sinto importante porque ajudei o Vítor!)

    ResponderExcluir
  6. como q eu faço para colocar um igual ao do blog?:[http://4.bp.blogspot.com/_MK_w7dxCpUQ/SgRhSHPdhgI/AAAAAAAAAG4/Wkn2JVTR5d8/s1600-h/imagem.bmp]

    ResponderExcluir
  7. Victor Leãovarias pessoas já perguntaram sobre isso, então acabei de publicar uma explicação sobre o como fazer para colocar um menu com submenu no blog

    ResponderExcluir
  8. Boa Tarde.
    No meu blog não aparece os gadgets e a lista de links.uso firefox actual.
    Onde meto "colar" lá no editar?
    O meu blog:http://perolasdofacebook.blogspot.com

    Cumprimentos.

    ResponderExcluir
  9. tem que entrar na pagina layout, adicionar gadget, html/javacript

    se não aparece isso no seu blog provalmente você usa um modelo classico, então pode mudar para o modelo layout entrando na pagina editar html, depois da caixa dos códigos do blog tem a opção mudar para layout

    ResponderExcluir
  10. Fabiano Ola tudo bem
    Coloquei no meu blog os menus lado a lado, mas como faço para colocar conteúdos nos menus????

    ResponderExcluir
  11. Sandra

    é só trocar os links que estão no modelo

    ResponderExcluir
  12. Fabiano agradeço o retorno, consegui colocar os menus, mas por exemplo gostaria de colocar um menu quem sou eu, mas que abrisse uma pagina do meu blog e eu não consigo, só consegui salvando uma pagina da web e colar o link da pagina. Outra coisa quando coloco todos os 5 itens eles ficam na vertical e não na horizontal.
    Se voce quiser dar uma olhada
    descobrindosaopaulo.blogspot.com
    Agradeço desde já
    Sandra Guimaraes

    ResponderExcluir
  13. esse código é um pouco complicado de mexer, cuidado com as li e ul isso faz o menu apresentar falhas

    ResponderExcluir
  14. Olá Fabiano Roberto. Obrigado pela dica. Fiz com 6 itens e deu certo. Apenas gostaria de poder colocar uma cor de fundo(uma barra por trás dos itens), vinho, por exemplo, para combinar com meu blog.
    No caso do meu blog funcionou no IE e no Mozila, apenas ficaram aparecendo as duas linhas que dividem as áreas do blog, por cima do menu. Também aparece o sinal >> ao lado de cada item (é isso mesmo?).
    meu blog: http://dicur.blogspot.com
    Se puder ajudar ficarei grato.

    Como gostei muito das suas dicas, coloquei um banner do seu blog no meu.

    ResponderExcluir
  15. Paulo Roberto
    não esse sinal está em outra parte do seu blog .sidebar ul li{background:url(http://1.bp.blogspot.com/_XByc9SCisZM/Sa4DzwR1zAI/AAAAAAAAA58/MdZL8bZQ0es/s1600/arrowmaggrey.gif) no-repeat 2px .4em; text-indent:0;

    ele é uma imagem de fundo, se quiser é só pagar background:url(http://1.bp.blogspot.com/_XByc9SCisZM/Sa4DzwR1zAI/AAAAAAAAA58/MdZL8bZQ0es/s1600/arrowmaggrey.gif)

    ResponderExcluir
  16. olá queria que me judassem pois mudei o fundo do meu blogger e a minha apresentação aparece no fim como posso por de lado, tal como outras coisas que queria por, desde já agradeço a ajuda .
    Se quiser dar uma olhadela para melhor me ajudar agradeço.
    http://omeuespasso.blogspot.com/

    ResponderExcluir
  17. na pagina editar html vai encontrar #outer-wrapper {
    width:740px;
    margin:0 auto;


    se aumentar o valor 740 deve resolver seu problema

    ResponderExcluir
  18. Obrigado por me ter respondido Fabiano Roberto.
    Eu sou nova nisto, entendo muito pouco, posso te pedir mais um favor?
    Me dá uma dica como posso alargar o texto,uma vez que tenho muito espaço em branco , e como posso por imagens ao lado do texto , nesse espaço branco.
    Te agradeço desde já.

    ResponderExcluir
  19. Maria
    veja essa postagem sobre largura do blog
    http://www.dicasparablogs.com.br/2007/08/largura-do-blog.html

    ResponderExcluir
  20. Bom dia estou fazendo um blog esta ficando legal já usei algumas dicas do seu site, mas não estou entendendo assim como eu faço para criar uma página e que os menus horizontais vão para essa página por exemplo: música é o menu, logo quero que ele vai para uma página só de músicas, e ai que está minha dúvida como fazer esse link, como criar essa página, o link do meu blog da uma olhada http://velomachine.blogspot.com/
    se puder tira essa minha dúvida ficarei muito grato, digo seu site está ajudando e muito, se quiser me mandar um e-mail é silva.felipe55@gmail.com

    ResponderExcluir
  21. você pode criar o marcador musica para o seu blog e usar o link no menu horizontal.

    o blog não permite pagina extras

    ResponderExcluir
  22. Fabiano adorei essa dica,só não consegui colocar borda,como meu blog é preto,ficaria legal uma borda...mas ñ sei onde trocar.
    Mesmo assim te agradeço meu lindo.
    Bjos

    ResponderExcluir
  23. L Loroza
    veja aqui como fazer botões e bordas
    http://dicasparablogs.blogspot.com/2009/04/como-fazer-e-colocar-botoes-no-blog.html
    http://www.dicasparablogs.com.br/2008/08/colocar-ou-alterar-as-bordas.html

    ResponderExcluir
  24. Há, mas eu queria com botão =/

    ResponderExcluir
  25. Anônimo
    mas é só mudar o estilo CSS para fazer o botão, veja no final da postagem os links que estão em Veja também.. lá tem como fazer botões

    ResponderExcluir
  26. Olá tenho uma duvida:

    tem como eu colocar a imagem dos banners uma em cima da outra em linha rera ou uma do lado da outra ''que nem nesse blog? pq nesse tutorial eu fiz e apareceu o nome dos blog em linha reta um em cima do outro

    Obrigado!!

    ResponderExcluir
  27. pode me explicar como eu posso colocar um botão ai no menu horizontal?

    ResponderExcluir
  28. os botões são os proprios links é só mudar a formatação dos links no trecho #page-bar li a{...

    ResponderExcluir
  29. Muito bom. Não sabia que era tao simples assim.

    Obrigado.

    ResponderExcluir
  30. Fabiano Roberto suas dicas me ajudam muito, eu praticamente criei meu blog com suas dicas!
    Eu queria saber como que coloca uma caixa de busca personalizada no menu horizontal?

    OBRIGADO!

    http://blogdiarreiamental.blogspot.com/

    ResponderExcluir
  31. [ADM] Diarréia Mental , coloque o código da caixa de busca no lugar do código de um dos links

    ResponderExcluir
  32. Gostaria de saber como colocar figuras ou pelo menos colocar linhas para separar as palavras de um menu horizontal

    ResponderExcluir
  33. Boa dia,

    Gostaria de saber como mudar a cor das palavras dentro do widget em meu blog.

    O fundo é branco e as palavras ficam brancas tambem , aqui nao da para enchergar ! So os links ficao brancos e as palavras sem links ficao cinza ...

    Qual ér a tag para arrumar isso ?

    ResponderExcluir
  34. Herrera [ Agente blog Filippo ]


    acho que precisa mudar a cor do texto da #sidebar, isso você faz pela pagina editar html

    http://www.dicasparablogs.com.br/2009/04/como-formatar-o-texto-do-blog.html

    ResponderExcluir
  35. Fabiano, obrigado pelas dicas, gostaria que me explicasse melhor como colocar botões com o texto dos links. Aí em cima voce disse que é so mudar a formatação dos links no trecho #page-bar li a{... Poderia dar mais detalhes? Mais uma vez obrigado.

    ResponderExcluir
  36. Dorival
    se usar criar um botão é só colocar no lugar do link de texto mas retire os:
    padding-top: 5px;
    padding-bottom: 5px;
    que estão no código.

    para colocar imagens use esse código

    <a href="endereço do site"><img border="0" src="endereço da imagem" /></a>

    ResponderExcluir
  37. Mais uma vez obrigado, deu certo. Agora eu vou melhorando aos poucos. Abraços

    ResponderExcluir
  38. Gostei muito das dicas, mas meu template já vem com os botões para o menu horizontal, só preciso saber como inserir os links em cada icone. Por exemplo, "sobre" eu desejo que apareça o meu perfil.
    Até agora, as unicas que funcionam são o login e a pagina inicial.

    Pode dar uma ajuda?Estou fazendo testes com ele ainda para depois postar.

    rimaricafrasefeita.blogspot.com

    ResponderExcluir
  39. se não tiver como clicar para editar o gadget daquele menu entre na pagina editar html e procure por:
    <ul id='menu'>

    <li><span class='home'><a Title='Home' href='http://rimaricafrasefeita.blogspot.com/'>Inicial</a></span></li>

    <li><span class='about'><a href='http://www.blogger.com/profile/13122548678339145743'>Sobre</a></span></li>

    <li><span class='subscribe'><a href='http://rimaricafrasefeita.blogspot.com/feeds/posts/default'>recados</a></span></li>

    <li><span class='contact'><a href='mailto:#'>Contato</a></span></li>

    <li><span class='archives'><a href='http://www.blogger.com/home'>Login </a></span></li>

    </ul>

    é nesta parte que edita os links

    ResponderExcluir
  40. bem legal e facil de mecher , mas como eu coloco uma barra divisoria entre os itens ??

    ResponderExcluir
  41. Rafael
    na pagina editar html você pode procurar ou colocar isso

    .sidebar .widget {margin: 12px 0 13px 0;padding: 0;border-bottom:1px solid #FFFFFF;}

    a parte border-bottom:1px solid #FFFFFF; faz uma borda no final de cada gadget, claro pode alterar como desejar ou usar uma imagem de fundo fixa na parte de baixo, mas se fizer isso nao esqueça de colocar padding-bottom: 20px também para dar o espaço para imagem aparecer.

    ResponderExcluir
  42. amigo como eu faço para quando clicar nos liks do menu horizontal não abrir outra pagina mais sim ir direto na mesma pagina

    vlw.

    ResponderExcluir
  43. para não abrir em outra pagina é só retirar a parte target="_blank"

    ResponderExcluir
  44. valeu cara esse é o melhor site de dicas para blog

    ResponderExcluir
  45. Professor Fabiano, bom dia!

    Como eu coloco no Texto ou Htrml/Javascript (gadgets) fundos brancos? Pois o fundo dos gadgets Texto e Html/Javascript ficaram invisíveis ou transparentes.

    Como eu coloco a cor ou a imagem nas barras das abas das páginas do meu blog? Pois as abas ficam invisíveis ou transparentes.

    ResponderExcluir
  46. Gustavo Reis, geralmente a cor das colunas laterais é na pagina editar html, no estilo #sidebar

    veja aqui Template do Blog, colunas de tamanhos iguais

    ResponderExcluir
  47. Olá professor Fabiano!

    Boa tarde!

    Como eu coloco uma linha horizontal grossa para separar as postagens?

    Obrigado!

    Gustavo

    ResponderExcluir
  48. Gustavo Reis, você pode colocar no html do seu blog esse código

    .post{padding-bottom:15px;border-bottom: 2px dashed #990000;margin-bottom:30px}

    o valor 15 é a margem antes da borda, e o 30 depois dela, veja aqui como formatar o borda

    Colocar ou alterar as bordas

    ResponderExcluir
  49. ola,,
    eu queria saber como faço para colocar bordas no menu e se tem como mudar a letra e a cor dos links do menu

    ResponderExcluir
  50. Oi Fabiano Roberto, como vai??
    Li todos os comentários dessa pagina e minha duvida é a mesma da Sandra, como faço pra colocar o conteúdo do menu??
    Desde já agradeço a atenção!
    Claudia

    ResponderExcluir
  51. tem que acrescentar mais linhas

    <li><a href="url do item" target="_blank">Item 5</a></li>


    uma para cada item que desejar

    ResponderExcluir
  52. A vários dias estava procurando dicas para colocar botões lado a lado e não consegui. Mas pra minha sorte encontrei o Dicas para blogs, e consegui resolver com muita facilidade. Deixo aqui os meus parabéns pela boa informação que recebi.
    Meu Blog:http://reliquiasetunados.blogspot.com/

    Grato

    ResponderExcluir
  53. VALEUUU

    VC ME SALVOU

    VALEUU DD++++

    SUCESSO

    ResponderExcluir
  54. Apareceu um menu padrao do layout, que é aquele layout de caderno que baixei no acessorios para blogs, apareceu um pontinho do lado esquerdo e o link do lado direito, e ainda um de baixo do outro, me ajuda aew, VLW.

    ResponderExcluir
  55. Como que eu faço pra abrir o link na mesma janela?

    ResponderExcluir
  56. para abrir na mesma janela retire o target="_blank" do codigo

    ResponderExcluir
  57. Ola Fabiano,

    Como faço para alterar a altura do menu pois ficou muito larga. Consegui colocar cor, bordas e aumentar a largura, porem a altura nao consegui encontrar o local para modificar. Poderia me ajudar?
    Ficou uma beleza, só preciso fazer este pequeno ajuste.
    obrigada,

    Katia

    ResponderExcluir
  58. alteramos a altura do botão com os paddings:

    padding-top: 5px;
    padding-bottom: 5px;

    ResponderExcluir
  59. tenho uma pergunat se me poderem ajuadr ficava muito grato. e o seguite e tenho um blog 2&1 tv=downloads gratis de link direto.a questao e quie eu queria colcar o menu da tv com iamgens ou logo de cada canal. genero muitos sites de stream na internet. alguem faz alguma ideia...fica a questao. desde ja agradeco uma breve resposta

    meu blog: downloadsapedido.blogspot.com

    ResponderExcluir
  60. você precisa achar as imagens e os links para os canais, não sei quais links pois nunca usei canais na internet.

    ResponderExcluir
  61. obrigado roberto. sei mais ao menos como e, sei que as imagens vem de links da net os links de tv sao do meu blog. cada tv cada link. mas fazer um menu ou um botao para cada link com imagem e mais dificel. a ver se aprendo isso. de qlquer forma obrigado. e se postares aqui algo sobre o assunto LET ME KNow.abraco

    ResponderExcluir
  62. se quiser colocar imagens(banners) uma do lado da outra, crie um estilo css assim:
    .banners img{padding: 5px;display: inline

    <div class="banners">
    codigo dos banners
    </div>

    claro veja se o seu blog já usa o estilo banners se tiver use outro nome qualquer.

    ResponderExcluir
  63. linguagem css html senpre dificel de entender. lol mas ya roberto eu percebi por onde comecar. mas mais dicas sao bem vindas; eu uso o blogspot. passa la pa veres co o tenho o menu. mas com imagnes vai ser dificel para mim que ando nisto a coisa de 2 anos. muito pouco tenpo. abraco

    ResponderExcluir
  64. Como diminuo o comprimento ?

    ResponderExcluir
  65. você fala o comprimento de cada botão? é no trecho width: 150px;, neste estilo #page-bar li a{

    ResponderExcluir
  66. Não, o comprimento total, no meu blog fica estranho, veja só: http://insaneskull.blogspot.com/

    ResponderExcluir
  67. o comprimento total não é ajustavel, só o tamanho de cada botão, sugiro que coloque mais botões e aumente a largura de cada um deles, pode usar um botão para assinar feed, mostrar comentários recentes e outras coisas

    ResponderExcluir
  68. O meu mais sicero obrigado!

    Quebrei muito a solucionou perfeitamente este tutorial, e a minha sorte foi ter prestado atenção e lido todos os comentários pois achei o complemento para o que eu necessitava.

    Foi um comentário questionando como deveria se proceder para mudar os itens por imagens linkaveis, a resposta a essa pergunta não apenas esclareceu como resolveu definitivamente o meu problema.

    Parabéns Roberto.

    ResponderExcluir
  69. no meu deu um erro bX-2myth2 oque devo fazer, coloquei do jeito que esta pra testa antes de modificar e deu esse erro
    desde já agradeço

    ResponderExcluir
  70. os erros do blogger são dificeis de explicar ou corrigir, mas normalmente é algo momentaneo, se tentar mais tarde deve conseguir.

    pode excluir o histórico de internet para seu computador não entrar na pagina atraves dele

    ResponderExcluir
  71. Fabiano ..
    queria q vs me ajudasse ..
    pq tô com um problema ...

    O meu template, jah veio com o menu horizontal ... Soh q quando eu adiciono alguma 'categoria' à alguma postagem, essa categoria naõ aparece no menu. jah procurei em vários lugares como solucionar isso . mas ainda nem achei nenhuma resposta .. será q vs sabe o q tah acontecendo ? e o q eu posso fazer pra ajeitar isso ? .

    ô se vs quiser vê como tah o link do blog . http://www.diario-de-uma-garota-moderna.blogspot.com/

    vs vai vê q lah em cima, tem duas 'categorias' .. sendo q elas estão juntas, ou seja quando alguém clicar lah, ela nem vai sair do canto ... naão sei se eu fui clara o bastante . mas agradeceria mt se vs pudesse me ajudar .!

    Desde jah eu agradeço
    BejiTOs :*
    E maiis sucesso pra vs ! (:

    ResponderExcluir
  72. Oii Fabiano ! (:

    bem , disconsidere o meu outro comentário .. futucando no blog com calma, eu achei a solução .!

    BejiTOs :*
    e Sucesso , mais uma vez ! ;D

    ResponderExcluir
  73. no meu não esta aparecendo esse htmal/javascript no meu gadget pfv bote fotos assim fica melhor para entender

    ResponderExcluir
  74. Andr£ Lu!$ ¬¬
    esse menu é feito basicamente com códigos, para usar imagens para explicar é meio estranho afinal é só copiar e colocar o código, e depois fazer as alterações de links

    ResponderExcluir
  75. Desculpe eu acho que vc entendeu errado,o que eu queria dizer era :que eu não entendo muito disso,e que eu não tinha achado o html/javascript e que eu pedi foi para você colocar fotos no post.Eu não entendo muito sobre CSS(na verdade é que eu nem sei o que é CSS).PFV me ajude

    ResponderExcluir
  76. Fabiano, estou eu aqui outra vez para incomoda-lo. Por favor me ajuda! é o seguinte eu queria colocar os botões lado a lado com você colocou na sua sidebar. Como faço? Desde já obrigado!

    ResponderExcluir
  77. é só seguir os passos que mostramos no tutorial e conseguirá fazer um menu igual a esse que usamos

    ResponderExcluir
  78. É que na verdade Fabiano, eu não quero a link bar. O que eu qro na verdade é coloca os botões que vc tem na sua sidebar (orkut, youtube e facebook). Eu qro colocar os botões na minha sidebar um do lado do outro como vc fez, mas como faço pra colocar lado a lado?

    ResponderExcluir
  79. aqui está o código para dividir um gadget de html em colunas

    Dividir um gadget em duas colunas

    depois é só usar imagens comuns para linkar

    ResponderExcluir
  80. Boas, não estou conseguindo mesmo nada.
    criei uma caixa de links,horizontal, e criei posts de mensagens com as etiquetas, mas depois quando clico nos links diz que não tem posts.
    onde será estou a errar?
    se faço com marcadores, eles alteram o tamanho e a posição quando são clicados.
    o que eu queria era um menu de fotos(naturez,urbana,outras), e que os posts correspondentes fossem para lá.
    tou perdido.
    abraço
    francesco

    ResponderExcluir
  81. então provavelmente está usando os endereço errados das paginas no links, tem que ser o link completo com o http://...

    ResponderExcluir
  82. Como faço um menu horizontal expancivel ?

    ResponderExcluir
  83. Ola Fabiano, eu quero saber como faço assim um fundo para o meu menu horizontal, tipo o seu, o seu é azul claro e quando passa o mouse por cima vira outra cor, me ensina ?

    ResponderExcluir
  84. veja aqui como formatar o texto do blog

    Como Formatar o Texto do Blog

    e use no estilo #page-bar li a:hover, pode fazer qualquer formatação, trocar cor de fundo, colocar bordas..

    ResponderExcluir
  85. Como ponho uma lista vertical com vários links para um menu do Linkbar?

    ResponderExcluir
  86. se apagar a linha float:left; neste trecho:


    #page-bar li {
    float:left;
    display:block;

    os links ficam um embaixo do outro

    ResponderExcluir
  87. ele ficou colado na sidebar, onde eu ajeito isso, pra colocar mais distancia ?

    ResponderExcluir
  88. neste trecho #page-bar {margin: 0px;
    padding: 0px;
    width:auto;
    }

    você pode trocar padding:0px por padding-bottom:5px

    faça testes alterando o valor 5 até chegar na distancia que desejar.

    ResponderExcluir
  89. padding-bottom:5px alterou a distancia dos lados, e nao de baixo ;S

    ResponderExcluir
  90. ah, consegui nesse trecho!

    #page-bar li a{
    background-color: #000000;
    border: 2px solid #FF1493;
    margin-bottom: 7px;

    add o margin-bottom: 7px; :D

    ResponderExcluir
  91. MariaGoisainda bem que conseguir mas sinceramente não sei o que aconteceu o estilo com a palavra bottom só deveria criar espaço para baixo

    ResponderExcluir
  92. Exatamente, " margin-bottom: 7px; " criou espaço embaixo do menu; entre as colunas e o menu (:

    só que nao alterei no trecho #page-bar { , alterei no #page-bar li a{

    ResponderExcluir
  93. Eu queria saber como diminui o espaço de um lado pro outro , tipo deixar certinho , ou deixar a cor da barra trasparente , tem como ?

    ResponderExcluir
  94. Olá! Fabiano, tudo bom? Mto legal o seu blog.Parabéns!
    Bom, to c um prob, to criando um blog e qndo vou por aquelas CAIXA DE LINK HTML(pra as pessoas copiarem) FICA MUITO GRANDE. axo q é o template q ja peguei quase pronto. Se poder me ajudar fico mto grata!

    ResponderExcluir
  95. Ola fabiano sou a debora do outro poste, desculpe encomodar voce novamente, mais eu fiz todo procedimento mais o menu ainda está no corpo do blogger. tem um detalhe eu peguei o modelo de ums dos seus entra la pra voce ver qual é o problema http://tudoqueeugosto16.blogspot.com/

    desde ja agradeço ;D

    ResponderExcluir
  96. Aqui não ficou lado a lado ficou um abaixo do outro alguem poderia me ajudar?

    ResponderExcluir
  97. então deve ter colocado alguma coisa errada.. muitas pessoas já usaram esse código e sempre funcionou..


    veja se já não tem algum estilo page-bar no seu html além deste que indicamos aqui

    ResponderExcluir
  98. Bom dia.

    Usei todas as suas dicas e gostei bastante do resultado no meu blog. valeu :)
    Fiquei, no entanto, com uma dúvida em relação ao fundo do botão.
    Gostaria que o botão ficasse com a textura de um vidro fosco (não sei como é isso em CSS), ou seja, com uma transparência de 50% aproximadamente.
    Isso é possível, pois só encontrei background como "transparent"(100%)?
    Grato

    ResponderExcluir
  99. para textura de fundo em botões é melhor usar imagens, veja aqui: Como fazer e colocar botões no blog

    ResponderExcluir
  100. Fabiano, consegui e ficou muito legal.
    valeu pelas dicas.
    Mas tem um "pulo do gato" aí: primeiro é necessário criar uma pequena figura com o Gimp, com a opacidade desejada e em ".png"
    Depois hospeda-se ela em algum lugar e segue-se o seu roteiro.
    No meu blog, usei para o botão, um figura de 10x2 pixels, fundo branco com 40% de transparência. O botão suspenso muda de cor ao passar o mouse.
    Até mais

    ResponderExcluir
  101. Fabiano, adorei esse menu, funcionou direitinho.
    Apenas um problema; criou um espaço grande entre o menu e as postagens, gostaria de diminuir. Tem como?
    Agradeço se puder me ajudar.

    abç
    ranulfo

    ResponderExcluir
  102. os espaços depende de onde você colocou o gadget com o menu e as configurações de largura(width) que usou nele.

    ResponderExcluir
  103. o problema das minhas imagens nao carregarem é o IMAGESHAKE, me indique um site q funcione, minhas imagens so carregam uma parte , observe os Wallpapers na coluna do blog: http://fasdesolangealmeida.blogspot.com/
    so carregam um pedaço, :@

    ResponderExcluir
  104. MariaGois
    o imageshack é um bom site de hospedagem, acho que o problema é mostrar imagens grandes demais no seu blog.. ele fica demorado para carregar

    o certo seria criar duas imagens, uma no tamanho original(que vc já fez) e outra miniatura para mostrar na coluna do blog, assim sua pagina carregaria mais depressa

    ResponderExcluir
  105. Eu vi um comentário com a duvida que eu estou, mas eu não achei sua resposta, então me desculpe perguntar a mesma coisa dinovo, mas eu não entendo, eu consegui criar o menu horizontal certinho e ainda mudar o nome, mas eu sei como fazer para escrever o que eu quero em cada parte do menu, entendi minha duvida?
    Qlq da uma olhada no meu blog
    http://prendadagarota.blogspot.com

    Obrigadaaa

    ResponderExcluir
  106. Carla Cambiaghi
    nos lugares onde tem:
    <a href="url do item" target="_blank">Item 1</a>

    você pode trocar por endereços de postagens do seu blog, desta forma:

    <a href='http://www.dicasparablogs.com.br/2009/05/links-lado-lado-menu-horizontal.html' title='Links lado a lado (menu horizontal)'>Links lado a lado (menu horizontal)</a>

    ResponderExcluir
  107. fabiano por favor me ajude,nao sei onde coloco o link do site no codigo me ajuda ........

    ResponderExcluir
  108. Olá Fabiano.
    Primeiro quero dizer que o seu blog está de parabéns.
    Agora vamos a dúvida:
    Usei o seu código para barra de menu horizontal e deu certo.
    Ficou semelhante ao blog, fume, eu alterei a cor da fonte e também quando se posiciona o ponteiro do mouse sobre cada botão.
    Agora quero fazer um espaço entre cada botão que seja na cor transparente.
    Você pode me ajudar?
    Caso queira dar uma olhada:
    semeandoapalavradosenhorjesus@blogspot.com
    Dê uma opinião de como está o meu blog.

    ResponderExcluir
  109. para criar um espaço entre os botões você pode colocar no trecho #page-bar li a{...} margin:1px;

    isso faz uma margem de 1 px ao redor do botão, se quiser o espaço somente na lateral pode usar margin-left:1px

    claro ajuste o valor até ficar no espaço que você deseja

    ResponderExcluir
  110. Fabiano.
    Desculpe, mas eu não formulei minha pergunta corretamente.
    Além da margem ou separação nos botões da barra horizontal, quero saber sd tem como fazer essa separação ou margem sendo ela transparente.
    Pois minha barra horizontal é fume meio transparente.
    Se eu colocar #page-bar li (...) Margin-left: 2x;
    Color: código de transparência;
    Funcionará?
    Obrigado mais uma vez.

    ResponderExcluir
  111. Luiz Carlos Do Nascimento
    funciona bem porque o margin é um espaço vazio, ou seja ficará a cor de fundo do seu blog

    ResponderExcluir
  112. Olá Fabiano, eu gostaria de saber como faço para: no menu, eu quero um botão " Todos os animes" e que quando a pessoa clique apareça uma página com uma lista, com os links das postagens. Como faço isso?? Eu nao sei direito como eu faria, ou qual link eu colocaria ali em cima (no botão). Me ajude por favor.
    blog afetado: www.mikigifs.blogspot.com/

    ResponderExcluir
  113. Muito bom msm, o primeiro que eu consegui colocar, mas como faço pra por uma imagem como fundo do menu? Aqui no meu ficou transparente, aparecendo o fundo do blog mesmo.
    Obg des de já.

    ResponderExcluir
  114. Fabiano Roberto

    Eu quero tirar o menu do meu blog porque coloquei um do CSS Menu Maker e ficou em cima do menu horizontal. Como faço pra tirar ? Não aparece mais o gadget desse menu, mas continua lá. Me ajuda

    ResponderExcluir
  115. veja se colocou o ´codigo completo, se faltar algo gera esse tipo de erro que mostra o código em fez de executar

    ResponderExcluir
  116. Descobri um jeito de colocar páginas lado a lado. Atenção: isso só funciona com páginas. Não com links.

    Na página desing, arraste o gadget "páginas" para debaixo do cabeçalho.

    Pronto, agora todas as suas páginas do blog aparecerão lado a lado.

    ResponderExcluir
  117. O seu site e uma maravilha.Um obrigadao por nos ajudar.
    Eu vi um conjunto de imagens passando em rodape num site lituano( http://www.lrytas.lt/ ) .A minha ideia era passar no meu blogue essa barra mas com as fotos dos blogues que me seguem.Pode ajudar ?
    Obrigado.

    ResponderExcluir
  118. Oi,como coloco conteudo nos links lado a lado?

    ResponderExcluir
  119. conteudo nos links? ...

    é onde tem url do item, é para colocar o endereço das paginas e depois mudar o texto item logo a seguir...

    as paginas podem ser postagens do seu blog

    ResponderExcluir
  120. só que nao da certo,visite meu blog......aparece pagina nao encontrada

    ResponderExcluir
  121. Como colocar um fundo de cor atras dos itens?

    ResponderExcluir
  122. no estilo page-bar li a{... você pode colocar a cor de fundo ou formatar como quiser... veja os links no final do tutorial..

    ResponderExcluir
  123. Aonde que eu coloco a cor de fundo??pq na page-bar li a só fica a cor,mas a de fundo é aonde que coloca?

    ResponderExcluir
  124. meus itens ficaram muito pequenos,não to conseguindo aumentalos para o lado...como faço?

    ResponderExcluir
  125. ei,pq no meu blog aparece um sapo falando!dominio não registrado,registre-se?

    ResponderExcluir
  126. Olá,gostaria de fazer uma pagina sobre mim no blog,como crio uma pagina tipo assim Eu e dai o conteudo?

    ResponderExcluir
  127. Anonimo
    não entendi sua duvida... você pode criar a pagina com o conteudo que desejar

    ResponderExcluir
  128. Tipo eu quero colocar no menu horizontal CONTATO,mais quando clico o que faço para abrir a pagina e aparecer o meu contato?

    ResponderExcluir
  129. Giro Dos Famosos
    a paginas que abrem no menu podem ser postagens ou paginas extras do blog... se nãofuncionou provavelmente o endereço da pagina está errado

    ResponderExcluir
  130. como que eu coloco parceiros no meu blog?

    ResponderExcluir
  131. a nossa lista de parceiros é feita manualmente, são links de texto comuns, não tem nenhum código

    ResponderExcluir
  132. Olá! o meu problema é que eu coloco para abrir o link em outra aba só que quando clico pra salvar aparece essa frase "O URL não pode conter '<'".

    Gostaria de uma ajudinha!

    valeu

    ResponderExcluir
  133. Você, a Bola e Eu!
    provavelmente você apagou algo errado na hora de colocar os links no código, se tirar os sinais ' o código dá erro

    ResponderExcluir
  134. Olá novamente,como coloco uma cor de fundo nos links??

    ResponderExcluir
  135. no trecho #page-bar li a{....} é só colocar o código background-color:#000000;

    claro que usando a cor que desejar, esse exemplo é preto

    ResponderExcluir
  136. Como troco a cor das opçoes da enquete!!é urgente..

    ResponderExcluir
  137. as enquetes geradas pelo blogger tem formatação propria não dá para alterar

    ResponderExcluir
  138. amigo por favor, estou com dificuldade de tirar um contorno da barra, o link da imagem esta logo abaixo, se puder me ajudar por favor responda, a barra ta perfeita so preciso tirar essa risca, não é um subilhado, acredito eu q seja a sombra do botao, porem nao consigo tira ela, ai vai a imagem, agradeço desde já!
    [http://img852.imageshack.us/img852/4881/barramenu.png]
    vlw

    ResponderExcluir
  139. o site imageshack removeu muitas imagens inclusive essa... não tem como recuperar o jeito é criar e hospedar outra imagem

    ResponderExcluir
  140. O meu funciona direitnho,mudei a cor e tdooO tá perfeitinho,vlw!!!

    ResponderExcluir
  141. Como deixar a barra menor?pq coloquei todos os link,mais ainda sobra muito espaço dos lados

    ResponderExcluir
  142. no trecho abaixo você pode mudar a largura de cada botão e assim fazer que o menu fique do tamanho que desejar, altere o valor 150

    #page-bar li a{
    margin: 0px;
    color:#000000;
    display:block;
    text-decoration: none;
    width: 150px;

    ResponderExcluir
  143. Olá,poderia me dar uma dica de onde posso divulgar meu blog para ter mais visitas?

    ResponderExcluir
  144. aqui tem alguns dicas sobre Ganhar Tempo e Conseguir mais Visitas no Blog

    mas use nossa pesquisa no inicio da pagina achará varios outros tutoriais sobre o assunto

    ResponderExcluir
  145. Olá.Como faço uma pagina de fotos igual a esta http://selmg.6te.net/galeria/index.php

    ResponderExcluir
  146. esse tipo de pagina é complicado de fazer... precisa criar um site para isso não tenho como explicar isso num comentário ou mesmo em um tutorial...

    ResponderExcluir
  147. Fabiano boa tarde,coloco lá o código e fica tudo direitinho mais quando vou fazer os botões da errado.Quando visualizo no gadget vejo perfeito ai quando salvo aparece assim: .Item1
    .Item 2
    um abaixo do outro,estou mexendo nessa parte #page-bar li a{ e #page-bar li a:hover{ estou tentando colocar uma imagem nos botões que tem 150 de largura e 32 de altura.Poderia me da uma dica de onde que to errando?Consegui colocar aquele menu seu vertical,mais queria esse e não to conseguindo,me ajuda por favor,te agradeço.

    ResponderExcluir
  148. para colocar imagens é nestes trechos que citou... veja se a url da imagem está certa...

    ResponderExcluir
  149. Oi, eu tenho duas duvidas sobre o menu horizontal, 1º como trocar (item 1....)pelo nome que desejo? 2° tem que criar pagina extra pro item 1, como faço? Se puder responder, grato...... há e o site Dicas para blog está ótimo, parabéns.....

    ResponderExcluir
  150. o texto item 1 você escreve o que deseja que apareça na sua pagina, por exemplo em nosso blog usamos tutoriais diversos - depois no item 2 anuncie e assim por diante

    as paginas algumas são postagens do blog e outras são Paginas extras para o Blogspot

    ResponderExcluir
  151. Olá Fabiano. Excelente Post!

    Estou com duas dúvidas.
    Você sabe se é possível neste código, fazer com que o link que foi clicado ficar realçado enquanto o usuário está nele, da mesma forma como acontece com o menu de Pagínas original do blog?
    No meu site acervotecnico.com.br ficaria legal essa função para o menu que criei na barra lateral com o visual do menu de Páginas.

    Outra coisa hehe. Já quebrei a cabeça neste blog e em outro que administro, ambos usam os Novos templates do blogger, que possuem o Design de Modelo. Até hoje não consegui achar onde eu modifico os PADDINGs dos widgets. Queria reduzir as distâncias entre os widgets laterais, e entre os widgets acima e abaixo do corpo de postagens. Sabe onde fica?

    Desde já muito obrigado e parabéns pelo blog!

    ResponderExcluir
  152. sobre deixar o link visitado diferente você pode criar um estilo .#page-bar li a:visited{....

    ResponderExcluir
  153. Olá Fabiano acho que você é o único que pode me ajudar!!! Coloquei um menu no meu site http://animesvarios.blogspot.com e deu tudo certo mas ele não é daqui.


    Queria te perguntar se posso colocar uma imagem no lugar do título da palavra menu (que é o título do widget) aguardo respostas abraço

    ResponderExcluir
  154. seria mais facil usar a imagem com o código html em vez de editar o titulo do gadget..

    ou seja deixe o gadget sem titulo e antes do código do menu coloque isso aqui:

    <center>

    <img src="endereço da imagem" border="0">

    </center>

    ResponderExcluir
  155. Eu postei no meu blog e depois sai depois quando voltei minha conta tinha sido desativada(http://muisic-better.blgospot.com) porque?

    ResponderExcluir
  156. deve ter feito algo errado no seu blog ou colocado algum código que está redirecionando para outra pagina... não consegui entrar no endereço...

    ResponderExcluir
  157. Pq o titulo da postagem do meu blog nao tem link? tipo quando clica abre só aquela postagem?? meu blog >> http://giro-dosfamosos.blogspot.com/

    ResponderExcluir
  158. Giro Dos Famosos
    depende do template que usa.. o link nos titulos faz parte do html do blo

    ResponderExcluir
  159. Olá, usei o código que você postou deu tudo certo com excessão do fato de os botões do menu so aparecerem o nome quando passa a seta por cima dele. poderia me ajudar e se possivel me enviar um endereço que me ensine a fazer um menu com rolagem.
    Obrigado desde já pela sua iniciativa, é muito importante para nós leigos.

    ResponderExcluir
  160. veja aqui Alterar cores dos links - CSS, provavelmente a cor do link é a mesma do fundo por isso só aparece quando passa o mouse

    essa cor do link você altera no estilo #page-bar li a

    ResponderExcluir
  161. Como colocar um fundo branco atras do titulo do glaglets?? ex: este blog aqui http://selmg.blogspot.com/

    ResponderExcluir
  162. Juleide
    a formatação dos gadget é no estilo h2 na maior parte dos templates, então entre na pagina editar html e procure por h2{....}

    e coloque dentro das chaves background-color: #FFFFFF;

    claro que usando a cor que desejar, veja aqui o Código das Cores

    ResponderExcluir
  163. Eu nao achei essa parte ai!

    ResponderExcluir
  164. essa parte não deve ter.. só vai achar o h2 ou .sidebar h2 e deve colocar o background....

    não tenho como dizer exatamente como é pois isso varia conforme o template

    ResponderExcluir
  165. Eu tbm nao achei..será que tem como vcs acharem pra mim se eu mandar o código?

    ResponderExcluir
  166. Se eu te mandar o código vc acha?

    ResponderExcluir
  167. Word Selena
    no seu blog tem o estilo
    .sidebar .widget h2 {
    text-shadow: 0 0 -1px #000000;
    }

    mas se as alterações não funcionarem mexendo neste trecho veja que existem muitos outros h2 na sua pagina, será precisa apagar alguns trechos deles, por exemplo se mudar a cor e não funcionar terá que tirar a cor dos outros estilos h2

    ResponderExcluir
  168. Aconteceu uma coisa no meu blog....O numero de postagens em cada pagina ta para 10..mas só esta aparecendo 2..oq faço?

    ResponderExcluir
  169. Word Selena
    veja se nas configurações estão 10 postagens ou 10 dias...

    senão pode ser algum erro no html do blog, então é mais complicado de achar..

    ResponderExcluir
  170. Ta em 10 postagens..

    ResponderExcluir
  171. Eu acho que esta com erro no html...Por favor me ajude,este blog é tudo que eu mais amo!

    ResponderExcluir
  172. achar o erro no html é mais dificil precisa fazer os testes diretamente no seu blog, por isso não tenho como dizer onde é o problema

    ResponderExcluir
  173. A tempo tentava colocar este menu horizontal no meu blog e por não ter muito conhecimento não conseguia, mas ao ler o seu post tentei novamente e para minha surpresa deu certo. Fiz o ajustes necessários e gostei muito do resultado. Muito obrigada por partilhar conosco, postagens tão simples e de fácil entendimento!!!!!

    ResponderExcluir
  174. É possível os botões terem larguras diferentes uns dos outros? Tenho botões que o texto é composto por duas palavras, outros composto por apenas uma. No código aparece "width: 150px", se eu diminuo este valor, diminui todos os botões e não apenas alguns como eu gostaria. Tem como fazer botões de larguras diferentes?

    ResponderExcluir
  175. Anonimo
    se você retirar esse trecho da largura do botão então cada item ficará da largura do texto do botão.

    mas isso é mais dificil para acertar a largura total do menu pois dependerá do que escrever nele.

    se resolver tentar naquele trecho onde tem a largura (#page-bar li a), use padding-left: 2px; padding-right:2px;

    isso é um espaço de cada lado do texto, então pode alterar esses valores 2 px até deixar o menu completo na largura certa

    ResponderExcluir
  176. ola gostaria que meus links de fotos ficassem lado a lado e nao um embaixo do outro como faco?

    http://magicomediante.blogspot.com/p/dicas.html

    ResponderExcluir
  177. se usar esse código os links ficam lado a lado é só não usar < br> ou < p > para mudar de linha

    ResponderExcluir
  178. Muito boa essa dica. Tenho um blog a alguns meses e só agora consegui fazer essa barra lateral. Isso q sou burrinha p\ essas coisas e até eu consegui....rsrrs

    Muito obrigada, vejam como ficou:
    http://vivaiona.blogspot.com/

    ResponderExcluir
  179. Boa Noite Fabiano Roberto,

    O Blog permite que se faça 10 paginas extras, eu fiz 07, mas apenas 03 ficam visíveis, o que fazer para que todas apareçam??
    Obrigada e Parabéns pelo Blog.
    Penha

    ResponderExcluir
  180. ceramica é...
    você pode colocar os links para as paginas extras no seu blog como um menu..

    essas paginas não aparecem na pagina inicial do blog é normal

    ResponderExcluir
  181. Como colocar o titulo do gladget no meio do sidebar?

    ResponderExcluir
  182. Word Selena
    precisa colocar text-align:center; no estilo CSS do titulo do gadget, normalmente é o estilo h2{...} ou h3{....}

    veja na pagina editar html

    ResponderExcluir
  183. Olá Fabiano tudo bem?
    Meu posso pedir uma ajuda tua?
    É o seguinte coloquei no meu blog um menu horizontal desse que esta em sua postagem, o problema é que gostaria que ele ficasse certinho tanto dos lados quanto pra cima e a foto do cabeçalho gostaria que ficasse certinho tambem dá uma olha lá por favor e me diz se dá pra arrumar, se for o caso podemos conversar via e-mail pra acertar direitinho seu trabalho.
    Desde já agradeço.
    Segue o link: vimetorto.blogspot.com
    Valeu!!!

    ResponderExcluir
  184. o código do nosso menu tem os botões em tamanho fixo, veja aqui:
    #page-bar li a{
    margin: 0px;
    color:#000000;
    display:block;
    text-decoration: none;
    width: 150px;

    o numero 150 é a largura de cada botão, é assim que fazemos o menu ficar no tamanho certo

    ResponderExcluir
  185. Olá, estou testando o menu horizontal, mas gostaria de saber se existe uma maneira de mudar o fundo preto para transparente...Obrigado pela ateção.

    ResponderExcluir
  186. pode colocar a cor de fundo neste trecho:

    #page-bar li a{background-color: #FFFFCC;
    margin: 0px;
    color:#000000;
    display:block.....
    ....
    ....


    veja que no tutorial não tem background-color: #FFFFCC; isso é a cor de fundo....


    deixar transparente não vai adiantar pois aparece a cor de fundo do seu blog

    ResponderExcluir
  187. Olá Fabiano, tdo bem?
    Olha, eu to com uma dúvida aqui..o meu template tem esse menu, até sei editar isso..
    O que eu quero saber, é como eu crio essas páginas no blog, sem que elas apareçam direto no blog, (tipo que fiquem ocultas) e só clicando no menu para poder acessa-las..

    Obrigado desde já!!!

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

    ResponderExcluir
  189. Ola Fabiano, eu q so o "Os Skolaxadus" to aqui de novo..primeiramente quero agradecer, sua resposta foi muiito util pra mim..
    Mais agora to com outra dúvida aqui, sobre o menu horizontal deu tudo certo, eu quero saber, se tem como eu criar outro menu (ex:lateral), ou criar mais páginas, páginas estáticas (ocultas) para que eu possa usar o link e criar um menu manual no blog...


    Obrigado desde Já!

    ResponderExcluir
  190. sim pode criar outro menu vertical... apenas as paginas extras tem o limite de 10 paginas... se quiser mais terá que usar postagens do seu blog

    ResponderExcluir
  191. Tem alguma forma de criar esses posts sem que eles apareçam na página inicial, porque toda vez crio um post, pra tenta criar uma página ele fica na página inicial, e é isso que eu não quero, vi uns tutoriais que ensina esconde-los, mais não consegui fazer nenhum funcionar. o que mais me interessa, e esconder as páginas, ou os posts (ex: criando eles com marcadores) só que não aparecendo o post na página inicial, como se eu estivesse publicado uma página normal de um site.

    Obrigado...

    ResponderExcluir
  192. Mike"Japa"
    as postagens sempre vão para a pagina inicial do blog... não tem outro jeito...

    existem as paginas extras do blogger, mas são apenas 10

    ResponderExcluir