Como fazer e colocar botões no blog

No início parece um pouco complicado, mas calma não à motivo para desespero, ao longo deste post iremos ensinar você a criar e colocar botões de várias formas, em seu blog, e você verá que não a nada de complicado nisso. Iremos usar o estilo CSS para colocar esses botões em seu blog.

A primeira coisa que se tem a fazer é encontrar ou criar 2 imagens para usar como botões, recentemente publicamos um artigo falando sobre Criar Imagens com o PowerPoint, elas precisam ser do mesmo tamanho porque usaremos uma quando o blog aparece e a outra quando colocamos o mouse sobre o link. Depois disso você precisa hospedar as imagens em algum lugar sugerimos o 4Shared.com.

Agora vamos começar colocar os novos botões no seu blog, primeiro vamos colocar o estilo CSS, entre na página editar html, procure por body{...tem varias coisas aqui....}, antes da palavra body coloque o código abaixo:

.botao a{text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-color: #F2DBB9;
background-image: url(URL DA IMAGEM);
width: 210px;
text-indent: 5px;
height: 30px;
display: block;
line-height: 30px;
font-size: 12pt;
}
.botao a:hover{
color: #000099;
background-color: #cbe1ec;
background-image: url(URL DA IMAGEM);
}

Você deve trocar a frase URL DA IMAGEM, pela url da Imagem que você vai usar.

Assim fica bem fácil localizar esse código dos botões quando quiser fazer alterações nele, sua página editar html ficará assim:

/* Primary layout */ 
.botao a{text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-color: #F2DBB9;
background-image: url(URL DA IMAGEM);
width: 210px;
text-indent: 5px;
height: 30px;
display: block;
line-height: 30px;
font-size: 12pt;
}
.botao a:hover{
color: #000099;
background-color: #cbe1ec;
background-image: url(URL DA IMAGEM);
}
body {background-color: $mainBgColor;

Então clique para salvar, agora vamos colocar os links onde usaremos esses botões, entre na página layout >> adicionar gadget >> html/javascript e cole esse código:

<div class="botao">
<a href="endereço" target="_blank">nome do site</a>
<a href="endereço" target="_blank">nome do site</a>
<a href="endereço" target="_blank">nome do site</a>
<a href="endereço" target="_blank">nome do site</a>
</div>

Apenas faça as alterações colocando o nome e endereço dos sites que quiser, pode colocar quantos sites desejar não existe limite. Agora é só salvar e visualizar seu blog esses links já aparecerão com os botões que você fez.

Já parece tudo pronto, mas faltou explicar como alterar esses botões, o código que publicamos foi apenas um exemplo, os valores que estão no código são referentes ao tamanho do botão que usamos, então quando usar suas imagens faça os ajustes necessários.

text-indent: 5px; margem esquerda do texto
width: 210px; largura do botão
height: 30px; altura do botão
line-height: 30px; altura da linha(deve ser igual à altura do botão)

Sobre a largura do botão ainda temos que verificar se o texto de nossos links não serão grandes demais para o botão pois se o texto ocupar duas linhas a imagem do botão se repetirá e certamente o efeito visual disso é péssimo para o layout, neste caso você deve reduzir o texto do link ou refazer o botão mais largo.

Obrigado!