rapida.Antes de comecar precisamos achar ou criar 2 imagens para usar como botoes, 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 voce precisa hospedar as imagens em algum lugar sugiro o ImageShack.Agora vamos comecar colocar os novos botoes 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 codigo 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 facil localizar esse codigo dos botoes quando quiser fazer alteracoes nele, sua pagina editar html ficara 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;Entao clique para salvar, agora vamos colocar os links onde usaremos esses botoes, entre na pagina layout, clique em adicionar gadget, html/javascript e cole esse codigo:nome do sitenome do sitenome do sitenome do siteApenas faca as alteracoes colocando o nome e endereco dos sites que quiser, pode colocar quantos sites desejar nao existe limite. Agora e so salvar e visualizar seu blog esses links ja aparecerao com os botoes que voce fez.Ja parece tudo pronto, mas faltou explicar como alterar esses botoes, o codigo que publicamos foi apenas um exemplo, os valores que estao no codigo sao referentes ao tamanho do botao que usamos, entao quando usar suas imagens faca os ajustes necessarios.text-indent: 5px; margem esquerda do textowidth: 210px; largura do botaoheight: 30px; altura do botaoline-height: 30px; altura da linha(deve ser igual a altura do botao)Sobre a largura do botao ainda temos que verificar se o texto de nossos links nao serao grandes demais para o botao pois se o texto ocupar duas linhas a imagem do botao se repetira e certamente o efeito visual disso e pessimo para o layout, neste caso voce deve reduzir o texto do link ou refazer o botao mais largo.Outro detalhe e o porque usamos uma cor de fundo se ja fizemos o botao com uma imagem, a resposta para isso e simples: e melhor prevenir do que remediar quer dizer em caso da imagem nao carregar por qualquer motivo aparecera uma cor de fundo mesmo assim que sugerimos usar uma cor parecida com a cor do botao.A utilidade disso e, por exemplo, se o fundo do seu blog for preto e usar um botao branco, com texto preto, se o botao nao aparece por algum motivo o texto do link pode ficar invisivel devido a cor de fundo do blog, entao colocando uma cor de fundo no botao temos a certeza que pelo menos essa cor sempre aparecera junto com o link.Nossa Avaliacao Do Conteudo: