Caixa de link-me personalizada

A-Yo! (cansei de dizer hello) . Como vocês estão cherries? Aproveitando bem o feriado ou só babando pelos ovos de páscoa que estão em cima da geladeira e que você não pode abrir antes do domingo? >.<
Aqui em casa não temos essa tradição, então estou bem feliz e cheia de espinhas com meus chocolates.

O tutorial de hoje é bem simples, mas quando se quer fazer um layout perfeito, qualquer detalhe faz a diferença não é? Irei ensinar como personalizar aquela caixa de código bem pequena que usamos para por o código do banner de link-me. O nome "formal" dela é text area, e personalizá-la é bem simples. Veja como fica:

Para fazer a sua é bem simples. Copie o código abaixo e cole em um gadget de HTML/Javascript em seu blog:

Código

<p align="center"><img src="URL_DO_BANNER"/><br />
<textarea onfocus=this.select() onmouseover=this.focus() rows="3" cols="10" name="textarea" style="font-family: verdana; font-size:10px; color: #000; border:1px solid #000; background-color:#fff; width: 120px;">
<a href="LINK_DO_SEU_BLOG" target="_blank"><img src="URL_DO_BANNER" border="0" /></a>
</textarea>
</p>

Você só precisa colocar a url do seu banner de link-me e o link do seu blog nos lugares indicados, e alterar a fonte, cor de fundo e etc. nas partes que estão em cinza. Para quem não sabe, aqui a explicação de cada código:

Font-family: O tipo de fonte da letra (Ex: Arial, Calibri, Georgia)
Font-size: tamanho da fonte
Color: Cor do texto
Border: Estilo da borda você pode mudar o tamanho, a cor e o tipo de borda.
Background: Cor de fundo da caixa
Width: Largura em pixels da sua caixinha

Espero que tenha ficado bem claro. Qualquer dúvida, não hesitem em perguntar. Pode demorar um pouco, mas eu respondo.
Por hoje é só, não esqueça de deixar seu recadinho nos comentários ♥

Gostou deste tutorial e quer reblogar? Leia as regras primeiro!