terça-feira, 17 de abril de 2012

Tutorial: Rodapé das postagens

Tumblr_lgyhzt5rjz1qzjtu3o1_500_large_large
Hooy Gente a pedido de uma leitora  vou ensinar como personalizar o rodapé do post igual ao meu, vejam:
O tutorial original é este aqui (www). Eu personalizei as cores, fontes e o grande truque é a imagem base que eu coloquei no lugar do Background-color Mini gif 161 (ou seja a cor do fundo) e o espaço dos comentários utilizei este truque aqui (www). Pra conferir o tutorial completo clique em Leia mais 

Vá no seu HTML (use ctrl + f pra facilitar a busca) e procure por:

 .post-footer {

Se você nunca tiver mexido nessa área do template ele irá aparecer acompanhado pelo seguinte código: 


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


Substitua todo o código acima por este:


.post-footer {
border-top:1px dotted #000000;
background-image:url('URL DA SUA IMAGEM AQUI'); background-repeat:no-repeat;
font-family: 'Cookie', cursive;
font-size: 16px;
letter-spacing:1px;
margin:0.73em 0;
padding:5px 8px;
text-transform:none;
}
.post-footer a{
color:#FF1493;
text-decoration:;
font-weight: ;
background-color: #FFFF00;
}
.post-footer a:hover{
color:#FFFF00;
text-decoration:none;
background-color:#FF1493;
}
.comment-link {
margin-left:17px;
magin-top:500px;
color: #ccc;
background-color: #FFFF00;
}




Pra fonte funcionar corretamente primeiro você precisa instalar ela no template entenda mais lendo este post (www).
Instalando a fonte!
Cole o código abaixo acima de:  </head>


<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'/>

Personalizando a imagem de fundo!
Agora você só precisa criar uma imagem que fique no fundo, assim como eu fiz, exemplo:
 (só pra que usa o google chrome, baby) Pra acertar as medidas vá na área que fica o rodapé do seu template e aperte o Button direito do mouse e selecione a opção ''inspecionar elemento''

Agora que você sabe a medida certa é só criar uma imagem e colar a url dela no local indicado de vermelho (não apague os tracinhos do lado)background-image:url('URL DA SUA IMAGEM AQUI');

Visualize se estiver tudo certo salve ;D
Post feito para Letícia Carolina   Bye~~

49 comentários :

  1. obrigado jackie !a gente pode usar,as imagens base suas?

    ResponderExcluir
  2. Respostas
    1. Jackie eu queria saber se vc pode me ajudar com meu blog?

      Excluir
    2. Não vai dar, eu meio que tô sem tempo pra nada ultimamente :c

      Excluir
  3. oi linad que ja fas um tempo que não passo aqui ai saudadessssssssssssssssssssssssssssss
    aqui smeprelindo demais
    bezossssssssssssssssssssssssssssss

    ResponderExcluir
  4. até me der permissão eu não vou realizar o tutu ok? a seu respeito

    ResponderExcluir
    Respostas
    1. Flllor se ela ensinou aqui
      Claro que pode !
      http://sorrysmyle.blogspot.com.br/

      Excluir
  5. Oi Jackie tudo bom?
    Vi no seu twitter que é de Ribeirão Preto! Ahin que legal., tb sou! <3
    Beijinhus

    ResponderExcluir
  6. usei apenas o efeito hover pk as letras achei d+ mas nunca teria conseguindo sem vc linda !

    ResponderExcluir
  7. Esse tutorial é mega-útil, pois destaca os comentários e chama mais pessoas para comentar...
    Mas como sempre, a Jackie dá seu toque de princesa e deixa tudo mais kawaii Heehe"
    Fica lindo...

    http://quandochegardezoito.blogspot.com.br/

    ResponderExcluir
  8. Aceita parceria Jackie?? Se a resposta for sim ou não agradeço a sua atenção, bjocas no coração :h:

    ResponderExcluir
  9. IXI, te pedi parceria mais esqueci de colocar meu blog que é:
    4-brownies.blogspot.com

    ResponderExcluir
  10. hehehe
    adorei Jackie :]
    ficou muito bacana com as modificações que vc fez!
    www.menina-dedeus.blogspot.com.br

    ResponderExcluir
  11. Lindo Jackie, pena que não funciona nenhum tutorial de marcadores no meu blog, tipo o da Candy fico todo solto aquela área, todo errado :S
    Bezos <3 Dani ^^
    meianoites2.blogspot.com

    ResponderExcluir
  12. Adorei Jackie, você e seus truques né? Sua trollface do bem! hahahaha :D
    www.viverserfeliz-renata.blogspot.com

    ResponderExcluir
  13. Own
    Obrigada Jackie, estava precisando de um
    tuto assim.

    http://gpurple.blogspot.com

    ResponderExcluir
  14. Jackie amei o tutu!! Eu tenho maais um selinho pra vc flor espero q não seja encomodo ♥

    http://pincelandoceu.blogspot.com.br/2012/04/uma-nova-tag.html#more

    ResponderExcluir
  15. Ótimo tutorial. Fica muito fofo *--*
    www.bugigangazdanet.blogspot.com

    ResponderExcluir
  16. Que postagem legal...seu blog é massa
    Gostaria que você visitasse o meu!
    Um Beijo
    http://vcmaisfashion.blogspot.com.br/

    ResponderExcluir
  17. Oii continuo não consseguindo pegar o códico da imagem.Tem alguma coisa a ver se eu usar o firefox??
    Bom é isso ameeei o tuto.Eu queria mesmo que vc o fissese.
    BEIJUUS
    www.befys.blogspot.com
    Linda:k:

    ResponderExcluir
  18. oi jackie como você fez para o seu leia mais ficar no lado esquerdo, é que o meu está no lado direito! Manda um comentario no meu blog dizendo

    http://www.cravos-e-rosas.blogspot.com.br/

    ResponderExcluir
  19. Legal o tutorial, mas não vou poder usar por que esses elementos do rodapé no meu blog ficam em baixo do título.
    Mas ficou muito bom.
    Abç

    adraftbox.blogspot.com

    ResponderExcluir
  20. Amei, principalmente a Fonte ^^!
    Beijoos*
    http://allornothingsz.blogspot.com.br/

    ResponderExcluir
  21. Oba Oba, ameei Jackie xD
    Beeeeeijos;*
    http://sooulteen.blogspot.com.br/

    ResponderExcluir
  22. jackie, se eu passar o template pra seu mail vc faiz isso, por favor?
    ja sei se mail.

    http://xicablog.blogspot.pt/

    ResponderExcluir
  23. :h: eeu ameei jackeee , sou iniciANTE ee não sei mexer me ajuda um poco /??
    eu queria q voce me achasse uns planos de fundos para blog da kawaii
    bjusssssssssss

    ResponderExcluir
  24. @Mayara Messias Eu fiz esses>>http://isjackiezzdream.blogspot.com.br/2011/11/novos-backgrounds-kawaii.html

    e neste tutorial vc aprende a deixa los maior>>http://isjackiezzdream.blogspot.com.br/2012/02/como-multiplicar-backgrounds-com.html

    E em breve eu posto mais *---*

    ResponderExcluir
  25. Amei o tuto gente,que isso!
    FAz um tempãoooo que procurava algo assim eu via essas imagens nos comentários em outro blogs e não sabia como que fazia guria, muito massaaa, amei!
    Da pra colocar uma fonte-size só pra aumentar as letras de comentários né igual eu vejo em outros blogs tmb??

    ResponderExcluir
  26. voce é simplesmente perfeeita!
    e bom que vc passa pras pessoas com mta facilidade e nao tem covardia em passar o que sabe.
    eu que sou meio lenta pra mexer em blog :x
    valeeu mesmo!
    fica com Deus ♥

    ResponderExcluir
  27. Só vc pra me salvar rsrsrs !
    meu deus né ? cada menina te imitando nesse teu guria ...

    ResponderExcluir
  28. Oh meu Deus muito obrigada por esse tuto, maravilhoso, eu amei mesmo, na minha opinião renovou meu blog.
    Quando eu for dar os créditos concerteza não se esquecerei dos seus.O seu blog é mara ^3^
    #May-Sun

    layrakauana.blogspot.com

    ResponderExcluir
  29. Ameeeei o blog!! Parabéens!!


    http://anaaramos.blogspot.com.br/

    ResponderExcluir
  30. Guriah não uso o google C. , me ajuda?
    O que eu posso fazer?

    ResponderExcluir
  31. Valeu mesmo. Vai me ajudar de mais. Bem , eu gostaria de pedir um tutorial sobre como personalizar aquela parte do blog onde fica escrito " postagens mais antigas" ... bjuuus
    By: Sarah Vivic
    Blog: atual-sempre.blogspot.com.br

    ResponderExcluir
    Respostas
    1. tem esse aqui>>http://isjackiezzdream.blogspot.com.br/2012/02/efeito-hover-nos-links-postagens-mais.html

      Excluir
  32. ai ai amei seu blog qual a fonte que voçe usa nos gadgetse? serio pq amei mto a fonte.

    ResponderExcluir
    Respostas
    1. http://isjackiezzdream.blogspot.com.br/2013/03/fontes-para-design-baby.html

      Brigada guria <3

      volte sempre!!

      Excluir
  33. Oi Jack,amei o tuto e já estou usando,e a base também,bjs ...

    ResponderExcluir
  34. Que perfeitooo!!!! Posso reblogar? (Com os créditos devidos, claro!)

    apenasumahistóriaminha.blogspot.com

    ResponderExcluir
  35. Eu queria mudar a cor apenas da palavra Marcadores. Tem como?

    ResponderExcluir
    Respostas
    1. Ter até tem. Mas dai seria por sua conta achar os códigos e alterar de acordo com a sua preferencia ;D

      Excluir
  36. Eu fiz o tutorial,direitinho mas não deu certo.
    Consegui mudar a cor da fonte mas não consegui colocar meu background :(
    Me ajuda pf?

    ResponderExcluir
    Respostas
    1. por acaso vc nao excluiu as '' do código sem querer na hr de colocar a URL do backgraund?

      eu sempre fazia isso e dai não trocava o fundo tb hahahahah

      Excluir
  37. Amei o tutoria ajudou muito.

    www.meninadofuturo.com.br

    ResponderExcluir

.