Hello pessoal, hoje trago um tutorial lindissimo que ví no Go Imagines e de como personalizar a área dos comentários o resultado será semelhante á esse:
para aprender clique em "Leia mais" e veja:
Pra personalizar seus comentários é só entrar no seu html (Design > Editar HTML) e procurar (F3)por }]]></b:skin> e acima dele colar o seguinte código:
/**=========== AREA GERAL DOS COMMENTS ===========**/.comments{width: 95% !important; /* largura da caixa de postagem, se sair pra fora do post diminua*/margin:0 auto;font-style: normal !important;font-size: 12px !important;font-family: verdana !important;background: url(http://migre.me/aC1IZ) !important; /* fundo dos comentários - se desejar coloque outro background (trocando a url) */border-radius: 10px; /* bordas arredondadas no fundo- se não quiser apague essa linha */box-shadow:0 0 5px #aaa; /* sombra na caixa do fundo - se não quiser apague essa linha */}/**== HEADING DOS COMMENTS (1 comentario, 2 comentários...) ==**/.comments h3,.comments h4{width: 98%;padding: 7px;margin: 10px 0 !important;color: #87CEEB !important; /* cor da fonte */text-align: center; /* alinhamento */text-shadow:0 0 2px #ccc; /* sombra – se não quiser apague essa linha */font-family:'Dancing Script' !important; /* fonte - se preferir troque */font-size: 37px !important; /* tamanho do texto - se preferir troque */}/**= BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone...) =**/.comments .comment-block {position:static !important; /* mantém o avatar na frente do bloco - não mude */background: #fff; /* cor do fundo da caixinha dos comentários */margin-left: 23px;padding: 0 15px 0 23px;border-top: 15px #FF80BC solid; /* borda encima da caixinha de comentário */border-radius: 5px; /* bordas arredondadas */box-shadow:0 0 3px #ccc, inset 0 0 11px #eee /* sombra na caixinha – apague se não quiser */}.comments .comments-content .comment {padding:20px 10px !important;margin-bottom:15px !important}/* estilos para o nome do autor do comentário */.comments .comments-content .user a{font-style:normal;border:0;color: #CD96CD !important; /* cor da fonte do nome de quem comenta */letter-spacing: 1px;font-family:'Dancing Script'; /* fonte do nome de quem comenta */font-size: 26px; /* tamanho da fonte */text-shadow:1 1px #aaa; /* sombra na fonte do nome */background: transparent;padding: 4px 36px;margin-left:-31px !important;border-bottom-right-radius:10px;margin-top:-2px}.comments .comments-content .user{font-style:normal;border:0;color: #FF80BC !important;letter-spacing:1px;font-family:'Dancing Script';font-size: 26px;text-shadow: 0 1px #aaa;background: transparent;padding: 4px 36px;margin-left: 11px !important;border-bottom-right-radius:10px;margin-top:-2px}/*Nome do autor do comentário hover*/.comments .comments-content .user a:hover {text-decoration:none !important;color: #A1DBE4 !important; /* cor do nome do autor do comentário quando passa o mouse */}/* estilo da data */.comments .comments-content .datetime a{background: none !important;font-family: times new roman; /* fonte - mude se desejar */float: right; /* posicionamento */font-size: 12px; /* tamanho da fonte da data */color: #fff !important; /* cor da data */border:0 !important;margin-top: -15px; /*aumente/diminua o nº para mover a data – negativo sobe e positivo desce*/}/* estilo do avatar */.avatar-image-container {min-width: 60px; /* determina um mínimo de largura */min-height: 60px; /* determina um mínimo de altura */padding:0 !important;margin-left: 30px!important; /*aumente/diminua o nº para mover o avatar p/ os lados */margin-top: 20px !important; /*aumente/diminua o nº para mover p/ cima/baixo */position: absolute !important;overflow: hidden !important;background: #fff;}.avatar-image-container img {border: 3px #EAEAEA solid; /* borda do avatar */margin:0;max-height: 48px;min-height: 48px;max-width: 48px;min-width: 48px;}/**=========== TEXTO DO COMENTÁRIO ===========**/.comments p{font-size: 14px !important; /* tamanho da fonte do comentário */font-family: Times new roman !important; */ fonte do comentário */text-shadow: 0 1px #eee !important; /* sombra na fonte */padding-left: 55px !important;padding-bottom: 20px;color: #888 !important /* cor do texto */}/**=========== BOTAO – RESPONDER ===========**//* botão responder do segundo nível */.comments .continue a {background: #87CEEB !important; /* cor do fundo */color: #fff !important; /* cor da fonte */float: right; /* posicionamento */padding: 8px !important;height: 10px !important;line-height: 15px !important;margin-top: -35px !important;}/* botão responder do primeiro nível, mais estilos para o botão do segundo nível */.comments .comment .comment-actions a,.comments .continue a {font-size: 11px !important;float: right;height: 10px !important; /* altura do botão */color: #fff !important; /* cor da fonte */padding: 6px;border: 0 !important;line-height: 10px;margin: 5px;margin-left: 40px;font-family: helvetica; /* fonte - mude se desejar*/text-shadow: 0 0;border-radius: .5em; /* bordas arredondadas */background: #CD96CD; /* cor do fundo */font-weight: 800;box-shadow: 0 1px 2px #666 /* sombra no botão - apague a linha se não quiser */}/* botão hover*/.comments .comment .comment-actions a:hover {text-decoration:none !important;background: #FF80BC; /* cor do fundo do botão hover */}/* estilos para bloco de respostas */.comments .comment-thread.inline-thread {background-color: transparent !important;margin-top: 40px;padding: 0.5em 1em;border-radius: 5px; /* bordas arredondadas – apague a linha se não quiser */}.comments .comments-content .comment-replies {margin-top:1em;margin-left:56px !important}.comments .continue {border-top:0 !important}.comments .thread-toggle,.icon.blog-author {display:none !important}/**======= Fim [candylland.org] [goimagines.blogspot.com] =======**/
Atenção: Testado somente no modelo Viagem/Travel!
bom é isso comentem a vontade, beijos Fabi
Awt..adoreei,fica super lindooo..adoro este blog rsrs..bjos
ResponderExcluirhttp://wwwconnectgirls.blogspot.com.br/
Obrigada Bia, volte sempre1
ExcluirUsava esse tuto no meu antigo lay, É LINDO!
ResponderExcluirBeijo
http://blog-pinkberry-oficial.blogspot.com/
http://lauraportifolio.blogspot.com.br/
Oiie realmente o efeito e lindo mesmo, visitando!
ExcluirEu não consigo fazer!
ResponderExcluiramei esse totorial me serviu muito obrigado pela dica
ResponderExcluirme ajudou bastante
ResponderExcluirobrigada flor
Oii, obrigadaaaa ameiiii o tutu, me ajudou bastante linda <3
ResponderExcluiraqui o resultado:
http://kawaiiitutoriais.blogspot.com.br/
OI queria saber qual a parte do código que é responsável , pelas cores do balão de resposta sabe ? porque nao consigo mudar as cores :/
ResponderExcluirgeekegirlie.blogspot.com
quero ser afiliada ?!
ResponderExcluirlerecilassuntos.blospot.com
ExcluirAmei o efeito! Fica super lindo no blog! Obrigada!
ResponderExcluirhttp://pattydiamond.blogspot.com.br/