Image Map

17/06/2012

Tutorial: Comentários personalizados- Balão de fala

 necessito de um colar igual :3
 Bom dia minhas esmaltólatras 
 Tudo bem com vocês? Espero que sim. Hoje vim trazer o tuto tão pedido, o de personalizar a área dos comentários! A postagem vai ficar grande porque tem muuuita coisa pra explicar!
 Primeiramente, o código completo não fui eu quem criei, foi o blog Templates e Acessórios, mas ele deixa poucas coisas que você pode mudar. Aí eu fiquei fuxicando no código uma meia hora até descobrir como mudar quase que tudo! Óbvio que coloquei no blog e, por causa dos pedidos, agora vou mostrar pra vocês! Ainda não viu como ele fica? Dá uma olhada:
é como se fosse um balão de fala
 Mas, escute bem você, copy-cat, se alguém usar, postar ou reblogar esse tutorial sem os devidos créditos, aiaiai. Vou denunciar sem dó nem piedade, pedir pras leitoras te lincharem, abrir processo e ainda puxar o seu pé a noite! A última pode até não ser verdade, mas o resto é! Eu demorei um bom tempo editando tudo, descobrindo as coisas aos poucos e usando os meus conhecimentos banzai (hahaha) nele!
 Minha raiva das plagiadoras á parte, vamos ao tutorial  
 Primeiro, vá em Design Editar HTMLEspandir modelos de widgt Tecle Ctrl+ F e procure por /* Comments
 Vai aparecer um código 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);
}
 Aí você apaga ele e no lugar coloca esse:

/* 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: #000000!important;text-align:center;text-decoration:none;background: #FFFFFF;border:1px dotted #000000;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:#FFFFFF}
.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: #000000;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: #CDB5CD;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#FFFFFF;border-bottom:1px dotted #000000;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(URL DA SETA) 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 dotted #000000;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:2px dotted #000000; background: #FFFFFF; border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

Você pode editar ele antes de colocar no Editar HTML ou depois, mas do mesmo jeito o que muda é:
Código lilás é a cor da borda, a cor do background, o modelo da e a largura da borda dos botões, respectivamente. O "dashed" significa pontilhado, mas você também pode mudar pra "solid" que é só uma reta.
Código rosa background dos botões (de Responder, Excluir, etc.)
Código azul cor do nome de quem comentou
Código dessa cor cor da data do comentário.
Código laranja é o tamanho da fonte, a cor do background e a cor, modelo e largura da linha que fica embaixo do nome de quem comentou.
URL DA SETAURL da imagem da setinha do "balãozinho".
Código vermelho tamanho, modelo e cor da borda da imagem de quem comentou.
Código fúchsia tamanho, modelo e cor da borda da área do comentário em si e o background da área do comentário em si.
 Não entendeu muito? Essa imagem ajuda:
clica que aumenta
 Só de ver esse código já te deu preguiça? Então eu te ajudo. Fiz uns modelos completos do comentário baseado em uma cor só (por exemplo: rosa, verde, azul, roxo), e caso alguém use eu quero créditos, ok? Eu prefiro que comente avisando, mas não é obrigatório. Vou colocar a cor, como fica e aí o código, ok? Agora vamos aos estilos!
Preto
/* 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: #000000!important;text-align:center;text-decoration:none;background: #FFFFFF;border:1px dotted #000000;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:#FFFFFF}
.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: #000000;font-weight:normal;text-decoration:bold}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color: #000000;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#FFFFFF;border-bottom:1px dotted #000000;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/AVvXsEgnNN01cBNMb9DpIaWuWwQKJbFrTf4zVQOsW8D8JgH62nQ0SKoMiPZfMkpJg_RcdAWoEFGA32RPrBkKEwO4Ju-jw2on3BJr6ZPUrMXR7XRUYME8S_z_3LukLofHSWGVBi-F-e7o15f-_HA/s1600/seta+preta.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 dotted #000000;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:2px solid #000000; background: #FFFFFF; border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

Rosa
/* 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: #FF69B4!important;text-align:center;text-decoration:none;background: #FAF0E6;border:1px solid #FF69B4;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:#FAF0E6 }
.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:#FF1493;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: #FF69B4;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#FFFFFF;border-bottom:1px dashed #FFE4E1;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/AVvXsEiot6YPT9ix-Xbrp1moadHqwoxt7RsO1GsHvm8QbEfR_PykNZqGUX_etgxLfZ_wZ5r5wtjeOY6lsOohtRKZn6qsaUrsnlFsP4ixs_vym-ESUrkK0mTeP2dRXQE21leifGVd9tKk6CqSdAQ/s1600/seta+rosa.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 #FFE4E1;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:3px solid #FF69B4; background: #FFFFFF; border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

Azul
/* 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: #00BFFF!important;text-align:center;text-decoration:none;background: #FFFFFF;border:1px dotted #00BFFF;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:#FFFFFF}
.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: #00BFFF;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: #87CEFA;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#FFFFFF;border-bottom:1px solid #87CEFA;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/AVvXsEjem8UjNUWwtu1DWzkaGv7iJccKLbgoD-vRto0x_S4D3jlOSLt0tm2fGTg4dtsYyG6JSIx0_hw992T9Mf0QMNyxh9qdOZeal5ilCsKiqe0B5xILUpR6hyphenhyphenKbAESPeyF8TqOFupACZmBkCWg/s1600/seta+azul.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 dotted #00BFFF;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:3px solid #00BFFF; background: #FFFFFF; border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

Verde
/* 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: #00FF7F!important;text-align:center;text-decoration:none;background: #FFFFFF;border:1px dotted #00FF7F;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:#FFFFFF}
.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: #00FF7F;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: #98FB98;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#FFFFFF;border-bottom:1px dotted #98FB98;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/AVvXsEgLaJKt3cEmO6LKjK150cS28UciHecmGVRcg-LACwQHdvsDOZZca2a7Vgl9bDzKncfif_TNxgJ8BbDyyuvBYrM8odxgXtDwi2rpKORLFpsIGAV0NuMf7VJgib7BQBy18odVJlycP2sQbBs/s1600/seta+verde.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 dotted ##98FB98;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:3px solid #98FB98; background: #FFFFFF; border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

Roxo
/* 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: #BF3EFF!important;text-align:center;text-decoration:none;background: #FFFFFF;border:1px solid #BF3EFF;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:#FFFFFF}
.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: #BF3EFF;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: #CDB5CD;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#FFFFFF;border-bottom:1px solid #CDB5CD;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/AVvXsEiy-oGrq1zapL8-ez0It8bRMw6RQokDwqc86TZ0dcuYC4G2bCIxVLuKqU8Itsh1FgkcwuFHF0N8sj9v0C1lrLkDm787Cb-KCZqLjZfbqQy0Dx43B3wTTGIR818tqGnCrI8VHZWI_jGoZyU/s1600/seta+roxa.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 dotted #CDB5CD;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:3px solid #BF3EFF; background: #FFFFFF; border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

 E agora pra quem quer fazer o seu próprio, precisa fazer a seta do "balãozinho". É bem fácil, você pode fazer no Photoscape usando um fundo transparente com o tamanho 14x51, fica pequeno mas é assim mesmo. Eu vou deixar aqui o modelo de como deve ser:
  Como antes, caso usem, creditem! Vou repetir isso infinitamente até entrar na cabeça das pessoas 
  E aí, gostaram? Espero que sim. Eu gostei, hahaha. O resultado é muito bonitinho e fofo, eu super recomendo! Além de não dar erro, pelo menos não no modelo Travel 
 É isso. Beijinhos com glitter :*

116 comentários:

  1. Nossa paula muito bom adoreei =)

    ResponderExcluir
  2. muito bom o tutorial ;)
    Convido vocÊ pra participar da Batalha de blogs lá no CMC--->http://blogcantinhodameninacrista.blogspot.com/

    ResponderExcluir
    Respostas
    1. Bom que gostou, flor! Okok, pode deixar que vou participar ;)

      Excluir
  3. Fica lindo, vou usar no meu próximo lay!
    happy-charllote.tk

    ResponderExcluir
  4. adorei o tuto paula.
    vou usar lá no blog.
    bjks
    worldofgirls-bykethleenribeiro.blogspot.com

    ResponderExcluir
  5. oi paulinha, desculpa comentar denovo, só vim avisar que troquei o url lá do blog.
    bjks
    http://worldofgirls-oficial.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Aaah, eu notei, hahaha! Fui retribuir e não deu certo, mas aí achei clicando na sua conta do blogger :3
      Obrigada por avisar!

      Excluir
  6. AAA que legal :D Ficou muito fofo *o*

    Beijos
    Anne
    meninasantenadas.tk

    ResponderExcluir
  7. Adorei! Os tutos daqui são sempre legais!
    Beijinhos!

    ResponderExcluir
  8. Aii,e a preguiça de fazer esse tuto enooorme ?
    Nanda <3

    delicatepintkies.blogspot.com

    ResponderExcluir
    Respostas
    1. Aaah, Nanda, mas é fácil se pegar os prontos ><

      Excluir
    2. Me convenceu, vou pegar o preto ok ?
      Nanda <3

      Excluir
  9. Que lindo o resultado! Adorei!
    Amei teu blog, é super fofo! Já segui. Dá uma passadinha no meu e segue se gostar?! Beijos!
    http://muore.blogspot.com.br/

    ResponderExcluir
  10. AH eu ja tinha visto esse tutorial, acho que foi no dicas para blogs, ou no ferramentas blogs, nem me lembro kk mais lá so tinha um estilo! fica mt fofo mesmo



    BEIJUXX
    http://ianapaulinhaaaa.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Eu vi lá no Templates e Acessórios, tá até creditado lá :3
      Bom que gostou, Iana!

      Excluir
  11. Essa área de comentários é super perfeita! Que bom que postou o tuto, amei :)
    Beijinhos!

    http://thesweet-fantasy.blogspot.com.br/

    ResponderExcluir
  12. Que lindinha essa área :)
    Mas eu prefiro deixar mais simples, dá menos trabalho, risos.

    Passa lá? 4-brownies.blogspot.com

    ResponderExcluir
  13. Fica muito lindo essa área personalizada assim, mas eu já alterei a minha de um outro jeito ;)
    -xoxo

    www.s2juuh.blogspot.com

    ResponderExcluir
    Respostas
    1. Bom que gostou, Juli! Aaah, legal do mesmo jeito, hahaha ><

      Excluir
  14. Paulinha, como se deixa a postagem organizada? (parágrafo, para pular linhas..) Tem algum código??? Se sim, qual é??
    Beijinhos!

    ResponderExcluir
    Respostas
    1. Tem alguns Ali, vou comentar lá no seu blog explicando!

      Excluir
  15. Ei gatinha amei♥Vou usar no novo lay do blog hehe...THANKS SO MUCH...OXI QUERIA PARTICIPAR DO SORTEIO MAS NÃO VAI DAR. :(
    Amor,como terminou lá o encontro?^Foi legal?Tive que sair!
    BEXOOS

    www.girlycute.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Bom que gostou, fofa! Aah, que pena que não vai participar :/
      Nem sei flor, acabei saindo bem cedo!
      Beijinhos :*

      Excluir
  16. Adorei o modelo azul Paula. Linhas no estilo dotted sempre me encantam, haha. Beijinhos :*

    http://www.world-cutest.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Bom que gostou, flor! Somos duas então! hahaha :3

      Excluir
  17. Amei o tutorial, fica super lindo *--*
    http://themudancas.tk/

    ResponderExcluir
  18. Que tutorial bom!
    Lindo aqui viu!
    bjinhos e boa semana!

    http://hugmerightnow.blogspot.com.br/

    ResponderExcluir
  19. Noosa! Tuto peeerfeito. Lindaa, já too seguindo aqui será que podeeria retribui a visiita?

    meninaperfeitami.blogspot.com

    ResponderExcluir
  20. Queria avisar que mudei o nome e URL do meu blog (Mundo Doce). Aqui está o novo endereço: http://london-is-my-refuge.blogspot.com.br/

    por favor, altere na sua página de parcerias, obrigada (:

    ResponderExcluir
  21. Aqui é muito fofo, adoro passar por aqui...bjs linda
    www.esmaltesdadeiia.blogspot.com

    ResponderExcluir
  22. Paula, sua entrevista há saiu lá no blog!! Olha só: http://london-is-my-refuge.blogspot.com.br/2012/06/piink-cookie-blog-vencedor-do.html

    ResponderExcluir
  23. fica lindo eu ia até te pedir para fazer esse tutorial mais esqueci:* ele só funciona na modelo de comentário incorporado ou funciona nos outros também?
    http://blogbondmais.blogspot.com/

    ResponderExcluir
    Respostas
    1. Acho que funciona nos outros, mas não testei! :3

      Excluir
  24. Que lindo flor *-*
    adorei mesmo, dá um charme super perfeito no blog
    beijos~~

    www.the--baby.blogspot.com

    ResponderExcluir
  25. Ameo o blog e o tutorial, já estou seguindo! bejuz!

    senhorutasimperfeitas.blogspot.com

    ResponderExcluir
  26. O novo layout ficou liiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiindo, amei demais!

    ResponderExcluir
  27. Hum gostei do tutorial,o blog mudou bastante né? haha,ficou lindo.

    http://caprichadasbr.blogspot.com.br

    ResponderExcluir
  28. Não esqueci dos créditos não tá Paulinha !?
    É que ainda não fiz nenhum post depois que coloquei. To meio "de férias" do blog, mais logo logo volto.
    beijinhos ;*

    ResponderExcluir
  29. Flor eu usei no meu blog ok creditei lá no Come Back Soon Beijos modaecompaniaup.blogspot.com

    ResponderExcluir
  30. Eu coloquei o código, fui ver, e apareceu aquele horrível cinza :\

    ResponderExcluir
    Respostas
    1. É que tem que usar o código certo pra tirar o cinza, flor :/

      Excluir
  31. Usando, adorei, coloquei na página de créditos o seu link :)
    Beijos...

    http://just-giirls.blogspot.com.br/

    ResponderExcluir
  32. To usando o modelo preto no meu outro blog também kk', coloquei também seu link na página de créditos.
    Beijos&Abraços...

    ResponderExcluir
    Respostas
    1. Aaawn, brigada por avisar, flor :3
      Vou ir lá dar uma olhadinha ^^

      Excluir
  33. Oiee, princess!! Ameii esse post!! Sabe, aquilo que você falou ali, que se copiarem esse post, você ia denunciar e tudo mais, foi muito profundo!! Uma vez, copiaram um post meu, e eu não gostei nada.. Eu só ficava batendo-boca com a "pessoa" que fez isso.. Mas agora, se copiarem, eu já sei o que fazer!! Eu coloquei no meu blog e ficou muito legal!! Briigadiinha por esse tutorial!! Bjiinhos♥

    ResponderExcluir
  34. Que lindooo! Amei *-*! Vou usar e os créditos estão na página de créditos.

    Beijooss

    --> Sweet Dreams

    ResponderExcluir
  35. A-D-O-R-E-I!!! Muito obrigada, ajudou muito!

    ResponderExcluir
  36. Linda! *-* que código mais cute, vou usar com certeza, Olha sem pedir muito.. Segue meu blog ? Estou te seguindo ;)

    <a href="http://crazyfor-candy.blogspot.com.br</a>

    ResponderExcluir
  37. ridícula , isso é do mundo blogguer vc não desenvolveu nada a não ser mudar as cores !!!

    ResponderExcluir
    Respostas
    1. Ridícula você, ali tem os créditos pro blog que na verdade é o Templates e Acessórios, e não, eu não mudei só as cores, mudei bordas, efeitos entre outras coisas.
      Só que pelo visto você tem o complexo de justiceiro e nem quis ler o post antes de comentar qualquer coisa me xingando.
      Faz um favor, aprende a reclamar direito das coisas pra depois vir falar comigo.

      Excluir
  38. Me faz um favor , primeiro aprende a montar seu próprio código e depois quando vc postar seu próprio código vc faz suas ameaças de botar na justiça e puxar o pé alheio !!! quem disse que eu não li o post??? só que código reblogado vc pede créditos ao desenvolvedor do código e não a vc só pq mudou umas cores e pôs uns pontilhadinhos qualquer menininha de 10 anos hj em dia faz isso !!!

    ResponderExcluir
    Respostas
    1. Eu já montei meu próprio código sim, pode procurar aí, Menu Queijo no Rolete.
      Não te ameaçei em nada, viu anônima? Eu pedi créditos ao desenvolvedor, só que eu também mudei e pedi créditos pelos meus modelos prontos, com as setas feitas por mim.
      Qualquer menina de dez anos faz? Ótimo pra elas. Até porque qualquer menina de dez anos também pode vir xingar alguém sem mostrar a cara, achando que pode botar moral. Sério que eu to errada? Você não tem coragem nem de dizer quem você é e vem falar mal de mim.

      Excluir
  39. Fui lá ver o menu queijo no rolete , ficou bonito !

    bjssssssssss

    ResponderExcluir
  40. vou plagiar seu tuto do menu e dizer que fui eu que fiz

    ResponderExcluir
  41. mas meu blog é de plágio mesmo , não tem problema me achar

    ResponderExcluir
    Respostas
    1. Tudo bem então, seja feliz com a sua vida ^^
      Provavelmente você não é boa em muitas coisas e por isso copia as outras pessoas e diz que foi você quem fez todas essas coisas, pra se sentir como alguém importante.
      Não quero criticar você flor, mas porque não tenta algo diferente? Porque não tenta mudar? Você seria uma pessoa e uma blogueira muito melhor, posso te garantir!
      Seja livre pra fazer o que quiser, a partir de agora lavo minhas mãos para o seu caso.

      Excluir
  42. vou pegar um tá bjinhuus

    ResponderExcluir
  43. Oi flor vou postar no meu blog mais pedi para eles dar os devidos créditos ok? BEIJOS :)

    ResponderExcluir
  44. Ooi!
    Flor, eu queria saber, como você colocou aquele coração, ali em cima na guia? É que eu sou novata, e eu não sei fazer ainda :/, pesquisei e pesquisei, não achei nada. Meu blog ta com o Layout dele perfeito, mas agora só falta aquele icon. Pode me ajudar?
    Aah, amei esse tuto dos comments, usei no meu blog!

    ResponderExcluir
    Respostas
    1. Oi flor! Aaah, é bem fácil, vai no seu blog e clica em Layout, bem em cima vai ter um gadget escrito "Favicon" clica ali e escolhe o mini gif/favicon que você quer colocar ^^
      Espero que consiga! Okok, bom que gostou! :D

      Excluir
  45. Obrigada, eu usei o azul em um dos meus blogs! Sou muito grata a você!

    ResponderExcluir
    Respostas
    1. Aaaah, disponha *---* Fico feliz que tenha usado :3

      Excluir
  46. Flooor, eu usei no de teste e amei e logo-logo vou colocar no "normal", ameeei o tutorial.

    http://tandateste2.blogspot.com.br/ (teste)

    http://tandafriends.blogspot.com.br/

    ResponderExcluir
  47. ain bigadú fofs,valew mesmo,nao sabe como me ajudou,espero que deus te de em dobro tudo aquilo que voçe compartilha com a gente,bejin,abraços e muit sucessos,
    http://so-sei-que-estou-amando.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ooown, disponha flor >< E muito obrigada! :3 Fico feliz que tenha ajudado!

      Excluir
  48. O meu deus que trabalhão vc deve ter tido :o Se eu vir isto sem créditos eu ainda mato alguém >.<

    ResponderExcluir
  49. Nossa,vc tem me ajudado tanto com seus tutos. Amei o blob,e vou visitar sempre que possível,beijinhos!
    Se quiser,depois de uma passadinha no meu. Graças a vc consegui fazer o cabeçalho com a medida certa haha'...Ficou lindo,e muito obg!
    http://omundomagicodelolo.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Own, brigada >< Fico feliz em ajudar *u* Aaah, vou ir lá sim, pode deixar :3

      Excluir
  50. irei usar no próximo layout (está a ser feito) :3

    ResponderExcluir
    Respostas
    1. Okok, quero ver depois, ein? o3o

      Excluir
    2. aaawn,amei amei amei
      usei no meu blog
      veja como ficou? http://cajuhmakeup.blogspot.com

      Excluir
    3. Obrigada flor, bom que gostou *---*
      Vejo sim! :D

      Excluir
  51. Oi flor , adorei o tuto , valeu mesmo. E só pra avisar , eu usei o verde no meu blog ;) Obrigada mesmo , e adorei o blog!
    www.umcantoadolescente.blogpot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada flor, bom que gostou! *---* Obrigada <33
      Vou ir lá dar uma checada :D

      Excluir
  52. Ficou liindo no meu blog,eu adorei o tuto e a personalização,fica bem mais lindiinhoo... Eu usei o rosa no emu blog,vou ver se eu vou re-blogar no meu blog e claro,colocar os créditos aquii... Beijão!

    ResponderExcluir
  53. AMANDO O BLOG!!! tutos maravilhosos!! Estou usando!

    ResponderExcluir
  54. Oi, adorei os balões de comentários, fiquei com o preto para o layout novo do meu blog.
    esse é o blog de teste (http://the-passionate-heart.blogspot.com.br/)
    esse é o meu blog (http://tendenciaane.blogspot.com.br/)
    Valeu!

    ResponderExcluir
  55. Olá, adorei o tutorial, estou usando no meu novo layout, obrigada. Beijos
    (http://uma-gota-de-agua.blogspot.com.br)

    ResponderExcluir
  56. Obrigada ajudou muito no meu novo template! ;)
    todosporai.blogspot.com.br

    ResponderExcluir
  57. Oi muito legal seu tutorial, eu estou usando agora no meu blog o roxo....
    Sera que posso postar no blog ? Vou colocar aquela imagem !
    Obrigado belo Tuto
    Photography Day

    ResponderExcluir
  58. Obrigadaaaaa!!! Primeiro blog que ensina tudo certinho e eu consigo fazer direito hahahhaha obrigada mesmo! Peguei o pink, tá?
    Sucessso!!!! Já sou fã! ♥♥♥
    www.natalibispo.blogspot.com

    ResponderExcluir