Como colocar botões no blog
Autor: Julio | Publicado: 2010-12-08T13:53:00-08:00

Descrição:  Para fazer botões no seu site ou blog o jeito mais fácil é usar um estilo CSS para colocar essa imagem do botão como fundo de um texto(seus links).    Calma parece um pouco complicado, mas são poucas linhas de códigos e depois colocar ou modificar os botões será uma tarefa muito simples e rápida.Antes de começar precisamos achar ou criar 2 imagens para usar como botões, 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 sugiro o ImageShack.Agora vamos começar colocar os novos botões no seu blog, primeiro vamos colocar o estilo CSS, entre na pagina 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(http://img10.imageshack.us/img10/5389/overuar.jpg);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(http://img254.imageshack.us/img254/6578/outa.jpg);}Assim fica bem fácil localizar esse código dos botões quando quiser fazer alterações nele, sua pagina 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(http://img10.imageshack.us/img10/5389/overuar.jpg);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(http://img254.imageshack.us/img254/6578/outa.jpg);}body {background-color: $mainBgColor;Então clique para salvar, agora vamos colocar os links onde usaremos esses botões, entre na pagina layout, clique em adicionar gadget, html/javascript e cole esse código:nome do sitenome do sitenome do sitenome do siteApenas 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 textowidth: 210px; largura do botãoheight: 30px; altura do botãoline-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.Outro detalhe é o porquê usamos uma cor de fundo se já fizemos o botão com uma imagem, a resposta para isso é simples: é melhor prevenir do que remediar quer dizer em caso da imagem não carregar por qualquer motivo aparecerá uma cor de fundo mesmo assim que sugerimos usar uma cor parecida com a cor do botão.A utilidade disso é, por exemplo, se o fundo do seu blog for preto e usar um botão branco, com texto preto, se o botão não aparece por algum motivo o texto do link pode ficar invisível devido à cor de fundo do blog, então colocando uma cor de fundo no botão temos a certeza que pelo menos essa cor sempre aparecerá junto com o link.Nossa Avaliação Do Conteúdo: