In Tutoriais

Modelos de Postagem(2): Bordas, Imagens e Texto fofos!

Dando continuidade ao post sobre como usar os modelos de postagem ao nosso favor para facilitar na hora de postar, hoje vamos ver como inserir algumas coisas referente a efeitos em textos e imagens.
A gente vai diferenciar a primeira letra do post, colocar bordas diferentes, coloridas e com alinhamento nas imagens específicas em menos de 1 minutinho e pré-definir algumas imagens para aparecerem sempre na postagem, criando por exemplo, um status tipo os que aparecem no livejournal...
Vamos lá!
1. Diferenciar o estilo da primeira letra
Quando a gente lê alguns livros, como os contos de fada, geralmente, no início, sempre tem uma letra maior que o restante do texto. Isso pode ser feito nas suas postagens.
Acima de ]]</b:skin> adicione isso:

big {font-size:50px;
font-style:bold;
color: #FFCCFF;
line-height:30px;
float:left;}
Sendo que:
50px é o tamanho da letra; em color você adiciona um código de cor de sua preferência e 30px é a altura da linha.
Agora, nos modelos de postagem (Configurações-Postagens e Comentários-Modelos de Postagem), adicione: <big>LETRA</big>, substituindo LETRA pela letra inicial da sua postagem.

2. Bordas e Alinhamento em imagens específicas
Também é possível definir bordas coloridas e alinhamentos em imagens sem esforço! É um efeito super cute! Precisamos ir até o HTML do template antes e adicionar acima de ]]</b:skin> esse código:

.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
padding: 6px;
text-align: center;
background-color: #FFCCFF;
border: 1px solid #dbdbdb;
}
.alignleft{
float: left;
margin: 1px 4px 0 0;
padding: 6px;
background-color: #FFFF99;
border: 1px solid #dbdbdb;
}
.alignright{
float: right;
margin: 1px 0 0 4px;
padding: 6px;
background-color: #FFCCCC;
border: 1px solid #dbdbdb;
}
.alignnone{
margin: 1px 4px 0 0;
padding: 6px;
background-color: #CCFFFF;
border: 1px solid #dbdbdb;
}

Percebam que no código acima pode-se alterar várias coisas e cada um será aplicado a um dos quatro alinhamentos da imagem: nenhum alinhamento (none), centralizado (center), a direita (right), a esquerda (left). Para cada um, defina bordas, estilos das bordas, espessura e cores ^-^ Quando terminar, basta adicionar o código abaixo em modelo de postagem:
<img src="URL DA IMAGEM" class="aligncenter" alt="..."/>
Trocando a URL da imagem e substituindo o alinhamento da borda centralizada ("center") por none, right ou left.
3. Imagens "fixas" na postagem
Basta acrescentar em modelos de postagem:
<img src="URL DA IMAGEM"/>
Isso serve para usar num status por exemplo, ou adicionar barrinhas fixas, saudações, sobre o autor, menus com imagens mapeadas...
Agora é só "brincar" um pouquinho com todos esses códigos ^-^
Exemplo de como ficaria uma postagem usando tudo o que citei acima:
 
Someone's watching over me - Tradução (Hilary Duff)
princess
Hoje eu me achei
Eu me achei e fugi
Alguma coisa me trouxe de volta
Voz da razão que eu esqueci que tinha
Tudo que sei é que você não está aqui para dizer
o que você sempre costumava dizer
Mas está escrito no céu esta noite

Então eu não vou desistir
Não, não vou sucumbir
Quando você menos espera a vida dá voltas
E eu vou ser forte
Mesmo se tudo der errado
Quando eu ficar no escuro
Eu ainda vou acreditar
Alguém está olhando por mim...

Eu vi essa luz vermelha
E está brilhando no meu destino
Brilhando a toda hora
E eu não vou ter medo
De segui-la para onde ela me levar
Tudo o que sei é que ontem já foi
E exatamente agora eu pertenço
A esse momento, aos meus sonhos

Não importa o que as pessoas dizem
Não importa quanto tempo isso leva
Acredite em você mesmo
E você vai voar alto
E só importa o quão verdadeiro você é
Confie em você mesmo
E siga seu coração

Então eu não vou desistir
Não, eu não vou sucumbir
Quando você menos espera a vida dá voltas
E eu vou ser forte
Mesmo se tudo der errado
Quando eu ficar no escuro
Eu ainda vou acreditar
Que eu não vou desistir
Não, eu não vou sucumbir
Quando você menos espera a vida dá voltas
E eu vou ser forte
Mesmo quando tudo der errado
Quando eu ficar no escuro
Eu ainda vou acreditar...alguém está olhando por mim.
 
princess Post by: Roberta
This is me
Olá!

"Amadurecer é saber que contos de fadas ensinam a maior realidade da vida: não importa os obstáculos e as decepções, o amor sempre vence no final"

Visit:
Tumblr
DeviantArt
We heart it Facebook
Twitter
Espero que gostem e beijinhus<3
Ah sim! Se você gostou da música, veja o clipe aqui:
E se gostou da caixinha de perfil aí em cima, ó o código aqui:

<center>
<table border="0" cellpadding="0" cellspacing="0" style="width: 400px;">
<tbody>
<tr><td height="400" rowspan="2" width="300"><img alt="princess" class="alignleft" height="400" src="URL DA IMAGEM" width="300" /></td>
<td bgcolor="#FFFFCC" height="400" rowspan="2" width="10"></td>
<td align="right" bgcolor="#FFFFCC" height="50" width="300"><b><span style="color: #ff7498; font-family: Lobster; font-size: 16px;"><big>P</big>ost by: SEU NOME</span></b></td></tr>
<tr><td align="left" bgcolor="#FFFFCC" height="350" valign="top" width="300"><span style="color: #ff3366; font-family: tahoma; font-size: xx-small;">
<span style="font-size: x-small;"><b><img src="http://3.bp.blogspot.com/-GWNBXVmfq4c/UCE7BejTNwI/AAAAAAAAC-M/HH0gdOxr5zs/s1600/tumblr_m89rec8DYB1qdlkyg.gif" />This is me</b></span></span><span style="color: #ff3366; font-family: tahoma; font-size: xx-small;"> </span><br />
<center>
<span style="color: #ff3366; font-family: tahoma; font-size: xx-small;"> ESCREVA ALGUMA COISA</span></center>
<br />
<span style="color: #ff3366; font-family: tahoma; font-size: xx-small;">ESCREVA ALGUMA COISA AQUI TAMBÉM</span><br />
<br />
<span style="color: #ff3366; font-family: tahoma; font-size: xx-small;"><span style="font-size: x-small;"><b><img src="http://3.bp.blogspot.com/-GWNBXVmfq4c/UCE7BejTNwI/AAAAAAAAC-M/HH0gdOxr5zs/s1600/tumblr_m89rec8DYB1qdlkyg.gif" />Visit:</b></span>
</span><br />
<div style="text-align: center;">
<span style="color: #ff3366; font-family: tahoma; font-size: xx-small;"><b><a href="http://seulink.com">ADD UM LINK</a></b></span><br />
</div>
</td></tr>
</tbody></table>
</center>
</center>
</div>
</div>
</center>

Créditos ao Cherry Bomb pelo tutorial 1, ao True Luv pelo tutorial 2
 

Related Articles

5 comentários:

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart