10 de out de 2012

Personalizando os comentários no novo Blogger


Hoiii pessoal! Hoje trouxe um tutorial de como personalizar os comentários no novo blogger. Bom, todo mundo já conhece esse tutorial, mas mesmo assim eu trouxe.
Os comentários vão ficar igual aqui do chá com anjos e igual do template candy shop.


1- Vá no HTML do seu blog, aperte CTRL+F e procure por:

/* Comments

Se você nunca modificou, vai estar assim:

/* Comments----------------------------------------------- */.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 $(widget.alternate.text.color);  border-bottom: 1px solid $(widget.alternate.text.color);}
.comments .comment-thread.inline-thread {  background-color: $(post.footer.background.color);}
.comments .continue {  border-top: 2px solid $(widget.alternate.text.color);}
2- Substitua tudo por:

/* Comments
----------------------------------------------- */
.comments{clear:both;margin-top:10px;margin-bottom:0;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin:0 0 10px 10px;
padding:0 15px;
color:#878787 !important; /*--- cor da fonte do botão reply--- */
text-align:center;
text-decoration:none;
background: #e9c5ec;  /*--- cor de fundo do botão reply--- */
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #ebcfe5) ); /*--- cor de fundo gradiente--- */
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );/*--- cor de fundo gradiente--- */
border:1px dotted #cb7ace;  /*--- cor da borda do botão reply--- */
border-radius:5px;
-moz-border-radius:5px;
height:26px;
line-height:28px;
font-weight:normal;
cursor:pointer;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover {
text-decoration: none;
background:#fbe2ff; /*--- cor de fundo do botão reply houver--- */
border:1px dashed #da6fbd; /*--- cor da borda do botão reply hover--- */
}
.comments .comments-content .comment-thread ol{
list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative;
}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{font-weight:normal;text-decoration:none;}
.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==);
width:18px;
height:18px;
display:inline-block;
margin:0 0 -4px 6px;
float:right;
}
.comments .comments-content .datetime a{
font-size:11px;
text-decoration:none; color:#9383ab; /* -- cor do link da data do comentário -- */
}
.comment-content{margin:0 0 8px;padding:0 5px;
}
.comments .comment-block{
margin-left:65px;
position:relative;
background:#fff; /* -- cor de fundo do comentário -- */
border:3px solid #da6fa4; /* --- cor da borda do comentário ---*/
border-radius:8px;
-moz-border-radius:8px;
}
.comment-header{ /*--- linha onde fica o nome do autor do comentário --- */
background-color:#e7dce6;   /*--- cor de fundo--- */
font-size:18px;
border-bottom:1px dotted #C0C0C0;  /*--- cor da borda --- */
padding:5px;
}
.comment-header a{
color: #9c5ebf; /*--- cor do link nome do autor do comentario --- */
}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{
display:inline-block;
height:6px;
width:7px;
overflow:visible;
margin:0.3em;
padding-right:4px;
}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.avatar-image-container{
background:url(http://i.imgur.com/hZY1f.png) top right no-repeat; /*--- url da seta---*/
float:left
vertical-align:middle;
overflow:hidden;
width:65px !important;
height:51px !important;
max-width:65px !important;
max-height:51px !important}
.comments .avatar-image-container img{
padding:2px;
border:1px solid #ccc;
width:45px !important;
height:45px !important
;max-width:45px !important;
max-height:45px !important;
}

A explicação está no próprio código. Se quiser troque a setinha por sua própria, a base é esta: 

Mas eu fiz com outras cores e seus respectivos códigos para ajudar vocês:

Cor: #ee92be
Cor: #aa87f9

Cor: #6d941d
Cor: #941d29





Espero que seja útil. Beijão!


8 comentários:

  1. Ah, eu achei o efeito super kawaii! ><
    Adorei o tutorial :3

    Wonderland?

    ResponderExcluir
  2. Seu blog é muito fofo, amei tudo por aqui, as imagens então nem se fala hehe

    bjos

    ResponderExcluir
  3. AMEI O TUTORIAL, COMO SEMPRE ARRASANDO EM MARINA =D SÓ FALTOU UMA COISINHA QUE EU QUERIA COLOCAR ! É O FUNDO OU UM BACKGROUND QUE FICA ATRÁS DOS COMENTÁRIOS, TIPO ESSE SEU ROSINHA SAKAS ? SE PUDER, ME EXPLICA ! SE NÃO PUDER, COME CHOCOLATE ENTÃO Ú,u'

    ResponderExcluir
    Respostas
    1. Obrigada!

      Acho que vou comer chocolate -q

      É só usar esse tutorial aqui ó: http://anjoemguerra.blogspot.com.br/2012/07/retirando-fundo-cinza-dos-comentarios.html e trocar a cor cinza pela cor que você quiser.
      Espero que dê certo ^^

      Excluir
  4. Adorei o tuto, flor!
    usei lá no meu blog!
    www.mundomaniateen.blogspot.com
    Cacau

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!