Tutorial: Post-footer personalizado com imagem

Foto por Thomas Lefebvr

Boa tarde? Tudo ok? Ok, depois de tanto vocês me pedirem e eu enrolar pra postar cá estou eu trazendo o tutorial, ele estava quase pronto num bloco de notas e não sei por que não postei antes.

Lembrando que: Esse tutorial é exclusivo do blog, por que? Porque ninguém utilizava imagem no post (rodapé) antes da versão Sistar 19 do TK, simples.

É que eu fiquei brava depois que eu vi o mesmo blog postando tutoriais meus sem autorização e falando "eu que fiz, bla bla bla", sinceramente eu ODEIO isso. Já deixo vocês pegarem os códigos SEM EU DISPONIBILZAR, mas abusar da minha boa vontade fazer tutorial e mandando creditar é pra rir, né? Não é o primeiro que eu vejo usando, mas o tutorial me deixou realmente decepcionada. Deixando o bla bla bla para lá, vou disponibilizar o código pra vocês e trazer algumas footers para edição, vamos lá?



Como por:

No HTML do seu blog (Modelo > Editar HTML > Dentro das tags B:Skin) procure por  /* Posts  e cole o código a seguir antes do h3.post-title
   
.post {
background: #fff url(URL DA IMAGEM AQUI) no-repeat bottom left;
padding: 0px 10px 28px 10px;
margin: 0 0 27px 0;
border-radius: 20px;}


Explicação do código:

Background: Existem duas propiedades uma de cor #fff e a outra de imagem, certo? A de cor irá ficar no post inteiro, englobando título, texto e o rodapé, já a imagem está definida com "no-repeat bottom left" que significa que ela só vai aparecer uma vez em baixo na esquerda.

Padding: As propriedades definem a numeração de espaçamento interno de cada lado, sendo primeiro em cima, segunda na esquerda, terceira em baixo e a quarta a direita. Como vocês podem perceber, o padding-bottom ( terceiro número ) que define em baixo é o que tem a maior numeração, que suportará a imagem. Isso que definirá o post-footer no seu post, deixando-o alinhado.

Margin: É o espaçamento externo, a distância que um post terá do outro.

Border-radius: Arredondamento dos cantos.

Lembrando que a url da imagem deve ter o mesmo tamanho que sua caixa de posts, para saber isso tem um método muito fácil. Nesse mesmo código, troque o #fff por #ff0000 (vermelho) e ai printe. Dá pra jogar num editor de imagens e selecionar o número de píxels em vermelho que apareceu ^^

No próximo post eu trago imagens para o post, ok?

Sem cópias, hein pessoal? Eu permito reblogues e etc, mas copiar (vulgo postar e falar eu que fiz, me creditem) evitem, ok? Peça permissão!

Beijos