Templates e Acessórios: Comentários

Postagens Recentes

Mostrando postagens com marcador Comentários. Mostrar todas as postagens

20 de mai. de 2013

Usar os comentários do Facebook e do Blogger no blog

Depois de tantos comentários e pedidos a respeito desta tutorial, resolvi refazê-la. Sei que deveria ter feito isso antes, mas vou me agarrar naquele velho ditado: "Antes tarde do que nunca"

O Facebook fez alterações em seus códigos, assim como o Blogger na estrutura de seu HTML, por isso o antigo hack já não funcionava mais, mas aí está, toda a tutorial reformulada, em 2013 para o novo editor do Blogger...

É necessário abrir o Facebook e fazer o login. Depois, clique neste link:

https://developers.facebook.com/apps

Você irá criar um aplicativo para seu blog, por isso atenção !

Clique no botão " + Criar Novo Aplicativo"

Agora abrirá uma janela...

Preencha as caixas como no modelo, depois clique em "Continuar". Perceba no entanto, que deverá aparecer a inscrição "Correto" e "Avaliable", ou não dará certo.

Preencha a capitcha conforme o exemplo.

Pronto, agora você será direcionado a uma página onde aparecerá o número do ID de seu aplicativo. Precisaremos dele para instalar os comentários em seu Blogger.

Deixe a página aberta ou anote o número do seu aplicativo, volte até o seu blog, vá em "Modelo". Clique em "Editar HTML"

Ao abrir o editor, dê um clique em cima do painel. Clique então nas teclas CTRL + F. Abrirá uma pequena janelinha. Procure então por

<head>

E abaixo dele cole este próximo código, colocando no local que se pede o número do aplicativo do Facebook.

Salve !

Procure por

Imediatamente abaixo do código cole o este próximo código: (número grifado em rosa representa a largura da área do Facebook, troque-a caso necessário.)

SALVE !!! Esta prontinho, os comentários do Facebook já estão em seu blog.

»»Leia mais...

Substituir comentários do Blogger pelo sistema do Facebook

. Elke di Barros | 01:33 183 comentários:

Preencha a capitcha conforme o exemplo.

Pronto, agora você será direcionado a uma página onde aparecerá o número do ID de seu aplicativo. Precisaremos dele para instalar os comentários em seu Blogger.

Deixe a página aberta ou anote o número do seu aplicativo, volte até o seu blog, vá em "Modelo". Clique em "Editar HTML"

Salve !

Clique então em Ir para um widget e depois clique em Blog1

Agora clique na setinha que tem ao lado para abrir a tag.

Procure por

<b:includable id='comments' var='post'>

Clique então na pequena setinha que tem ao lado para abrir a tag.

Imediatamente abaixo do código <b:includable id='comments' var='post'> cole o este próximo código: (número grifado em rosa representa a largura da área do Facebook, troque-a caso necessário.)

SALVE !!! Esta prontinho, os comentários do Facebook já estão em seu blog.

Possivelmente você não estará vendo a caixa do Facebook, isso é porque ainda não ocultou os comentários do Blogger. Proceda então da seguinte forma:

Clique em Configurações, depois em Postagens e comentários, clique então na pequena setinha na caixa que está a frente de Local de comentários, ao abrir a janela, clique em Ocultar e depois em Salvar configurações.

»»Leia mais...

17 de mai. de 2013

Personalizando os comentários do blogger

. Elke di Barros | 02:33 5 comentários:

Mais um código CSS para personalizar a área de comentários do Blogger. Esse é bem cute mas poderá ser modificado livremente por você, bastando fazer alterações nos códigos.

Procure por <b:skin>...</b:skin>

Abaixo dele, cole o próximo código:

»»Leia mais...

14 de abr. de 2013

Usar comentários do Facebook e Blogger juntos no blog

. Elke di Barros | 04:58 95 comentários:

DEMO

Para quem quer o sistema de comentários do Facebook em seu blog, conforme ensinei neste post mas não quer perder o sistema de comentários do Blogger, eis uma solução: coloca-los em sistema de menu de abas, assim, seu leitor decidirá onde comentar. Para isso é necessário conseguir o ID do Facebook. A primeira coisa a fazer é se logar no Facebook, depois clique AQUI e escreva o endereço completo de seu blog.

Depois clique em "GET CODE", abrirá uma janela, copie e cole todo o código em algum local (pode ser o bloco de notas) para separar apenas o número.

