HMB

Vou mostrar hoje como fazer botões usando CSS, é bem simples basta colocar os códigos nos lugares certos, veja abaixo:
.botao a{
width: 220px;
color: #000000;
text-decoration: none;
display: block;
font-family: "Comic Sans MS";
font-size: 10pt;
text-align: left;
background-color: #33FFFF;
border: 1px solid #0000CC;
padding: 3px;
}
.botao a:hover{
color: #0000FF;
background-color: #FF9966;
border: 1px solid #FFFF00;
}

Coloque essa parte junto com os demais estilos CSS da sua pagina, isso fica na pagina editar HTML. É bem fácil, procure por:


body{....}
img{...}
a:link{....}
No seu blog terá muitos outros códigos além desses.


Este código é um modelo, você pode mudar praticamente tudo nele, veja o que cada parte faz:


width: largura do botão
color: cor da fonte
text-decoration: none; retira o sublinhado
font-family: "Comic Sans MS"; tipo da fonte
font-size: 10pt; tamanho da fonte
text-align: left; alinhamento
background-color: #33FFFF; cor do fundo
border: 1px solid #0000CC; cor, tipo, e largura da borda
padding: 3px; espaço entre o texto e as bordas

Se quiser também pode usar uma imagem como fundo, mas use uma imagem do tamanho exato do botão, para fazer isso troque background-color: #33FFFF, por background-image: url(URL DA IMAGEM);

Agora vamos a segunda parte, colocar os botões no site, entre na página layout, adicionar gadget, html/javascript e coloque o código abaixo:
<div class="botao">
<a href="URL DO SITE">NOME DO SITE</a>
<a href="URL DO SITE">NOME DO SITE</a>
<a href="URL DO SITE">NOME DO SITE</a>
<a href="URL DO SITE">NOME DO SITE</a>
</div>
Com isso podemos colocar quando links quisermos e não é difícil fazer, depois somente vamos adicionando mais links e se quisermos mudar os estilos dos botões somente precisamos mexer no estilo CSS que foi mencionando acima.