04/08/2012

Tutorial : Área dos comentários personalizada ( Estilo Elegante ) + Fundo na Área dos comentários .


Hey , encontrei um estilo para os comentários super Lindo ! Me apaixonei , querem aprender a coloca-lo também ? Confira >>
Gostaram ? Vamos fazer também ? Lembrando que eu peguei esse tutorial daqui (www) , e diferente dele eu tenho outro jeito de trabalhar com esses códigos. Eu testei esse tutorial com o modelo Viagem e comigo funcionou perfeitamente do meu jeito , por tanto irei lhes ensinar o mesmo .

Salve uma cópia do seu Lay caso algo dê errado !

#1: Marque a opção " Expandir modelos de widgets " , dê Ctrl + F ou F3 e procure por :
/* Comments
Assim que encontra - lo apague ele e todo o código que o compõe e cole isto no lugar :
/*Blogger Threaded Comments Styles From http://www.dicasblogger.org*/

#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(http://lh6.ggpht.com/-GDMurKK2tec/T5JCD6hoKoI/AAAAAAAABAc/COHOItBlFWk/author.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.dicasblogger.org*/
Salve ! Note que diferente do meu , que tem um background no fundo o seu terá uma cor cinza , caso queira também colocar um fundo procure por :  #comments {

Você deverá encontrar algo semelhante a isso: 
#comments {
  padding: 15px;
}
Então coloque dentro das chaves o seguinte código :
background: url(link da imagem de fundo) repeat;
Agora é só substituir o link da imagem e salvar . Espero ter ajudado !







8 comentários:

  1. adoreei,já estou usando lá em emu blog!
    http://www.damadevestidoazul.com

    ResponderExcluir
  2. oii eu tenho que mudar o fundo de onde fica os comentarios eu adorei ele deste geito como eu mudo a cor para azul ?

    ResponderExcluir
    Respostas
    1. De vez vc colocar :
      background: url(link da imagem de fundo) repeat;
      É só colocar :
      background: #87CEFA;

      Ou vc pode substituir " #87CEFA " por outra cor de seu agrado ...

      Excluir
    2. é so´achar as letras da cor por exemplo ffffff é branco e tudo como no blogger espero ter ajudado
      saladmist.blogspot.com

      Excluir
  3. Olá,adorei o tutorial,mas eu queria mudar o que está de rosa pra preto ( O label 'autor' o balão onde tá escrito 'x comentários' e 'adicionar comentário')poderia me explicar? :3

    Adorei teu blog *uu*
    MEUDOCEPANDEMONIO.BLOGSPOT.COM

    ResponderExcluir
  4. Amei!!! vou credita-los!!

    http://kawaii-little-things.blogspot.com.br/

    ResponderExcluir

-Primeiro , não não peça Tutoriais / Materiais pelos comentários , use a Ask - me .
-Não desrespeite ninguém , tenha educação .
- Comente sobre o post .
- Deixe a sua url no fim do cometário para que eu posso lhe retribuir o mesmo .