No modelo de seu blog clique em Personalizar

Cole então o código abaixo no local indicado.

/*Sistem comentarios Facebook e Blogger------------------------------------------------*/
.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { background-color: #808080; float: left; padding: 5px; margin-right: 3px; cursor: pointer; }
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Volte ao modelo de seu blog

<head>

E depois dele cole o seguinte código, colocando o número do ID do Facebook no local indicado.

Salve.

Clique então em Ir para um widget e depois clique em Blog1

Procure por <b:includable id='comments' var='post'>...</b:includable>

Procure por <div class='comments' id='comments'>

Troque-o por: (número grifado em rosa representa a largura da área do Facebook, troque-a caso necessário.)

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comentários no Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comentários
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comentários
</div><div class='clear'/>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='52' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Procure agora por:

<b:includable id='comment-form' var='post'>...</b:includable>

Clique na setinha para expandir.

Agora procure por:

<h4 id='comment-post-message'>
<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>

Onde estiver o número: 410

Troque-o por: 1410

Salve e pronto

»»Leia mais...

Dar estilo aos comentários do novo Blogger

. Elke di Barros | 04:23 9 comentários:

Ah, quem disse que a área de comentários do Blogger tem que ser essa coisinha sem graça ? Vamos modificar tudo dando uma corzinha e inserir botões ?

Fácil, fácil...

Procure por <b:skin>...</b:skin> e clique na setinha ao lado para abrir a área.

Procure então por:

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

Substitua então pelo código abaixo:

/*Comentario personalizado----------------------------------------------------------------*/
.comments {
background: #808080;
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
background: #eee;
padding: 10px 10px 10px 10px;
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #ccc;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: none;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px; font-size:12px; background:#cccccc;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;

}
.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:bold;
}
.comments .comments-content .user a {
color:#cccccc; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
margin:0 0 8px;
}

.comment-header {background-color: #F4F4F4;
border: thin solid #E6E6E6;
margin-bottom: 5px;
padding: 5px;
}
.comments .comments-content .comment-content {
text-align:none;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #cc0000;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
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;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}

Salve.

»»Leia mais...

9 de out. de 2012

Inserir o hack "Responder" comentários no Blogger

. Elke di Barros | 11:51 11 comentários:

Há tempo o Blogger inseriu em seus modelos originais o hack "Responder comentários". O problema é, quem baixou template da net ou modificou seu template ficou sem esse hack em seu blog. Para resolver o problema e poder responder aos comentários em seu blog terá que fazer a seguinte alteração:

Vá até o "Modelo de seu blog", clique em "Editar HTML"

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Clique em "Expandir modelos de widget"

Procure agora por:

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

Troque-o por:

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/>
<b:include data='post' name='comments'/>
</b:if> </b:if>

Agora é só salvar.

Aqui dica de como personalizar a área de comentários estilo balão
Aqui outro modelo
E eis aqui, outro modelo

»»Leia mais...

25 de abr. de 2012

Dar estilo aos comentários do novo Blogger

. Elke di Barros | 11:32 3 comentários:

Mais um modelito de área de comentários personalizada.

Vá até o Modelo de seu blog, clique em Editar modelo

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por:

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

Substitua então pelo código abaixo:

/* Comments
----------------------------------------------- */

