Tutorial:Fundo notexto da postagem + Fonte caligráfica

Tutorial: Colocando fundo nos textos do blog

Olà docinhos!Como estão?Bom aqui vai o tutorial,e no final do post terá os créditos!

O código que vou colocar aqui foi adaptado de outro tuto do blog Cereja Rocks, que ensina como colocar bordas em vídeos (se quiser colocar bordas em vídeos, visite lá). É bem simples, mas vai exigir um pouco de paciência caso você queira incrementá-lo mais.
Comecemos preparando a imagem. Eu recomendo que você escreva seu texto antes numa postagem, formate-o no tamanho desejado, visualize e tire um PrintScreen para conseguir o tamanho correto. Depois da imagem estar pronta, hospede-a no site da net de sua preferência. Se quiser saber quais são os melhores, vá nesse link.
Agora entre na sua postagem e clique em HTML (ao lado de escrever). Você deve colar o seguinte código no HTML:

<center>

<div style="background: url(ENDEREÇO_DA_IMAGEM) no-repeat top left; font-family: Arial,sans-serif; font-size: 14px; height: 920px; width: 582px;">SEU TEXTO AQUI</div></center>

Coloque o endereço da imagem que você acabou de hospedar em ENDEREÇO_DA_IMAGEM e escreva (ou cole) seu texto em SEU TEXTO AQUI. Em height, altere o número pela altura de sua imagem e em width troque o número pela largura dela. O font-family é a fonte do seu texto, fonte-size o tamanho dela.
Você também pode alterar alguns códigos para adequar seu texto à imagem. Por exemplo, para alterar a posição da imagem no fundo , troque o trecho em vermelho por:

repeat - repetir por todo o fundo
repeat-y - repetir na vertical
repeat-x - repetir na horizontal
no-repeat - não repetir
top - para que fique no topo
bottom - para que fique abaixo
left - para que fique à esquerda
right - para que fique na direita
center - para que fique no centro (center center deixa a imagem exatamente no centro do texto)
x% y%  - para que fique na distância em porcentagem das margens do documento, horizontal e vertical (Ex: background: url(URL) no-repeat 80% 60%;)

Se quiser que seu texto tenha uma margem (por exemplo, se você for colocar uma borda como fiz abaixo), acrescente padding: 10px; antes de fechar as aspas e troque o número 10 pela distância que você quer que seu texto tenha da borda da imagem, ficará assim:

<center>
<div style="background: url(ENDEREÇO_DA_IMAGEM) no-repeat top left; font-family: Arial,sans-serif; font-size: 14px; height: 313px; width: 582px; padding: 10px;">SEU TEXTO AQUI</div>
</center>

Se o espaço das quatro margens for diferente, coloque padding: 10px 20px 30px 40px; sendo que 10 é a margem de cima, 20 é da direita (se for colocar margem na direita, deduza o valor que você colocar aqui de width. Ex: se eu colocar 80px, mudarei para width: 502px;) 30 a de baixo e 40 a da esquerda. Troque esses valores pela distância desejada e vá visualizando a postagem até o texto caber.
Você também pode colocar antes de fechar as aspas qualquer outro código que você conheça, basta testar e usar a imaginação.

Fonte caligráfica:

Para colocar no texto a fonte caligráfica que eu pus na cartinha, eu usei o seguinte truque, que pode ser usado com qualquer outra fonte:

Vá em Modelo> Personalizar (ou Design> Designer do Modelo) e clique na guia "Avançado". Escolha um item que no seu blog esteja escondido. Aqui no DSM eu escolhi o "Título do blog", já que meu título é uma imagem. Você pode escolher também a "Descrição do blog" se seu blog não tiver descrição.
No item "Fonte" selecione a fonte "Dancing Script" (ache-a na lista) e salve o modelo. Nada mudará no seu blog, mas se você não fizer essa etapa a fonte não vai funcionar.
Agora quando for escrever a postagem, coloque em  "font-family" o nome "Dancing Script" no lugar de "Arial". Vai ficar assim:

<center>

<div style="background: url(ENDEREÇO_DA_IMAGEM) no-repeat top left; font-family: Dancing Script,sans-serif; font-size: 14px; height: 920px; width: 582px; padding: 10px;">SEU TEXTO AQUI</div></center>

Visualize sua postagem e veja se a fonte mudou. No formulário de postagem a fonte não aparece, só na visualização.
Super créditos ao:Doce Sonho de Menina
Beijos ^-^