28.4.14

Personalizando área dos comentários:

Casual outfit

Hey pessoal, o MB vai ajudar mais uma blogueira, agora vamos aprender a personalizar a área dos comentários, espero que ajudem vocês e que vocês comentem dizendo o que achou.


O código foi pego no blog  Cherry Bomb! (então créditos)  eu apenas personalizei as cores, modifiqueialgumas coisinhas pra disponibilizar pra vocês 

ATENÇÃO:
Antes de começar o tutorial eu recomendo que vocês façam em um blog de testes primeiro ou baixe seu modelo para evitar possíveis transtornos! 

Vá no seu HTML e procure por: #comments e apague todo o código que o acompanha: (Mas caso você tenha sua área de comentários modificada por este tutorial www é só substituir o segundo código).


#comments {
  background: $(comments.background);
  padding: 15px;
}
#comments .comment-author {
  padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
  color: $(post.title.text.color);
}
#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}
.avatar-image-container {
  margin: .2em 0 0;
}

E no lugar cole esse:

#comments h4 { /* Este é titulo do formulario, onde mostra "X Comentários" e "Postar um comentário" */
margin:0;
color:#ff4d8e;
font-family: Lucida Handwriting;
font-weight: normal;
font-size:26px;
text-shadow: none;
}
#comments-block .comment-author { /* O espaço do nome de quem comentou */
background: #FFF; /*Cor de fundo do nome de quem comentou*/
color: #8fddf6; /*Cor da fonte*/
font-family: Trebuchet MS; /*Nome da fonte*/
font-size:16px; /*Tamanho da fonte*/
border-bottom: dashed 1px #8fddf6; /*Borda de baixo do nome*/
padding: 5px;
margin:.5em 0;
height:30px; /*Altura do espaço do nome*/
font-weight: normal; /*Peso da fonte. Mude de normal para strong se quiser o texto em negrito*/
}
#comments-block .comment-author a:link {
text-decoration: none;
}
#comments-block .comment-body { /* Area do texto do comentario */
background: #FFF8DC; /*Fundo da área do comentário*/
margin-top: -2px; /*Margem externa do topo*/
padding: 5px;
font-family:'Oleo Script', cursive; /*Nome da Fonte*/
font-size: 15px;/*Tamanho da fonte*/
color:#696969; /*Cor da fonte*/
width: 480px; /*Largura da área dos comentários, altere de acordo com seu blog*/
/*Bordas arredondadas da área do comentário*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/*Fim do código da borda arredondada*/
}
#comments-block .comment-footer {
margin:7px 0 2em;
line-height: 1.4em;
font-size: 65%; /* tamanho da fonte da data do comentário */
text-align: right; /* alinhamento da data do comentário */
letter-spacing:.1em;
}
#comments-block .comment-footer a:link{
background: #FFFAFA; /*Fundo da data do comentário*/
}
.deleted-comment a {
margin: 10px 0 2em;
font-style: italic;
color: #ccc; /*** cor do recado de 'comentário deletado' ***/
}
 
O próprio código já diz o que pode ser feito né? 
Dicas, nos trechos: border-bottom: dashed 1px #8fddf6; /*Borda de baixo do nome*/ você pode alterar o tipo de borda conferindo este link (www).
Vocês tbm podem alterar as fontes usando este tutorial (www).
Agora procure por: /* Content perto deste código localize body { e cole o código abaixo ANTES de body { .


div.avatar-image-container {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
box-shadow: 1px 1px 3px #a7a7a7; /*Sombra do avatar*/
margin-top: -2px; /*Margem externa do topo, para alinhar o avatar*/
}
div.avatar-image-container img {
display:none;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}
/*Efeito de quando passar o mouse em cima da foto*/
div.avatar-image-container img:hover {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
opacity: 0.8; /*Opacidade*/
-moz-opacity: 0.8; /*Opacidade*/
-webkit-opacity: 0.8; /*Opacidade*/
}
div.avatar-image-container img.delayLoad {
display:block;
}
Prontinho gente agora é só salvar ;D 
fonte: www

2 comentários:

  1. Oi! Meu e-mail é mari_falk@hotmail.com
    Pode me enviar um e-mail? Eu te respondo com a senha do meu blog e você faz algumas coisas nele pra mim, como combinamos ok?

    Bjs e obrigada.

    oficialsonhosdegarota.blogspot.com.br

    ResponderExcluir

- Se tive alguma dica, diga! =)
- Alguma dúvida ou algum pedido? Comente!
- Sim, visito o seu blog, mande o link! =D
-Favor não ofender ninguém, elogios e criticas são bem vindos, mas mantem o respeito!
Obrigada, MB!

Copyright © 2016 | Design e Código: Mistério do Brilho e Sanyt Design | Tema: Viagem - Blogger | Uso pessoal • voltar ao topo