Área de comentários personalizada

janeiro 30, 2015

Mais um tutorial! Como deixar área de comentário personalizada como a minha!
Primeiramente, consegui deixa-lo assim graças ao blog Reino Kawaii. Mas como a Carolina (uma das minhas parceiras) pediu para eu fazer esse tutorial, então irei fazer o/. Vou explicar do meu jeito como faz, é um tutorial longo e um pouco confuso. Espero que gostem! :)
Lets go!




Como sempre, recomendo que façam o backup do seu template caso de algo errado.

Agora vamos em Configurações e depois ''Postagem e Comentários'' e verifiquem se no Local de comentário está como ''Incorporado'' caso não esteja, coloquem e salvem :3


--//--


Personalizando


Agora vá em Modelo, Editar HTML, aperte Ctrl+F e procure por </b:skin>

e antes dele colem:


#comments {
background: #fff;
padding: 10px;
width: 95%;
}
.comments h4 {
background: #fff;
color:#fcc !important;
text-align: center !important;
font-size:22px;
font-family: 'Petit Formal Script', cursive;
text-shadow: 1px 2px 3px #fcc;
border-bottom: 2px dashed #eee;
}
.comments .comment-block {
margin-left: 60px;
}
.comments .comments-content .comment-content{
margin-top: -8px;
position: relative;
background: #fff;
padding: 5px;
color: #ccc;
font-size: 12px;
}
.comments .avatar-image-container {
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: #eeffff;
padding: 5px;
margin-top: -15px;
}

.comments .avatar-image-container img{
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
margin-top: 0px;
}
.comment-header {
background: #eeffff;
border-bottom: 5px solid #fee;
padding: 5px;
}
.comment-header a {
color: #81E6FF !important;
text-shadow: 1px 2px 3px #fff;
font-size: 15px;
}
.comment-header a:hover {
color: #fff !important;
text-decoration: none;
border-bottom: 1px dashed #fff;
}
.comments .comments-content .datetime a{
font-size: 11px !important;
float: right;
}

.comments .comment .comment-actions a {
padding: 5px;
background: #eeffff;
color: #fcc !important;
margin-right: 10px;
}

.comments .comment .comment-actions a:hover {
background: #eeffff;
color: #ccc !important;
text-decoration: none;
border-bottom: 1px dashed #fff;
} 
}



E ficará assim :


Agora se quiser mudar a cor da barrinha vão em:
.comment-header { 
e mude a cor do background por exemplo, aqui é #eeffff que é esse azul agua, para mudar você terá que saber cor em HTML (a # da cor)

Um site muito bom é esse: Mundo Blogger - Tabela de Cores HTML
Aqui tem a tabela de cores do blog com a # de todas elas, dai é só substituir o #eeffff (azul agua) por uma cor que você queira.

Mas irá mudar apenas a barrinha, a linha que fica envolta da imagem do autor do comentário continuará azul agua, para ficar da mesma cor coloquem na:
.comments .avatar-image-container {
 a mesma # da cor que colocaram na barrinha, ou outra cor se preferir.

Percebam também que o titulo é rosa (titulo: 2 comentários), caso você não queira ele rosa, vá em
.comments h4 {
e mude pela # da cor que você preferir.

- Mudar a cor do nome do autor do cometário é na: .comment-header a {
- Mudar a cor do efeito hover no nome do autor é na: .comment-header a:hover {

Acredito que a data e o horário do comentário ficará em azul escuro como o da imagem, para mudar é em: .comments .comments-content .datetime a{

Para modificar também os botões ''Responder'' e o ''Excluir'' fica na:

.comments .comment .comment-actions a { 

Agora para modificar tb o efeito hover dos Botões ''Responder e Excluir'' ficam na: .comments .comment .comment-actions a:hover {
É isso acho que esses são
 os principais mesmo.

Part.2 Personalizando



Agora vamos mudar essa imagem que fica ao lado do nome e tirar essa linha que destaquei na imagem

Procurem por /* Comments substitua ele todo por:



 #comments a {
  color: #fcc;
}

.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url("http://4.bp.blogspot.com/-ep5F3fGqOKY/UGnpjAPuiKI/AAAAAAAAFeo/K_5DdjuzRIA/s1600/tumblr_lw99pbqLZL1qcfn0j.gif");
}

.comments .comments-content .loadmore a {
  border: none;
}

.comments .comment-thread.inline-thread {
  background: $(post.background.color);
}

.comments .continue {
  border: none;
} 



e ficará assim:



Obs: Você pode colocar uma outra imagem (essa imagem que fica ao lado do nome), percebam que depois da background-image: url, tem um link, esse link é da imagem, caso queira colocar outra é só substituir pelo link da imagem ou gif que você quer, Substitue dentro da aspas!


Fonte



Caso queira a mesma fonte que a minha no título:

Vão em Editar HTML procurem por </head> e antes dele, colem:


<link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'/>



E Prontinho!! Área de comentários personalizada! ^.^
Como disse é um tutorial meio confuso, mas espero que tenham entendido kk~
Qualquer dúvida, deixe nos comentários.

Bye bye
Ja ne!


e chega de tutoriais! báh :p , vamos da atenção para as vns.

Leia também:

2 comentários

  1. yoo! Arigato!
    Ficou muito kawai, adorei!!!!

    Bye!!!bye!!!
    http://theaangel.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Yo! Nada ^.^
      Que bom que gostou! yea! o/

      byebye ;)

      Excluir

© 2017 Sweet Magic. Re-Design By: Juciane Damasceno. Tecnologia do Blogger.
Eu Sou do CBBlogers