TEMPLATES E MAIS

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.