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:
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.
Podemos alterar a cor da borda e do plano de fundo, bem como largura e altura:
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:
 |  |
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 */Vamos para um exemplo prático? Abaixo, segue o código do Translator Widget:
textarea {
border: 3px double #ccc;
background: #efefef;
width: 80%;
height: 100px;
}
Podemos alterar a cor da borda e do plano de fundo, bem como largura e altura:
/** textarea */Veja uma tabelas de cores neste link – Tabela de cores web e boa diversão.
textarea {
border: 3px double #ccc; (espessura e cor da borda)background: #efefef; (plano de fundo da caixa)
width: 80%; (largura)
height: 100px; (altura)
}
14 Comments
Oi, Juliana
ResponderExcluirComo é 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
oi aqui no meu nao deu certo fica so um quadrado.alguma dica a mais pra mi ajudar?
ResponderExcluirobrigado
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.
ResponderExcluir@Robhym
Muito bom Juliana!
ResponderExcluirProcurava isso à tempos.
Valeu pela dica!
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
ResponderExcluirJuliana consegui! Minha cx de texto estilizada ficou lindaaaa...Obrigada!
ResponderExcluirMesmo 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
Juliana, isso me ajudou muito.
ResponderExcluirValew
Se quiser ver meu blog, está aqui:
http://animes-pepeto.blogspot.com/
Juliana,essa caixa està com defeito.
ResponderExcluirFiz 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.
Ô Lukas, se deu certo pra todo mundo, com esforço vai dar certo com você também.
ResponderExcluirValeu a dica, coloquei no meu Blog
ResponderExcluirOi!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
ResponderExcluirHá eu gostaria de saber como configurar as caixas uma diferente da outra no meu caso vou colocar nas postagem e em um gadget.
ResponderExcluirDesde ja muito obrigada
Você me salvou o dia, eu tava atraz desse codigo a dias, muito obrigado!
ResponderExcluirvaleu o seu site e o que mais ajuda todos os blogeiro iniciantes obrigado.
ResponderExcluir