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
Óptimo tutorial! O blog está PERFEITO!
ResponderEliminarObrigada por tudo Chizu! ^^
Como é que fizes-te essa barrinha??
Kisses~
Ainda bem que ajudei! x3
EliminarA barra fiz no Photoshop ^^
Passando aqui só pra dizer:
ResponderEliminarSHESUUUUUIS, QUE PERFEIÇÃO DE CABEÇALHO É ESSA? :O
QUE LINDO, MAN *U* Tu que desenhou?
Kaorii! *--*
EliminarFico feliz que tenhas gostado!! >////<
As letras sim eu fiz, mas os bonequinhos não! x3
Obrigada por comentar! >////<
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?
ResponderEliminarQue blog fofo Cнizuяuy ツ, esse tutorial foi muito útil, sério, troca seguidor??
ResponderEliminarUm Otaku No Blog
nao consigo me ajuda????aaahhhhh
ResponderEliminar