• Acessórios

  • Layouts para blog

  • kits de imagens

  • Goodies

  • Layouts free

  • NOME DA FOTO OU TEXTO

30 de maio de 2012

Personalizado área dos comentários 2


Galera no ultimo tutorial eu ensinei vc`s personalizarem a are de comentários AQUI , Hoje trouxe outro modelinho p vc`s é mesmo processo que o outro vou repetir aqui logo abaixo..



*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);
}


*PS: galerinha não importa o modelo q vc`s usam é so substitui a area de comentários do seu respectivo modelo ^^


OK apague todo esse código e  coloque esse no lugar...
#comments h4 {

margin:1em 0;
font-family:Dancing Script;
font-size:30px;
line-height: 1.4em;
text-transform:none;
font-weight:normal;
color: #535353;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin: 0.5em 0;
padding: 10px;
padding-top:3px;
background:  url("http://4.bp.blogspot.com/-8ZmFHV9suAo/T0VfXFRA_8I/AAAAAAAAEio/L2UYTSqxdhw/s1600/fundo+blog.png");
color: #ffffff;
font-family:  Sofia;
font-size:23px;
font-style:none;
font-weight:normal;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.comments .comments-content .comment-content {
margin:-.25em 0 2em;
padding: 10px;
line-height: 1.4em;
border:0px dotted #c0c0c0;
background:#ffd2e0;
color:#666666;
text-shadow: 1px 1px 3px  #  ;
font-family:Trebuchet MS;
font-style:normal;
font-weight:normal;
font-size:15px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.comments .comment .comment-actions a {
background:#ff91b4 url(  );
font:20px Sofia;
text-shadow: 1px 1px 3px  #ff6495  ;
text-transform:none;
font-weight:normal;
cursor:pointer;
color:#ffffff;
padding:4px 8px;
margin-right:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid # ;
}
#comments-block .comment-author {
margin: 0.0em 0;
padding: 5px;
background: #EDDCF6 ;
color: #86664e;
font-family:Lobster;
font-size:20px;    CORPO DOS COMENTÁRIOS
font-style:none;
font-weight:normal;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.feed-links {
clear: both;
line-height: 2.5em;
text-indent:-9999em;
}


É isso , bjoss espero que tenham gostado ^^

5 comentários:

  1. Amei o tuto,ficou lindinha a personalização!
    Bjs
    www.moreninhadesigner.com

    ResponderExcluir
  2. Oie acabei de descobrir teu blog e já me aapaixonei, amei esse tutorial!
    Agora faz um tutorial de como mudar o link dos comentários 'da parte da frente do blog' igual tá o seu com o fundo verde e a fonte bem grande e como faz pra colocar o fundo verde só nos comentários e não fica nos marcadores??
    BJOooO!
    Aguardando o tutorial,rs! ;)
    http://porfirioinvintage.blogspot.com.br

    ResponderExcluir
    Respostas
    1. faço sim linda, vou deixar anotado aqui, ai explico direitinho no tutorial :D bjaooo

      Excluir
  3. Olá Jennyfer no meu blog não tem esse código #comments { e agora?eu também queria saber porque na maioria dos códigos e não tem o que faço agora?

    ResponderExcluir
    Respostas
    1. Procura, uma parte que tenha os Comments no teu blog, nem todos são iguais, mas se tu achar a area que ficar os comentários, é só substituir por esse codigo.

      Excluir

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

Related Posts Plugin for WordPress, Blogger...