Tutorial: Caixa De Texto Para Código HTML Nas Postagens Do Blog
Autor: Bruh Vieira | Publicado: 2013-07-09T20:12:00-03:00













Hoje vou ensinar como colocar códigos HTML nas postagens do blogger, é um tutorial bem simples que pode ser muito útil para compartilhar Gadgets, banners em e muitas coisas mais; neste tutorial você vai aprender formas bem simples de criar essas caixas de texto. Vou mostrar 3 formas que deram bastante certo comigo:


1º Através do Blockquot

O blockquote é muito usado para citar frases, ou destacar pedaços de textos, pode ser usado também como caixa de texto html.

Este é p código:
&lt;blockquote&gt;(Deus)... nunca perturba a alegria dos seus filhos se não for para lhes preparar uma mais certa e maior.Alessandro Manzoni&lt;/blockquote&gt;

Exemplo da caixa:

(Deus)... nunca perturba a alegria dos seus filhos se não for para lhes preparar uma mais certa e maior.Alessandro Manzoni

&nbsp;2º Através de uma caixa de texto como esta:

ESCREVA AQUI O SEU TEXTO


Este é o código:








&lt;textarea&nbsp;cols="57"&nbsp;rows="2"&nbsp;style="background-color: white; color: black;"&gt;ESCREVA AQUI O SEU TEXTO&lt;/textarea&gt;

Campos que você poderá personalizar:

A largura, aumentando o número de colunas em: cols="57" &nbsp;&nbsp;
A altura, &nbsp;aumentando a quantidade de&nbsp;linhas&nbsp;em:&nbsp;rows="2"
A cor do plano de fundo em: background-color: white
A cor da borda e do texto dentro da caixa em: color: black


Veja esta caixa alterada de acordo com o código abaixo:


&lt;textarea&nbsp;cols="70"&nbsp;rows="5"&nbsp;style="background-color: beige;&nbsp;color: blue;"&gt;ESCREVA AQUI O SEU TEXTO&lt;/textarea&gt;






ESCREVA AQUI O SEU TEXTO



&nbsp;3º Através de uma caixa de texto com foto no plano de fundo

Este é o código:



&lt;br /&gt;
&lt;blockquote style="background-attachment: initial; background-clip: initial; background-color: white;&nbsp;background-image: url(http://www.whitegadget.com/attachments/pc-wallpapers/130362d1359002421-background-image-background-image-photos-1024x768.jpg);
background-origin: initial; background-repeat: repeat repeat; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-bottom-width: 2px; border-image: initial; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-left-width: 2px;
border-right-color: rgb(170, 170, 170); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(170, 170, 170); border-top-style: solid; border-top-width: 2px; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px;
letter-spacing: 1px; line-height: 1.4em; margin-bottom: 0px; margin-left: 30px; margin-right: 0px; margin-top: 0px; max-height: 200px; overflow-x: auto; overflow-y: auto; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; padding-top: 6px; text-align: justify; white-space: nowrap;"&gt;
&lt;div style="text-align: left;"&gt;
&lt;div&gt;
Digite o Seu testo Aqui&lt;/div&gt;
&lt;/div&gt;
&lt;/blockquote&gt;
A caixa ficará assim:







Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices, ligula et iaculis dignissim, ipsum libero rutrum diam, et adipiscing quam velit in enim. Duis aliquet fermentum dolor, vitae interdum dui aliquet quis. Nullam congue.




O link em negrito entre parêntesis é o URL da imagem que usamos nesta caixa: http://www.whitegadget.com/attachments/pc-wallpapers/130362d1359002421-background-image-background-image-photos-1024x768.jpg
Usamos um Lorem Ipsum apenas para mostrar o comportamento da caixa com um texto maior.

Como inserir o código HTML nas postagens do blogger?




Gostou do tutorial? Deixe um recadinho e um link para vermos como ficou no seu blog! Ficaremos muito contentes de saber que ajudamos a melhorar o seu blog!