21.4.16

M.T.: Modelo diferente para a Área dos Comentários

Maratona de tutoriais - Março 2016 (porém em Abril): Modelo diferente para área dos comentários, como a do Sem Óbice


Olá, como vão vocês?
Eu estou com zika e tive três dias de atestado, porém não vim aqui, infelizmente. 

Zika é uma coisa de louco, sinceramente. Eu morro de sono e fico mole o dia todo, durmo o dia todo, sinto dor o dia todo e fico conçando o dia todo... Não é legal. Porém eu sinto que precisava desse tempo em casa para descansar, só fico triste por não ter ido na Bienal do livro.

Mas vamos à Maratona que disse que quando tivesse tempo, postaria. Por isso, estou aqui, porque tenho bastante tempo para isso.  

O modelo original para Área dos Comentários pertence ao blog Go Imagine, se quiserem ver como é o modelo original, link nesse  link. Porém o modelo que irei deixar aqui é diferente, eu o modifiquei e está assim:


[clique na imagem para vê-la melhor]
Abracinhos para Yuka e Izaberu que indiretamente contribuíram para o post.
Como o background que usei de fundo da mensagem não é meu, eu coloquei no código um background que eu fiz, clique aqui para vê-lo. Caso queira o background que eu usei na imagem, me avise por e-mail - clique em contatos. 

Antes de colocar o código do modelo: 
Vá em Modelo > Editar HTML > clique em Formatar Modelo > Ctrl+f > e procure por </head> 

Acima dele, copie e cole isso:


<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Geo' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'/>


Ainda em Modelo, procure por ]]> e cole acima dele o código abaixo: 


/**=========== 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: 5px !important;
font-family: 'Alef' !important;
color:#FFFFFF !important; /*-- cor da letra --*/
background: url(http://colourlovers.com.s3.amazonaws.com/images/patterns/5301/5301507.png) !important; /* fundo dos comentários - se desejar coloque outro background */
border-radius: 0px; /* 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 */
}
.comment-form p { /* Mensagem personalizada da área dos comentários */
background: #EDF2FF !important; /*-- cor do fundo --*/
padding: 20px; /*-- margem interna --*/
font-size: 5px;
font-family: 'Alef';
color:#FFFFFF !important; /*-- cor da letra --*/
margin: 20px; /*-- margem externa --*/
text-align: center; /*-- alinhamento do texto --*/}
/**== HEADING DOS COMMENTS (1 comentario, 2 comentários...) ==**/
.comments h3,.comments h4{
width: 90%;
padding: 7px;
margin: 10px 0 !important;
color: #000000 !important; /* cor da fonte */
text-align: left; /* alinhamento */
text-shadow:0 0 2px #ccc; /* sombra – se não quiser apague essa linha */
font-family: 'Geo', sans-serif;!important; /* fonte - se preferir troque */
font-size: 20px !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 #CAE1FF solid; /* borda encima da caixinha de comentário */
border-radius: 0px; /* 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: #363636 !important; /* cor da fonte do nome de quem comenta */
letter-spacing: 1px;
font-family: 'Cookie', cursive; /* fonte do nome de quem comenta */
font-size: 25px; /* 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:'Cookie', cursive;
font-size: 25px;
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:bold 11px courier new;
float:right;
font-size:9px;
color:#aaa;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
min-width: 50px; /* determina um mínimo de largura */
min-height: 50px; /* 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;
border-radius: 100px; /* bordas arredondadas – apague a linha se não quiser */
overflow: hidden !important;
background: #fff;
}
.avatar-image-container img {
margin:0;
max-height: 60px;
min-height: 60px;
max-width: 60px;
min-width: 60px;
}
/**=========== TEXTO DO COMENTÁRIO ===========**/
.comments p{
font-size: 15px !important; /* tamanho da fonte do comentário */
font-family: 'Alef'!important; */ fonte do comentário */
text-shadow: 0 1px #eee !important; /* sombra na fonte */
padding-left: 55px !important;
padding-bottom: 20px;
color: #000000 !important /* cor do texto */
}
/**=========== BOTAO – RESPONDER ===========**/
/* botão responder do segundo nível */
.comments .continue a {
background: #000000 !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: #000000; /* 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: #1C1C1C; /* 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: 0px; /* 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] [semobice.blogspot.com] =======**/


Então é isso, espero que gostem.
Até mais.

2 comentários :

  1. Olá Nana <33 Aii! A gente (eu e Iza) aparecemos ali no print! Está com zica? Espero melhoras. Tenta beber muita água (não gelada porque pode prejudicar) talvez ajude. Eu gosto desse modelo de comentários. É diferente mesmo. Foi bom você ter postado o tuto.

    Bye's ❀
    O Snack Cheese é a queijolândia~✧ |
    Temos pipocas e sopas! Venham ☆

    ResponderExcluir
    Respostas
    1. Sim, sim <3 foi proposital.
      Obrigada pela força ^^

      AWWWWWWWWWWWWWW ESTOU COM TANTA SAUDADES DAS DUAS, DESCULPA ESSE TEMPO QUE SUMI
      <3 <3 BEIJINHOS

      Excluir

Você pretende comentar?
Saiba que eu fico muito grata e feliz ^^ mas por favor, seja educado e compreensível. Se de alguma forma meu post te feriu ou o meu blog, vá ao e-mail. Críticas são sempre bem-vindas, mas acredito que o lugar delas também é no e-mail.

E eu optei por moderar comentários, não por causa de problemas como os de ofensas, mas para que fique mais fácil saber quando houve comentário. Espero que entenda se você não gosta dessa opção. Acredite, eu também não gosto.
Obrigada por ter vindo aqui.

"Heart" yourself

Ame-se ♥
oohmontana@gmail.com
twitter:@s0meth1ngs, @seehbubble
facebook: Carol Lendino

Status

Nome: Sem Óbice
Criado: 28/12/13
Volta do hiatus: 28/12/15
Tema:G-Friend on twitter; n°: 4

Disclaimer:
Grande parte das coisas aqui não pertencem ou foram criadas por mim, grande maioria foi criada por alguém e, na maior parte das vezes, editas por mim. Se feri alguém, pretendendo creditar ou excluir, como o dono preferir. Não resite em me avisar por e-mail: oohmontana@gmail.com. Espero compreensão.

The End

Isso é tudo, pessoal! Volte sempre que quiser,
beijos no core, rivais no amor


Créditos e agradecimentos aqui