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á!
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:
Acima de ]]</b:skin> adicione isso:
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.
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:
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:
Agora é só "brincar" um pouquinho com todos esses códigos ^-^
Exemplo de como ficaria uma postagem usando tudo o que citei acima:
<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)
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.
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.
 |
Post by: Roberta | |
 This is me "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 |
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:
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilznKXHcShi0fb-Ws0nDxs4KPOirvJ2wDXknnfBReBID_Aygg6S6atj5_bFJZ5oHCubljN8DJMgdRmwCQD6ZA8virs_OSeGeQelxN9EFo2M0wuI1T7XiDSgnR13oMXwN8AvtS2BVjweLk/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilznKXHcShi0fb-Ws0nDxs4KPOirvJ2wDXknnfBReBID_Aygg6S6atj5_bFJZ5oHCubljN8DJMgdRmwCQD6ZA8virs_OSeGeQelxN9EFo2M0wuI1T7XiDSgnR13oMXwN8AvtS2BVjweLk/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
Sou apaixonada por seus tutoriais *O* E esse layout tá kawaii demaisss menina!
ResponderExcluirObrigada!!!
ResponderExcluirBeijus<3
Que legal, gostei até das molduras :3
ResponderExcluirBjs
Obrigada e que bom que gostou ^^
ExcluirBeijinhus<3
Adorei >< hihihi
ResponderExcluir