Customize sua própria caixa de texto

domingo, 20 de setembro de 2009

Quando comecei a blogar, uma das coisas que achei mais difícil foi achar uma caixinha de texto atraente, que não fosse igual a todas as caixas de texto que eu via em todos os blogs. É claro que eu ainda não entendia nada de html e por tanto, não conseguiria customizar uma caixinha simples. Cheguei a indicar o site que eu tinha encontrado com caixinhas mais bonitas. Agora, que sei ler os códigos (ou pelo menos alguns deles), vou explicar como vocês devem fazer para customizarem suas próprias caixinhas, deixando-as do jeito que vocês quiserem!

Primeiro vocês devem entender o <textarea>. Este é o html que permite inserir textos e códigos html sem que eles sejam modificados pela codificação do seu Blogger. Desta forma, tudo o que vocês escreverem entre <textarea> ficará exatamente do jeito que vocês colocarem. Vejamos a codificação simples de uma caixa de texto:

<textarea rows="2" cols="20"> SEU TEXTO AQUI </textarea>


A caixa de texto ficará assim:




Muito fácil não é mesmo? Agora vamos continuar analisando o código que eu passei acima. Notem que rows, determina a altura de sua caixinha e cols, determina a largura. Desta forma, vocês podem deixar a sua caixinha com a largura e a altura que preferirem e se o texto contido dentro dela ultrapassar o espaço, aparecerão barras de rolagem para que seus leitores possam copiar tudo o que está lá dentro sem problemas. Até agora nada de mais, então vamos aprender a dar cores para o fundo, a borda e o texto.

Para isso vocês devem aplicar a variável "style". Tudo o que vier após o style dará forma à sua caixinha. Vejamos algumas definições:

  • Cor do fundo: você utilizará o background-color
  • Cor da linha: você utilizará o border
  • Cor do texto: você utilizará color
  • Engrossar a borda: utilize a pontuação em pixel antes de definir a cor no border

Vejam o código de uma caixinha de texto de fundo azul, borda vermelha e texto azul escuro:

<textarea rows="2" cols="20" style="border: 5px solid rgb(255, 0, 0); background-color: rgb(248, 248, 255); color: rgb(0, 0, 128);"> SEU TEXTO AQUI </textarea>





Notem que após o style, devemos colocar um sinal de igual e abrir aspas. As definições que vierem dentro do "style" ficarão separadas por ponto e vírgula. A borda está definida em 5px solid, sendo que o 5 vocês podem trocar por outro número qualquer e, as cores estão em Java Script e são representadas por rgb(definição da cor) mas, se vocês quiserem colocar as cores também em html não há problemas. O código ficaria assim:

<textarea rows="2" cols="20" style="border: 5px solid #FF0000; background-color: #F8F8FF; color:#000080;"> SEU TEXTO AQUI </textarea>
O resultado continuará sendo o mesmo. Para verem as cores que podem ser aplicadas, visitem esta Tabela de Cores que considero bem completa. Agora, uma prova final para que não tenham dúvidas com relação a barra de rolagem:



Prontinho! Este é o código banner do Super DicaSSS, vejam que apareceu a barra de rolagem. Vamos customizar? Agora vocês podem ter sua caixinha de texto nas cores e tamanhos que preferirem.
FeedGostou do artigo? Assine nosso Feed e saiba tudo o que acontece no Super DicaSSS!!!

10 comentários:

Mary Miranda disse...

Oi, Jaque!
Maneiríssima essa sua dica!
O caso é q eu sou ainda tão medrosa p/ mexer em html...
Quando consegui fazer um banner (ainda q simples), achei aquilo o máximo q poderia fazer! rsrsrs
Qualquer hora me encorajo e modifico certas coisas q preciso mudar...
Valeu!
Bjs,
Mary :-)

edilene - amor disse...

genial
estava pesquisando sobre barra de rolagem,
parece que advinhou
bjs
jac
:)

Jaqueline Amorim disse...

Oi Mary, no início é assim mesmo, agente começa engatinhando e a curiosidade e vontade de ir fuçando e apredendo faz agente avançar! Beijos!!!

Oi Edilene!!!! Que bom que gostou! Beijos!

Canal Adobe Photoshop disse...

Bom dia Jaqueline. Fiquei um bom tempo espiando as postagens de seu blog. Gostei muito do conteúdo que você disponibiliza e não pude deixar de assinar para receber as atualizações por e-mail.

Parabéns pelo excelente trabalho.

Herbert Drummond disse...

Olá Lady Jackie,

Passando, deixando um carinhoso abraço e pegando algumas dicas.

Jaqueline Amorim disse...

Canal Adobe Photoshop: Obrigada pelo carinho das visitas, tenho andado um pouco sumida mas tento publicar coisas que realmente sejam motivos de dúvidas. Fico feliz que tenha gostado do espaço. Volte sempre! :)

Herbert querido! É sempre uma felicidade enorme vê-lo por aqui! Beijos doces!!

Anônimo disse...

Em que lugar eh colocado o codigo de barra de rolagem?

Jaqueline Amorim disse...

Olá anônimo! Você pode inseri-lo em qualquer lugar de sua Sidebar!! :)

Yse Falcão disse...

Por favor! Aonde eu pego as cores para mudar a caixinha? Essa parte eu não entendi! Rs

Jaqueline Amorim disse...

Oi Yse, sobre a frase "Tabela de Cores" eu disponibilizei o link que te direciona para o site. É só clicar com a seta do mouse encima da frase. Beijos!

Postar um comentário

Oi obrigada por comentar! Assim que possível responderei você aqui no blog! Volte sempre! :)

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina
 

  ©Template 'Super DicaSSS' by Jaqueline Amorim - 2010

TOPO