Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

30/08/2012

Fundo no Texto da Postagem + Fonte caligráfica

Muita gente gostou da carta de um blog infeliz, que fiz ontem para vocês. Mas a questão de hoje é: como fazer para colocar um fundo no texto de uma postagem sem ter que mexer no HTML do template.
Mas antes de mostrar-lhes o maravilhoso código, preciso explicar o porquê de usar imagens no fundo do texto se o mais óbvio (e mais fácil) seria simplesmente escrever o texto na imagem através de um editor qualquer.
Vocês já devem ter visto por aí alguns blogs que fazem postagens através de imagens. Fica lindo, certamente, mas textos escritos trazem mais visitas, pois aumenta as chances de seu blog aparecer nos resultados dos mecanismos de buscas. Também pode deixar seu blog mais atrativo, se você souber colocar os fundos com harmonia, é claro. Nunca, never, jamais encha seu blog de imagens pesadas, use esse recurso com equilíbrio, please.
Você também pode, por exemplo, colocar bordas no seu texto, marcas d'água por trás, aspas no começo e no final... E incrementar cada vez mais para que fique atraente, de acordo com seus conhecimentos de HTML. Você verá que esse código nos permite uma gama infinita de possibilidades, basta dar asas à imaginação.

Tutorial: Colocando fundo nos textos do blog

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.

Espero que tenham gostado dos tutoriais!!! Se tiverem alguma dúvida, deixem nos comentários.

Mil Sweetkisses,
5 Comentários
Comentários

5 comentários:

  1. adorei o tutorial
    adoro ver tutoriais, pq aprendo a fazer mts coisas
    mas as vezes sou meio tapada na hora de fazer hasuhsuhua
    adorei seu blog
    estou te seguindo
    se quiser olhar o meu fique a vontade

    ResponderExcluir
  2. Ainda não tinha pensando em colocar uma imagem no fundo de texto.. interessante a ideia... bjos

    ResponderExcluir
  3. Adorei o tutorial!! Essa é a fonte que você usou né. Achei ela muito fofa *--*
    Vou tentar fazer uma caixinha de texto assim ^^

    ResponderExcluir
  4. Amei o novo fundo do DSM, unh...desculpa não te visitar com mais frequencia..., a cartinha até me inspirou a voltar a escrever no meu blog rsrs, e adorei o tutorial, bjus!!!

    ResponderExcluir
  5. Gostei do Tuto Muito Legal, gostei da idéia de fonte caligrafica...

    Bjuss...

    http://mimiycosmeticos.blogspot.com.br/

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados