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/AVvXsEiOzUjEy7hbuiV9ENe1MX2UxqWIPi7sN68lD7h5u0LZFZf8Pp8h6Ns99aSWEs4wk1ai-TIJQkN_F-gCK4Xgt5QXpWCNr4-XlEDKseiPxjBUxAOIsebJzIScM0zDITjleHfsqa2pvj3O4WM/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!!!

9 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. Muito bom o tutorial,antes eu tentava e nada dava agora deu rs

    Sorteio layout personalizado

    ResponderExcluir
  5. Como pode fazer pro avatar ficar quadrado? Não achei legal ele assim redondo, mas fora isso eu gostei do tutorial.

    ResponderExcluir