Personalizando o Post Footer


Hey, Pessoal!

Hoje vamos personalizar o post footer, que nada mais é que o rodapé do post na parte inicial do blog. O tutorial está bem simples e eu trouxe dois modelos diferentes para vocês terem a opção de escolher. Então, vamos lá.

Vá em Modelo> Editar HTML> CTRL+F> Pesquise por: .post-footer {

Vocês encontrarão um código parecido com esse:

.post-footer {

  margin: .5em 0;
  line-height: 1.6;
}

Logo abaixo cole:

MODELO 1 (Para visualizar clique aqui)
.post-footer-line-1, .post-footer-line-2 {
border-bottom: 1px solid#8B4C39; /* cor, espessura e tipo da borda */
background: transparent; /* fundo do rodapé */
color:#FF69B4; /* cor do texto */
font-family: MamaeQueNosFaz; /* fonte do texto */
font-size:  28px; /* tamanho da fonte */
margin: 2px 0; /* margem entre uma linha e outra, não altere */
padding: 1px 1px; /* espaço entre texto e margens, não altere */
text-transform: normal; /* transformação do texto */
word-spacing: .2em; /* espaço entre palavras */
text-align: center; /* alinhamento do texto */ }

MODELO 2 (Para visualizar clique aqui)
 * Cole o código antes da chave "}"  *

background: #FFF0F5;/* Cor de fundo */
border: 2px solid #FFE4E1;/* Cor e tamanho da borda */
font-family: 'Muli', sans-serif; /* Fonte */
font-size: 13px; /* Tamanho da fonte */
padding:5px 8px;
text-transform:none;

Se vocês quiserem mudar o estilo da linha, colocar pontilhada por exemplo mude onde está Solid por Dotted, e se quiser tracejada coloque Dashed, e linha reta deixe o Solid. De resto, seguindo as instruções de cada linha do código, vocês podem ir mudando de acordo com seu gosto e com o visual do blog. Espero que tenham gostado, caso haja alguma dúvida comentem e se desejarem podem pedir algum tutorial em especifico.

Créditos: (http://nataliamedice.blogspot.com.br &
http://euamohtml.blogspot.com.br/)

Comente com o Facebook:

13 comentários:

  1. Ótimas dicas. Gostei...
    Estou seguindo seu blog. Pode retribuir?
    Passa lá. ... Beijinhos
    http://dieinydicas.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Que bom que gostou! Estou indo te visitar haha Beijos

      Excluir
  2. Respostas
    1. Estou te seguindo! :D

      Excluir
    2. Fico contente que tenha gostado! Beijão.

      Excluir
  3. Oi Karolline, é uma dica bem legal, fica lindo =)
    Um beijo

    Suellen Esposte Blog | Facebook | Youtube | Instagram

    ResponderExcluir
    Respostas
    1. Olá Suellen, fica bem legal mesmo! Um grande beijo pra você!

      Excluir
  4. Adorei a dica! Beijos ;)

    http://blogdakakalima.blogspot.com.br/

    ResponderExcluir
  5. HTML é bem difícil, mas essas dicas são ótimas para quem não entende muito.
    Parabéns!
    www.booksever.com.br

    ResponderExcluir
    Respostas
    1. Isso é verdade haha Quero ensinar o pouco que sei para as pessoas!
      Obriagada.

      Excluir

♡ Comente sobre a postagem, sua opinião é muito importante!
♡ Seguindo, segue de volta? Claro, basta comentar nos posts;
♡ Aceito afiliações, caso deseje entre em contato pela página "Contato" ou pelo e-mail: contato@palavrasambulantes.com
♡ Sem grosserias! Comentários maldosos serão apagados;

Related Posts Plugin for WordPress, Blogger...