24 de set de 2013

Personalização da área do comentário

                  
                                          Homenagem pra Tati do All Lovely and Fluffy
Oieee my cutes tudo bem(de novo)? Hoje eu vou fazer um goodie bem legal que é sobre como personalizar os comentários do blog fica um amor, olhe aqui como (mais ou menos)vai ficar:
            
(Foto : Cherry Bomb)
Aperte em leia mais para continuar o tutorial.



Agora vá ao Design  Editar HTML  e procure ( F3) por }]]></b:skin (é mais fácil procurar só ]]>)  e cole 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 [sonhandoacordada03.blospot.com] [goimagines.blogspot.com] =======**/
  Atenção: Testado somente no modelo Viagem/Travel!
Então você pode personalizar como quiser ou deixar assim mesmo fica lindo dos dois jeitos. Beijinhos <3

2 comentários:

  1. Esse tutorial é tudo de bom, parece pouco mas os comentários personalizados dão outra aparência ao blog.

    Bunny Crazy

    ResponderExcluir