Tutorial: Personalizando o post footer + Alguns modelos




Yoo, minna! ( (ミ´ω`ミ))

Como vão? oUo Desculpem pela falta de posts T-T Simplismente fiquei com preguiça de postar XD Acho que vou fazer algumas mudanças no layout, ele está muito grande e esse paragrafo bem grande não está dando certo. Sei lá, isso me desanima um pouco. Ou vou pelo menos dar uma mudada no layout, colocar um menu fofo, mudar as cores... Tá tudo muito azul T3T Eu sabia que iria acabar enjoando do estilo do layout uma hora ou outra. Quero um layout mais bem-desenvolvido, com cara de um blog bom e não um layout simples e tosco como esse. Sei lá, tenho que fazer uma lista de mudanças que quero fazer no blog. Quero fazer uma coisa simples e que fique bonita. Vocês possuem alguma ideia legal que gostariam de dividir com a tia Konata aqui? Me deem ideias, podem ser simples. Eu quero ideias, gente T-T Mas me desculpem pela falta de posts mesmo, ok? >3< Fiquei sem ideias e gostaria que vocês fizessem pedidos, peçam qualquer coisa. Ah, eu tinha esquecido de abrir o blog. Segunda vez que isso acontece, porque eu sou muito esperta mesmo. Oi.

Hoje trago um tutorial de como personalizar o post footer. É como eu faço sempre aqui no blog, é bem simples.Não é muito complicado. Trouxe também alguns modelos. Espero que gostem de tudo ( (ミ´ω`ミ)) Não repassem, apenas. Enjoy ~

1 - Vá no seu HTML, dê CTRL+F, certifique-se que a barra está dentro da caixa e procure por:
.post- footer {
 2 - Antes de } (a chave de fechamento) cole o seguinte código:
padding-bottom: 2px; /* Não altere, só isso *\
font-family: Smallest; /* Nome da fonte, essa é pixel. Se não quiser fonte pixel, substitua por Arial *\
font-size: 10px; /* Tamanho da fonte, não altere *\
 3 - Agora pesquise por ]]></b:skin> e cole o código do modelo desejado acima da tag.

Modelo 1:
.post-footer-line-1{
border: 1px solid #b64f48;
text-align: center;
background: #cc6633;
box-shadow: inset 0 0 9px #b3511f, 1px 3px 7px #c4c4c4;
color: #b2b648;
}
.post-footer-line-2{
border: 1px solid #b64f48;
text-align: center;
background: #cc6633;
box-shadow: inset 0 0 9px #b3511f, 1px 3px 7px #c4c4c4;
color: #b2b648;
}
Modelo 2:
.post-footer-line-1{
border: 1px solid #c9c0c2;
text-align: center;
background: #cebbaf;
box-shadow: inset 0 0 9px #b39f93, 1px 3px 7px #fff;
color: #b64f48;
}
.post-footer-line-2{
border: 1px solid #c9c0c2;
text-align: center;
background: #cebbaf;
box-shadow: inset 0 0 9px #b39f93, 1px 3px 7px #fff;
color: #b64f48;
}
 Modelo 3:
.post-footer-line-1{
border: 1px solid #9f845a;
text-align: center;
background: #d5b88a;
box-shadow: inset 0 0 9px #ba9e72, 1px 3px 7px #fff;
color: #b64f48;
}
.post-footer-line-2{
border: 1px solid #9f845a;
text-align: center;
background: #d5b88a;
box-shadow: inset 0 0 9px #ba9e72, 1px 3px 7px #fff;
color: #b64f48;
}

6 comentários:

  1. Gostei do tuto, perfeito *u*
    XOXO.

    Oh! Black Asian

    ResponderExcluir
  2. Eu amei os modelos, mas prefiro ele bem simplesinho :S
    @A_P

    ResponderExcluir
  3. Acho que você devia fazer um layout com cores mais claras :3 Essa área dos posts escura é meio irritante pra ler T_T Enfim, certeza que vai fazer algo legal :33 Gostei do tutorial *-* Bem útil, a post footer sempre fica melhor personalizada :33

    Kissu :*

    ResponderExcluir

- Se quer algum código/tutorial que usei no layout, peça pela ask.
- Sem essa de "Seguindo, segue de volta?". Irrita, e pode não ser muito legal :/
- Os requesets podem ser feitos pelos posts e pelas asks.
- Seja educado, e não use palavras ofensivas.
- Sempre volte para ver se o seu comentário foi respondido >3<
- Retribuo sempre que posso
- Afiliações somente pela página. Para ser redirecionado à mesma, clique nos corações dos afiliados no cabeçalho.
- As pessoas que comentarem em posts aleatórios, de goodies ou de tutoriais pedindo afiliação serão ignoradas.
- Não me chame de Lelê, taco pedra.
Grata.