Hey, pessoal! Tudo bem?
Recentemente, na página
Peça Tutoriais, eu recebi um pedido de
tutorial de
como colocar imagem no título de postagem.
Eu fiquei com vontade de postar isso não só por que é um pedido, mas por que eu também tinha vontade de ensinar isso!
Bem, vamos logo ao assunto.
Abra seu
editor de imagem (usaremos o
Fireworks) e crie um novo arquivo com
625 de largura por
39 de altura:
Agora vamos começar a edição.
Primeiro, faça um
retângulo.
Depois disso, troque as
cores para as
cores do seu
template.
Agora, coloque alguns
efeitos... Uma boa é fazer um simples
retângulo branco por cima e deixar com
pouca opacidade:
Pra terminar, coloque algum
objeto,
pinguim, ou
puffle.
Bem, agora salve.
Agora vá em algum site que hospede imagens (como
Imgur ou
Tinypic). Agora vá no
HTML do seu blog e procure por
.post h3 {. Quando achar, troque tudo de lá por este código:
.post h3 {
background-image:url(Direct Link da Imagem);
color:#ffffff;text-shadow:1px 1px 0px #ffffff;font-size:18px;font-weight:regular;
line-height:32px;
letter-spacing:-1px;padding:0 0 0px;text-align:center;height:36px;
margin-left:-5px;padding-left:10px;padding-top:3px
}
}
Onde tem
Direct Link da Imagem, troque pelo
direct link da imagem que você hospedou.
Depois, salve o
HTML e teste!
E é isso! Espero que tenham aprendido! Até mais!
~Son Ivson
