Personalizar comentários incorporados

cantinho



















Olá galerinha. Estou postando a vocês uma personalização que é uma junta do que eu achei no Mundo Blogger e no blog da Cherry Bomb. No Mundo Blogger encontrei o código para personalizar os comentários incorporados que por conta de algumas mudanças estava meio complicado de fazer. E no Cherry Bomb encontrei personalizações que ficaram lindas porém o código não funciona em comentários incorporados!

Bom, juntando os dois saiu esse cantinho dos comentários:
2
Entre no painel do blogger e vá em Modelo>> Editar HTML.
Depois clique em Prosseguir e selecione Expandir Modelos de Widgets.
Aperte o Ctrl+F e pesquise por /* Comments.
Selecione tudo até antes de /* Footer, como mostra a imagem e delete.
1
Depois é só colar esse código abaixo e ir alterando as cores que deseja.
/* 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:#000000 !important; /*--- cor da fonte do botão reply--- */
text-align:center;
text-decoration:none;
background: #ccc;  /*--- cor de fundo do botão reply--- */
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); /*--- cor de fundo gradiente--- */
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );/*--- cor de fundo gradiente--- */
border:1px solid #C0C0C0;  /*--- 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:#fff; /*--- cor de fundo do botão reply houver--- */
border:1px solid #999; /*--- 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; tamanho da fonte da data do comentário */
text-decoration:none; color:#666; /* -- cor do link da data do comentário -- */
background: #b9ff46; /*Fundo da data do comentário*/
margin:7px 0 2em;
line-height: 1.4em;
text-align: right; /* alinhamento da data do comentário */
letter-spacing:.1em;
}
.comment-content{margin:0 0 8px;padding:0 5px;
}
.comments .comment-block{
margin-left:45px;
position:relative;
background:#ff8eae; /* -- cor de fundo do comentário -- */
/* ---border:3px solid #C0C0C0;  cor da borda do comentário ---*/
/*Bordas arredondadas da área do comentário*/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
/*Fim do código da borda arredondada*/
}
.comment-header{ /*--- linha onde fica o nome do autor do comentário --- */
background: #FFF;;   /*--- cor de fundo--- */
font-size:18px;
border-bottom: double 4px #8fddf6; /*Borda de baixo do nome*/
/*---border-bottom:1px solid #C0C0C0;  cor da borda --- */
padding:5px;
font-family: Lucida Handwriting; /*Nome da fonte*/
font-weight: strong;
}
.comment-header a{
color: $(link.color); /*--- cor do link nome do autor do comentario --- */
color: #b318c5; /*Cor da fonte*/
font-family: Lucida Handwriting; /*Nome da fonte*/
font-size:16px; /*Tamanho da fonte*/
font-weight: strong;
}
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXLgiYQJ3cZg__GksaZepq2wyyjLfQHCZ3pUbyhVd9wFUeKOVm0iHeajZWfa0YmEfJge2b2BJhmh6rZzmd3GpOLOq3tL_1IOu13-edI-EBKrJ0j6UB4C67Mrm4hLBQdxdaBLpmlH8sxc/s1600/imagem-arrow.png) top right no-repeat; /*--- imagem arrow---*/
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
box-shadow: 1px 1px 3px #a7a7a7; /*Sombra do avatar*/
margin-top: -2px; /*Margem externa do topo, para alinhar o avatar*/
}

Personalize como quiserem…
Créditos a Cherry Bomb e ao Mundo Blogger.
BJKS!!!

7 comentários :

  1. O tutorial é mto bom, tentei já fazer no meu mas nunca funciona devido o html ser personalizado.. >.<

    www.ecleticus.com

    ResponderExcluir
    Respostas
    1. Jeff precisa ver o nome dos campos certinhos que tem no seu html, para dar certinho... Verifica se o nome existe no seu código porque as vezes ao invés de ser .comments é #comments.
      São detalhes.

      Excluir
  2. Ótimo tuto flor!

    Seu blog também é muito fofo, eu adorei :)

    bjãoo

    ps*** confirmação de palavras???? ai ai ai

    ResponderExcluir
    Respostas
    1. Não flor, é que o meu não deu certo com # na frente só deu certo com o . na frente.

      Excluir
  3. Adorei o tutorial, super simples!!

    Beijos e boas vibrações:)
    www.estiloatrevidos.com

    ResponderExcluir
  4. Fico feliz que tenha ajudado!
    bjks!

    ResponderExcluir