06/09/2013

Tutorial - Rodapé do Post personalizado com Imagem

| |

Hellooooo! >w<

Vim trazer um tutorial muito útil para vocês, este tutorial vai ensinar-vos a personalizar o Rodapé dos Posts, para ficarem assim -> www, como podem ver o Rodapé tem uma barra, e essa barra é uma imagem que eu fiz e coloquei com este Tutorial.

Se querem aprender cliquem em "Ler Mais"! x3



1. Vá em Modelo > Editar HTML e procure por:

/* Posts  
_________________________________________________________________________________________________________________

2. Depois 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 propriedades 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á editar num editor de imagens e seleccionar o número de pixels em vermelho que apareceu.
_________________________________________________________________________________________________________________

Pode parecer complicada mas na verdade não é! >w<



Créditos - Too Kawaii

7 comentários:

  1. Óptimo tutorial! O blog está PERFEITO!
    Obrigada por tudo Chizu! ^^
    Como é que fizes-te essa barrinha??

    Kisses~

    ResponderEliminar
    Respostas
    1. Ainda bem que ajudei! x3
      A barra fiz no Photoshop ^^

      Eliminar
  2. Passando aqui só pra dizer:
    SHESUUUUUIS, QUE PERFEIÇÃO DE CABEÇALHO É ESSA? :O
    QUE LINDO, MAN *U* Tu que desenhou?

    ResponderEliminar
    Respostas
    1. Kaorii! *--*
      Fico feliz que tenhas gostado!! >////<
      As letras sim eu fiz, mas os bonequinhos não! x3
      Obrigada por comentar! >////<

      Eliminar
  3. Eu estava tentando fazer isso, mas... Como não sou muito boa nessas coisas de Html então fui tentar... Deu certo, porém... Ficou com umas margens do lado e fiz de tudo sabe... Fui pela dica que você disse sobre o [Pading] diminui e acrescentei números e nada da maldita margem dos lados sair (Desculpe pelo modo em que eu disse). Em [Margin] também, não importa o que eu faça com os números a margem não sai. E tipo, eu estava me perguntando será por causa do modelo de template?! Então queria te perguntar uma coisa, com qual modelo você faz a personalização?

    ResponderEliminar
  4. Que blog fofo Cнizuяuy ツ, esse tutorial foi muito útil, sério, troca seguidor??


    Um Otaku No Blog

    ResponderEliminar
  5. nao consigo me ajuda????aaahhhhh

    ResponderEliminar