27/02/2012

Como colocar background no fundo dos comentários?

Tumblr_lynvu50ldo1ropt7ro1_500_large

A pedido da leitora Daniela daqui do PH vou postar como colocar aquele fundo com imagem nos comentários do blog. Muito fácil de fazer só basta ter atenção ok? Existe dois tipos colocarei apenas um.

Modelo - editar Html - Ctrl+F ou F3 e pesquise por: 
#comments

poderá aparecer assim:

#comments {
 background: #FFFAFA; none repeat scroll top center;
padding: 15px;
}

Caso queira mudar a cor, apague o que destaquei de vermelho e coloque a cor que deseja. 
tabela de cores

Para colocar a imagem no fundo:

#comments {
 background: #FFFAFA; none repeat scroll top center;
padding: 15px;
}

apague o que destaquei de vermelho e coloque o seguinte código:
background: url (url da imagem)  none repeat scroll top center;

onde está marcado de roxo, você vai colocar a Url do blog. Se caso não saiba como pegar a Url, faça uploud da imagem aqui e pegue o último código.

Caso queira que fica personalizado assim como o meu faça o seguinte. Vá em Modelo editar html > Ctrl+F ou F3 e procure por:


#comments {

Daí então o substitua o que marquei de vermelho por este:


#comments h4 {
background:url(http://www._drikoti.blogger.com.br/back06.gif);
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;background:url(URL DA IMAGEM);
}
#comments-block .comment-author {
Font-weight: bold;
color:#FFB5C5;
font-size:12px;
margin:.5em 0;
font-family:tahoma;
height: 30px;
color:#FFB5C5;
line-height:2em;background:#F5DEB3;
}
#comments-block .comment-body {
background:url( URL DA IMAGEM );
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
background:url( URL DA IMAGEM );
line-height: 1.4em;
color:#111;border: 20px #FFE4E1;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 75;
font-size: 11 px;
line-height:1.5em;
background:#f1f1f1;;
color:#111;border: 3px #535456;
}

Vermelho : 1ª cor do Disse , 2ª cor da Data

Rosa trocando todos os links rosa, coloque o background/fundo que deseja. Nada de cada links um fundo diferente. Todos tem que estar com as Urls iguais!

Verde : se refere a barra com nome de cada comentarista.


Créditos a Candy Reis.
Beijos.



13 comentários:

  1. OI ficaria muito muito feliz se você votassem em mim aqui.È Teenage Dream,tá?


    Teenage Dream

    ResponderExcluir
  2. Usado e muito bem Aprovado Ameei !
    http://guiaextra.blogspot.com

    ResponderExcluir
  3. To pensando em fazer isso no meu próximo layout

    http://www.perfeitinhablog.com/
    http://thaisr-encomendas.blogspot.com/

    ResponderExcluir
  4. Ain fica super fofo, os meus por enquanto eu to usando meio que básico mesmo, pq eu cansei de usar cores!
    kkk

    ====>WORLD GIRL<====
    http://ianapaulinhaaaa.blogspot.com/
    @ianapaulinhaaaa

    ResponderExcluir
  5. Acho lindo comentários com bg (: Amor, está lindo aqui *--*
    Beijos ♥
    http://diamontlilac-news.blogspot.com/

    ResponderExcluir
  6. OMG!! *.* Mt,mt OBG!!! vc é d+ .o que seria de mim sem vc?????

    ResponderExcluir
  7. confere meu post novo

    http://www.perfeitinhablog.com/
    http://thaisr-encomendas.blogspot.com/

    ResponderExcluir
  8. Oi flor, nossa ele Layout tá muito legal também... Tem como você dizer onde pegou este background? É porque estou tentando fazer um novo layout e queria um background bem legal...

    http://antigomoderno.blogspot.com

    ResponderExcluir
  9. Fica super fofo assim, ainda vou fazer no meu *-*
    beijos,

    http://s2juuh.blogspot.com/

    ResponderExcluir
  10. Adorei o tutorial, isso deixa os comentários mais bonitos.
    http://perfeitamenteteen.blogspot.com

    ResponderExcluir

Olá! Obrigada pela sua visita e comentário. Só peço que não venha com palavras de baixo calão!

Agradeço, desde já!♥