03 dezembro 2012

Tutorial - Personalizar o seu Post-Footer!

Tumblr_megkpr6bpc1rj2njzo1_500_large
Meu Maridoo *-*
Oie gente! Bom esse é meu primeiro post no TS, resolvi postar um tutorial!
Como o título já diz, é de como personalizar seu Post-Footer, um recurso que o próprio blog não oferece!
O efeito é esse:
Esse tutorial foi usado no Sweet Candy, um blog que eu estou fazendo o layout de Natal!
Emfim, código encotrado aqui, mais eu fiz algumas modificações, inclusive trasnformei em hover.
Modelo>Editar HTML> Ctrol F:
Procure por:
/* Posts
E depois daqueles tracinhos, cole:
.post-footer {
margin: 3px;
paddindg: 5px;
background: #d3d3d3;
border: 1px solid #fffff
-webit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}
.post-footer:hover{
background: #d3d3d3;
border: 1px solid #fffff
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}
Explicando:
Background: #d3d3d3; =fundo do footer normal
border: 1px solid #ffffff; =Cor da borda, se não quiser borda, simplesmente reire essa parte do código, mas se quiser, pode trocar por dotted, dashed ou double.
transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s; = É o tempo que vai demorar para passar do estado normal para o hover.
Depois de .post-footer:hover{ , edite tudo que quer que fique no hover-(Naaaaaaao?!)
Caso tenham dúvida quanto as cores em HTML, aí vai uma tabela!
Emfim, espero que eu tenha ajudado alguem aí, rsrs!
Beijão e até a próxima!


9 comentários:

  1. Olá!
    O e-mail do Amigo secreto já está no seu e-mail.

    - beijos;
    me-ilumine.blogspot

    ResponderExcluir
  2. Ainda não entendi pra que serve isso de Post-Footer (sou meio lerdinha). Mas parece ser uma coisa útil e_e. Por favor me explica o que é um Post-Footer -q. Vou indo, beijos e tchau!

    celestialtales/blogspot

    ResponderExcluir
  3. Legal o tutorial :) . Ei ! O Zayn é meu marido ahah , sou directioner sim . Beijão

    ResponderExcluir
  4. Olá, Tainá, estou seguindo.
    Deus te abençoe e uma ótima semana.
    Xêro ;)

    xodo.blog.br

    ResponderExcluir
  5. Adorei o tutorial! O resultado fica lindo demais *u*
    Vou tentar usar lá no blog!
    Ah, e amei o seu cantinho, seguindo! Retribui?
    Beijocas!

    PiinkCookie.blogspot.com

    ResponderExcluir
  6. Vou usar esse tutorial no blog... adorei ele :3!
    http://tastysundae.blogspot.com

    ResponderExcluir
  7. aWwwn , o tutorial é super util :3 ' seu blog é lindao, flor u_u
    seguindo aqui c:

    kawaii-expllosion.blogspot.com <~ visita?

    ResponderExcluir
  8. Anônimo4/1/13 06:40

    Nova Leitora, Amei o Seu Blog, Pretendo Visita-Lo Muito :3
    Adorei o tutorial, dá um charme especial no blog *u*
    Vocês Aceitam Afiliação??? =^.~=
    Beijos Feita de Rubis

    ResponderExcluir
  9. Amei esse tuto , desculpa pela demora pra responder teu comentário viu !
    Beijos teu blog é lindo ♥

    http://sonhos-sinceros.blogspot.com.br/

    ResponderExcluir

Oie-- Fique sabendo que eu estou super grata pelo seu cometário! Mas antes, regras:
-Não xingue ninguém, please!
-Caso eu peguei algo seu e não creditei, antes me ir falando ''Plagiadora!!!'', procure saber o que aconteceu, pode ser um engano, não?
-Indique o blog que quer que eu responda o seu comentário, no seu perfil!

É só! Fiquem com Deus!

>