#comments-block.avatar-comment-indent {margin: 2em 0 1.5em !important;position: relative;}
dl#comments-block {line-height: 1.5em;margin: 2em 0 1.5em !important;}
#comments-block .comment-author {color: #fff;font-size: 15px;font-weight: bold;margin-left: 60px;}
#comments-block .comment-author a, dl#comments-block dt.author-comment a {color: #fff;text-decoration: none;}
#comments-block .avatar-image-container {background: #fff;border: 1px solid #B6B6B6;height: 70px !important;left: 0;margin-top: -10px;position: absolute;width: 70px !important;}
#comments-block .avatar-image-container img {border: medium none !important;float: right;height: 70px !important;width: 70px !important;}
#comments-block .avatar-image-container.avatar-stock img {border-width: 0;padding: 0;}
.commentauthorname {background: none repeat scroll 0 0 #cc0000;border: 1px solid #fff;color: #fff;padding: 0 20px;position: relative;z-index: 99;}
#comments-block .comment-body {background: none repeat scroll 0 0 #eee;border-bottom: 2px solid #E6E6E6;font-size: 14px;margin: 0 0 30px;padding: 5px 5px 20px 90px;}
#comments-block .comment-body p {margin: 0 0 0.75em;}
#comments-block .comment-footer {background: none repeat scroll 0 0 transparent;border: medium none;font-size: 12px;font-style: italic;font-weight: normal;margin: 0 5px;text-decoration: none;}
#comments-block .comment-footer a {color: #444444;text-decoration: none;}
#comments-block .naacomment {background: none repeat scroll 0 0 #cc0000;color: #fff;font-size: 15px;font-weight: bold;margin-left: 60px;}
#comments-block .naacomment a {color: #fff;text-decoration: none;}
#comments-block .naacomment {background: none repeat scroll 0 0 #E0ECF8;color: #fff;font-size: 15px;font-weight: bold;margin-left: 60px;}
#comments-block .naacommentbody p {margin: 0 0 0.75em;}
#comments-block .naacommentfooter {background: none repeat scroll 0 0 transparent;border: medium none;font-size: 12px;font-style: italic;font-weight: normal;margin: 0 5px;text-decoration: none;}
#comments-block .naacommentfooter a {color: #444444;text-decoration: none;} /* start */
.comment .comment-header{background: none repeat scroll 0 0 #5787C9;color: #333;font-size: 15px;font-weight: bold;margin-left: 60px;}
.comment .avatar-image-container {-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px; border: 1px solid #B6B6B6;max-height: 70px !important;margin-top: -5px;width: 70px !important;position:relative;z-index:50;-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;}
.comment .comment-header a {color: #fff !important;text-decoration: none;}
.comment .comment-block {margin-left: 75px;}
.comment .avatar-image-container img {border: medium none !important;height: 70px !important;width: 70px !important;max-height: 70px !important;max-width: 70px !important;}
.comment-header cite {background: none repeat scroll 0 0 #cc0000;border: 1px solid #fff;color: #fff;padding: 0 20px;position: relative;z-index: 99;margin-left:-20px;}
.comment .comment-content {background: none repeat scroll 0 0 #fffff9;border-bottom: 2px solid #E6E6E6;font-size: 14px;margin: 0 0 30px;padding: 5px 5px 10px 10px;}
.comment .comment-actions a{
background: none repeat scroll 0 #9BCD9B;
color: #333333;
display: inline-block;
line-height: 1;
margin: 0 3px;
padding: 5px 8px !important;text-decoration: none;border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;}
.comments .continue a {display: inline-block;margin: 0;padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
background: #F7A84B;
padding:2px 8px; margin-right:10px;
-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;
}

.comment .comment-actions a:hover{background:#fff;text-decoration: none !important;}
cite.blog-author {background: none repeat scroll 0 0 #F4B51E !important;;}
.icon.blog-author {display:none;margin-left: 90px;width:60px !important;height:60px !important;position:absolute;right:5px;bottom:5px;top:10px;}

Salve

»»Leia mais...

Customizar a área de comentário do novo Blogger em estilo balão

. Elke di Barros | 10:43 12 comentários:

Vamos lá, nada de área de comentários sem graça em seu blog. Coloque seus comentários com estilo de balão.

Vá até o Modelo de seu blog, clique em Editar modelo

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por:

/* Comments
-----------------------------------------------

Substitua então pelo código abaixo:

/* Comments
----------------------------------------------- */

.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;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:#424242 !important;text-align:center;text-decoration:none;background:#EF560B;border:1px solid #000;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.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;background: #EF560B0}
.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{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#000;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#eee;border-bottom:1px solid #808080;padding:5px}
.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/AVvXsEh2AEG4sTlYYVLLjBJaNpgxuH-0BKGxPDFLFhvp6aVb8zo4iH45V31yF1dkshIMdMqruf222VyEi1NFS0rojL0BWCrs07LX3wSuw6cc7T6eAw76IOhUwy9ynkR7ZiLVTcwUufI1_cYVSzRA/s1600/EF560B.png) top right no-repeat;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}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #EF560B; background: #fff; border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

Se quer o balão em outra cor, salve a imagem da seta em seu PC, depois hospede em seu blog.

Substitua então os códigos acima pelo código de sua preferência.

Vermelho= cor da borda
azul=endereço da imagem
laranja=.cor dos botões