Menu com barra de rolagem

Algumas pessoas já me perguntaram sobre o menu deste blog que tem botões com barra de rolagem. O código para fazer esse menu é dividido em duas partes:
O estilo CSS do botão que deve ser colocado junto com o restante do CSS do seu site:


.botao a, .botao a:visited{
width: 220px;
color: #000000;
text-decoration: none;
padding-top: 3px;
display: block;
padding-bottom: 3px;margin-bottom: 1px;
background-image: url(Imagem do botão);
font-family: "Comic Sans MS";
font-size: 10pt;
text-align: left;
text-indent: 6px;
}
.botao a:hover{
color: #0000FF;
background-color: #FFFFCC;
background-image: url(Imagem do botão quando o mouse estiver sobre ele);
}


E a outra parte que deve ser colocada onde o menu irá aparecer, no caso do Blogspot isso é na pagina layout, adicionar elemento, html/javascript.


<div style="width: 240px;height: 295px; overflow: auto;border: 1px
solid #999999">
<div class="botao">
<a href=”Endereço do Site” target="_blank">Nome
do Site</a>
</div></div>


Na parte do CSS a linha background-image: url(Imagem do botão); e background-image: url(Imagem do botão quando o mouse estiver sobre ele), você deve hospedar a imagem em algum site e colocar a url aqui. Se preferir pode usar uma cor de fundo trocando essas linhas por background-color: #CCCCCC; escolhendo a cor que desejar, caso use uma cor de fundo em vez de uma imagem sugiro que coloque bordas(adicione essa linha jundo com a outra border: 1px solid #333333;) está também pode ser de qualquer cor. Lembre-se de colocar a cor de fundo e borda nas duas partes do CSS. Sobre o tamanho pode ser alterado como você quiser: width: 240px é a largura do menu e width: 220px é do botão, quando fizer alterações faça nas duas larguras.

19 comentários :

  1. Ol´! Td bem? Eu gostariade saber como q faço pra ter um menu de parceiros igual ao seu. Gostei muito. Qq coisa me mande email ou entre no meu blog. Seu site eh bemlegal e util hein. parabéns. Vlw! FUi!

    ResponderExcluir
  2. Você poderia me indicar em que lugar do css eu coloco este código e onde fica o css no código do blogspot?
    Abraço e obrigado!

    ResponderExcluir
  3. Gostaria de saber como colocar os meus marcadores em uma janela com barra de rolagem, parecida com esta que está acima a direita ou como a janela do conteúdo do elblogdenya.blogspot.com. Você sabe como eu faço isso? Um abraço e obrigado.

    ResponderExcluir
  4. oi estou tendo muito trabalho para deslocar a coluna do meu blog para a direita, será que vc poderia ME DAR UMA MÃOZINHA?
    BJOS BOM FINL DE ANO!

    ResponderExcluir
  5. Srta.Lua

    pelo que entendi você quer aumentar o espaço entre as colunas, entre na pagina layout, depois editar html e procure por:

    #outer-wrapper {
    width:740px;
    margin:0 auto;
    text-align:left;
    font: italic normal 100% Arial, sans-serif;
    }

    e aumente um pouco o valor 740, isso faz o blog ficar mais largo e portanto as colunas ficam mais afastadas. Mais para baixo encontrará essa mesma palavra width com outros valores, todas elas são larguras que você também pode alterar :sidebar(menu), main(coluna principal)

    ResponderExcluir
  6. Poxa gostaria de saber como posso ter uma barra dessa igual a sua que esta escrito arquivo do blog para poder separar as coisas do meu blogger vlw

    ResponderExcluir
  7. We Ediçãoisso são imagens de fundo no titulo da sidebar

    é só entrar na pagina editar html e colocar um fundo no estilo h2, consulte nosso guia rapido sobre imagem de fundo

    ResponderExcluir
  8. Como faço para criar esse menu "Arquivo do Blog" que esta no canto inferior direito da tela?

    walparente@gmail.com

    ResponderExcluir
  9. Wallace Parente, o nosso arquivo não tem nada de especial, entre na pagina layout, adicionar gadget, arquivo e verá as opções entre elas menu suspenso

    ResponderExcluir
  10. Obrigado Fabiano.

    Na verdade vc me ajudou a descobrir a ferramenta q eu procurava para criar no meu blog: "Menu Suspenso"

    ResponderExcluir
  11. iae manblz.
    eu gostaria de saber como muda o jeito da barra ali do canto,mostra um jeito meio estranho no começo eu queria trocar

    ResponderExcluir
  12. Cs1.6
    não entendi o que está querendo... mudar o inicio do que?

    ResponderExcluir
  13. omg omg omg *-*
    era isso que tava procurando *-*
    em todos sites que achava, só tinham menus prontos~
    yay, obrigada~

    ResponderExcluir
  14. eu gostaria de colocar uma imagem ao lado , como posso ?

    ResponderExcluir
  15. Angelo e Qui
    no código css que mostramos tem onde colocar imagem

    background-image: url(Imagem do botão);

    mas se quiser uma imagem como link o código é assim

    <a href="http://www.dicasparablogs.com.br"><img src="endereço da imagem" border="0" /></a>

    ResponderExcluir
  16. Fabiano, sou professora e tenho um blog, gostaria de colocar um menu com barra de rolagem, mas não conseguir, você poderia me explicar onde fica esse menu suspenso no gadget.? meu blog é: http://edleudasam.blogspot.com
    De já agradeço a consideração.
    beijos

    ResponderExcluir
  17. A CAMINHO DO FUTURO
    menu suspenso é como usamos o arquivo do blog.

    o código que falamos aqui é para colocar uma barra de rolagem em uma lista de links, ou seja você colocaria o código num gadget de html/javascript com quantos links quiser só repetindo o trecho
    < a href=”Endereço do Site” target="_blank" >Nome
    do Site< /a >

    e aparece a barra de rolagem para a lista não ficar longa demais e ocupar muito espaço na pagina

    ResponderExcluir
  18. boa tarde....td certo?
    como faço pra fazer um menu como essa desse site? "http://www.baixarsertanejo.com/"

    pode me explicar?

    abraços

    ResponderExcluir
  19. está falando da barra de rolagem no menu dos marcadores? no exemplo que citou o menu artistas?

    se for é só colocar no html do blogger o código

    #Label1 {height: 300px; overflow: auto}


    e ajustar o valor 300 para o tamanho que desejar

    ResponderExcluir