domingo, 17 de outubro de 2010

Caixa de texto com barra de rolagem

Vocês já devem ter visto em diversos blogs, principalmente nos que publicam códigos, uma caixinha onde o código fica dentro dela e na qual aparece uma barra de rolagem (scroll). Esse efeito, em HTML, se chama textarea.
A textarea é muito útil, já que economiza espaço dentro do post.
Como colocar uma caixa de texto com barra de rolagem
Para colocar uma caixinha com scroll em seus posts, entre no editor do Blogger, clique na aba editar HTML e use as tags <textarea></textarea> no texto que deverá ficar dentro da caixa. Nas imagens abaixo, coloquei um exemplo usando o antigo editor de posts do Blogger, mas o método funciona também no editor atualizado e no Windows Live Writer. (clique sobre as imagens para ampliá-las)
Na primeira imagem, vemos a aba “editar html” contendo as tags “textarea”; já na segunda, vemos a aba “escrever”, com a caixinha já pronta:
textarea caixa
Estilizando a caixa de texto com CSS
Como vocês podem notar, a caixinha não é lá muito bonita, mas um pouco de CSS podemos mudar completamente seu visual ;)
Entre no painel do Blogger, clique em design e depois em editar HTML. Usando o Ctrl+F do teclado, procure por ]]></b:skin> dentro do HTML do template. Agora, cole o seguinte código logo acima dessa tag e salve.
/** textarea */
textarea {
border: 3px double #ccc;
background: #efefef;
width: 80%;
height: 100px;
}
Vamos para um exemplo prático? Abaixo, segue o código do Translator Widget:

Podemos alterar a cor da borda e do plano de fundo, bem como largura e altura:
/** textarea */
textarea {
border: 3px double #ccc; (espessura e cor da borda)background: #efefef; (plano de fundo da caixa)
width: 80%; (largura)
height: 100px; (altura)
}
Veja uma tabelas de cores neste link – Tabela de cores web e boa diversão.

Sobre o autor: Juliana é a fundadora deste blog. Nascida em 1970, é médica e, nas horas vagas, blogueira. Também é top colaboradora do fórum de ajuda do Blogger. Twitter l Google Plus l Facebook l

15 comentários:

  1. Oi, Juliana

    Como é simples! \0/
    Sempre tive a curiosidade de saber como o pessoal fazia essa caixinha. Até pensei em pesquisar o procedimento, mas como não trabalho com códigos acabei deixando de lado. Entretanto, é bom conhecer mais um truque para utilizar no blog. Nunca se sabe quando vamos precisar.

    Valeu pela dica.

    Forte abraço

    ResponderExcluir
  2. oi aqui no meu nao deu certo fica so um quadrado.alguma dica a mais pra mi ajudar?
    obrigado

    ResponderExcluir
  3. Nossa, como algumas coisas são tão simples não é mesmo? Agora sei o que fazer quando quiser ocupar menos espaço num post.

    @Robhym

    ResponderExcluir
  4. Muito bom Juliana!
    Procurava isso à tempos.
    Valeu pela dica!

    ResponderExcluir
  5. Como eu faço para colocar imagens com link dentro de um texteara ??
    Ou alguem me esplica de como colocar imagens dentro de uma caixa com barra de rolagem imagens com links,por favor ??

    ResponderExcluir
  6. Olá não entendi como colocar o código no HTML do template "procure por ]]> dentro do HTML do template. Agora, cole o seguinte código logo acima dessa tag e salve. ACIMA DA TAG? QUER DIZER ANTES OU DEPOIS DA TAG?...ME PERDOE MAS NÃO ENTENDI

    ResponderExcluir
  7. Juliana consegui! Minha cx de texto estilizada ficou lindaaaa...Obrigada!
    Mesmo sem entender HTML troquei o template e ficou lindo...já estou recebendo mensagens elogiando. Ficou mesmo com cara de Profissional.
    Assino seu feed e suas dicas estão a disposição no meu site. Se tiver um tempinho me visita e deixa mensagem ok
    http://granatotal.blogspot.com

    ResponderExcluir
  8. Juliana, isso me ajudou muito.
    Valew
    Se quiser ver meu blog, está aqui:
    http://animes-pepeto.blogspot.com/

    ResponderExcluir
  9. Juliana,essa caixa està com defeito.
    Fiz como vocêe disse no tutorial.
    Sò que a hora que publico os còdigos sai um monte de: '
    ' no còdigo que eu não adicionei estas tags.

    ResponderExcluir
  10. Ô Lukas, se deu certo pra todo mundo, com esforço vai dar certo com você também.

    ResponderExcluir
  11. Oi!Apliquei este código no meu texto e estou com um probleminha....ele até funcionou mas não como eu queria primeiro ficou com várias caixas de texto(acredito que seja pq tem links no meio do texto para direitos autorais) aí dei uma fuçada e consegui colocar uma só mas está aparecendo os códigos em vez do texto...acho que deve estar faltando algum codigo para feixar a pagina...só ñ sei qual...me ajuda por favor

    ResponderExcluir
  12. Há eu gostaria de saber como configurar as caixas uma diferente da outra no meu caso vou colocar nas postagem e em um gadget.

    Desde ja muito obrigada

    ResponderExcluir
  13. Você me salvou o dia, eu tava atraz desse codigo a dias, muito obrigado!

    ResponderExcluir
  14. valeu o seu site e o que mais ajuda todos os blogeiro iniciantes obrigado.

    ResponderExcluir