• Acessórios

  • Layouts para blog

  • kits de imagens

  • Goodies

  • Layouts free

  • NOME DA FOTO OU TEXTO

26 de maio de 2012

Personalizado área dos comentários


Ola galera hj eu trouxe um tutorial bem legal de como você personalizar a área do comentários é bem fácil, mas antes de tudo baixe o modelo completo do seu layout ok?
vamos la...
*Ps: feito no Modelo viagem> Travel do blogger


Vá em modelo>editar html>prosseguir 

depois abra a caixinha de pesquisa ctrl+f e digite dentro  #comments {

Vc vai achar esse código abaixo.


#comments {
  background: $(comments.background);
  padding: 15px;
}


#comments .comment-author {
  padding-top: 1.5em;
}


#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
  color: $(post.title.text.color);
}


#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}


.avatar-image-container {
  margin: .2em 0 0;
}


/* Comments
----------------------------------------------- */
#comments a {
  color: $(post.title.text.color);
}


.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}


.comments .comments-content .loadmore a {
  border-top: 1px solid $(post.title.text.color);
  border-bottom: 1px solid $(post.title.text.color);
}


.comments .comment-thread.inline-thread {
  background: $(post.background.color);
}


.comments .continue {
  border-top: 2px solid $(post.title.text.color);
}


OK apague todo esse código e  coloque esse no lugar...



.comments {
background: #ffffff repeat;
color: #696969;
border-radius:15px;
margin:0px 22px 0px; /* ---edite as medidas ---*/
width:630px ;  /* ---defina a largura se quiser ---*/
padding: 20px; /* ---edite as medidas ---*/
border:px solid #723233; /* ---Coloque borda se quiser ---*/
}        }
.avatar-image-container img {
border:2px solid #519AB4;
float:right;
padding: 0px;
}
.comments .comments-content .comment-content {
background: none repeat scroll 0 0 #FFE9ED;
margin-top: 5;
padding: 13px;
text-align: justify;
font-family: georgia;
font-style:italic;
border-radius:10px;
}
.comment-header {
background: none repeat scroll 0 0 #CCCCCC;
color: #000000;
padding: 13px;
font-family: georgia;
font-style:italic;
font-size: 14px;
line-height: 14px;
margin-bottom: 0;
margin-top: -5px;
}
#comments h4 {
margin: 0 0 10px;
padding-top: 0;
padding-right: 14px;
padding-bottom: 2px;
padding-left: 29px;
font-size: 120%;
line-height: 1.4em;
}
.comment-actions {
background: none repeat scroll 0 0 #CC99CC;
border-radius:10px;
float:right;
margin-left: px;
padding: 4px;
}
#comments a:link, #comments a:visited, #comments a:active, #comments a:hover{
color: #000000;
}
.blog-author-comment {
margin:.25em 0 0;
}
.comment-author {
background: none repeat scroll 0 0 #FBBC35;
color: #FFFFFF;
margin: 0.5em 0;
padding: 5px;
}
.comment-body {
margin: 0 0 1.25em;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 20px;
}
.comment-body p {
margin: 0 0 .5em;
}
.comment-footer {
margin: 0 0 .5em;
padding-top: 0;
padding-right: 0;
padding-bottom: .75em;
padding-left: 20px;
}


sua área de comentários vai ficar assim...

bom galera coloque imagem de fundo se quiser use sua criatividade espero que tenham gostado bjosss

11 comentários:

  1. Legal adorei e muito legal você compartilhar isso é ajuda as meninas que não sabe algumas coisas do Blog , parabéns , visita ?
    http://andreiapinks.blogspot.com.br/

    ResponderExcluir
  2. como que a gente ajeita aquele modelo que dá bug nos coments?

    ResponderExcluir
    Respostas
    1. Linda aquele modelo só com evelyn mesmo pq eu ja troquei o código todo do comentários e não resolveu deve ser algum Widget algo q ela instalou e deu bug .

      Excluir
  3. Prontinho, já coloquei esse seu blog nos afiliados e o "Mundinho da Vamp" nas parcerias. Na barra lateral, em "Minha máfia" rs
    Beijo.

    http://sukitadecereja.blogspot.com.br/

    ResponderExcluir
  4. Que massa, adorei!

    Beijos

    Paulynhamakeup.blogspot.com

    ResponderExcluir
  5. Eu sou doida pra colocar essa opção no meu blog, mas não consigo... Já uso um layout pronto e acho que ele não suporta =/ Fiz o passo-a-passo, mas no meu nem aparece esse código, é diferente... Aff³¬¬

    PS.: De qualquer forma, estou seguindo ;D
    Te convido a conhecer: http://livrosebatons.blogspot.com.br/

    Beijos!

    ResponderExcluir
    Respostas
    1. é pq seu modelo ja é editado flor, essa opção responder são p os novos layouts do blogger ^^

      Excluir
  6. Legal.

    www.teenlist.blogspot.com

    ResponderExcluir
  7. super adorei vou tentar sempre me embanano kikiki'

    ResponderExcluir

Deixe seu link nos comentários que irei retribui a visitinha ^^

Related Posts Plugin for WordPress, Blogger...