Olá, quanto tempo! Espero que tenham percebido que o Sparks está de nova aparência, extremamente diferente do que vocês estão acostumados a ver por aqui. Se bem que, não está totalmente pronto, mas o blog se manterá aberto (:
Quero lembrar também do concurso que está rolando aqui no blog. O prêmio é um template completo. Tudo o que você precisa fazer é informar seus dados e responder a simples pergunta: Qual a importância de um template para um blog? A melhor resposta leva o prêmio. Fácil né? Então corre e participe já ;)
Então sem mais delongas, vamos ao tutorial, que foi pedido de uma leitora particularmente muito amada por mim gente, a Cristielen dona do Blogados :3
Nesse tutorial, eu vou ensiar a deixar o título da postagem com imagem no fundo, só que o diferente, é que uma parte da imagem fica deslocada e acaba criando o efeito abaixo:
Vá em Design, Editar HTML dê Crtl + F e procure por:
h3.post-title { ou, dependendo do template, .post h3 {
E logo abaixo, cole o seguinte código:
background: url("SUA IMAGEM") no-repeat left top;
margin-top: 20px; /* altura, melhor nao alterar /*
padding:50px;
font-size:18px;
text-align: left; /* Posiçao do titulo do post /*
font-weight:none;
height: 20px;
width: 670px;
padding-top: 0px;
margin-left: -34px; /* distancia da imagem para o post /*
line-height:2.1em;
color: #COR;
}
Substitua SUA IMAGEM pela url da sua imagem já editada e COR pela cor do títilo do post. margin-left:- linha de extrema importância para que o efeito da parte de fora da imagem funcione. Lembre-se de editar uma imagem mais larga que a área do post.Aqui algumas imagens já editadas que você pode usar no seu blog, se disponibilizar, credite! Clique nas imagens para ampliá-las.
Nenhum comentário:
Postar um comentário