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 Recados :

Anônimo disse...

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

jaqueline disse...

de nada guria (:
pode usar sim!

Unknown disse...

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

Anônimo disse...

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

Unknown disse...

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

Anônimo disse...

jackie obrigada minha linda

Anônimo disse...

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

Gabi Sena disse...

Jackie, seu blog é o melhor#

Anônimo disse...

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/

Anônimo disse...

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

Anônimo disse...

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

Anônimo disse...

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

Daniele disse...

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

Plum disse...

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

Giovanna disse...

Own
Obrigada Jackie, estava precisando de um
tuto assim.

http://gpurple.blogspot.com

Ana Carolina disse...

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

Natalia Sousa disse...

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

Daísa disse...

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

Felipe, Fernanda, Isabella e Tarik disse...

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:

Ester Santana disse...

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/

Unknown disse...

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

Andréa K. Silva disse...

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

RayanneSousa disse...

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

Unknown disse...

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

http://xicablog.blogspot.pt/

Unknown disse...

: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

jaqueline disse...

@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 *---*

Marina Menezes disse...

Deu certinhoo!! Ficou muito fofo *-*

Jo Moura disse...

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??

Pra Você disse...

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 ♥

Anônimo disse...

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

Anônimo disse...

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

Unknown disse...

Ameeeei o blog!! Parabéens!!


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

Esthefani disse...

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

jaqueline disse...

tira um print e vê as medidas (:

Sarah Vivic disse...

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

Park Yully disse...

Jackie eu queria saber se vc pode me ajudar com meu blog?

jaqueline disse...

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

jaqueline disse...

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

Unknown disse...

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

jaqueline disse...

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

Brigada guria <3

volte sempre!!

Lia Torres disse...

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

Garota Dos Sonhos disse...

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

apenasumahistóriaminha.blogspot.com

Claudenor disse...

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

jaqueline disse...

pode (:

jaqueline disse...

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

Nyu-Sama disse...

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?

jaqueline disse...

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

Laysa Diniz disse...

Amei o tutoria ajudou muito.

www.meninadofuturo.com.br

Unknown disse...

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

Postar um comentário