17/01/2015

Tutorial: modelo de comentários assim como o do blog

(Novo estilo de ilustração)

Hi cherries!
Tudo bem cherries? Sim, atualmente nos estamos fazendo bastantes tutoriais, pois eu ando recebendo pedidos de tutoriais.  O Túlio havia me pedido a alguns dias esse tutorial, e eu agradeço a ele pelo pedido! Mas enfim, vamos ver o tutorial?
(Imagem com efeitos)
O tutorial é bem simples! Primeiro faça um backup por segurança caso de errado. Vá no HTML do seu blog, de CTRL+F e pesquise por: ]]></b:skin> e logo acima deste código cole:

/*****************************INICIO COMENTARIOS - CHERRYBOOMB.COM*****************************/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #c19bdf; /*Cor da fonte*/
font-family: Verdana; /*Fonte do texto*/
font-size: 18px; /*Tamanho da fonte*/}
#comments {
background: #fff; /*Fundo da área geral dos comentários*/
padding: 15px;
}
.comments .comment-block { margin-left: 70px; /*Espaço entre o avatar e o corpo do comentário*/}

.comment-header {
background: #c19bdf; /*Cor de fundo do nome do autor do comentário*/
border: 1px solid #9e80b6; /*Borda de onde fica o nome do autor do comentário*/
padding: 3px;}
.comment-header a {
color: #fff !important; /*Cor do nome do autor do comentário*/
font-family: Verdana; /*Fonte do nome do autor do comentário*/
font-size: 16px; /*Tamanho da fonte do nome do autor do comentário*/
font-weight: normal; /*Troque normal por bold para deixar o texto em negrito*/}
.comment-header a:hover { color: #684980 !important; /*Cor do nome do autor do comentário quando passa o mouse*/
text-decoration: none;}

.comments .comments-content .datetime a{
font-size: 10px !important; /*Tamanho da fonte da hora e data do comentário*/
float: right; /*Data alinha á direita*/
line-height: 16px; /*Altura da linha da data e hora*/}

.comments .comments-content .comment-content{ /*Bloco de texto do comentário*/
margin-top: -10px; /*Espaço entre o bloco de texto do comentário e o nome do autor. Só mexa se souber o que está fazendo*/
position: relative;
background: #e7dceb; /*Fundo do bloco de texto do comentário*/
border: 1px solid #cdc3d0; /*Borda do bloco de texto do comentário*/
padding: 10px;
color: #4c4c4c; /*Cor da fonte do bloco de texto do comentário*/
font-size: 11px; /*Tamanho da fonte*/}

.comments .avatar-image-container {
/*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: #d2b6e5; /*Cor da borda do avatar*/
padding: 3px; /*Espessura da borda do avatar*/}

.comments .avatar-image-container img{
/*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;}

.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important}

.comments .comment .comment-actions a {
padding: 5px;
background: #d2b6e5; /*Fundo dos botões responder e excluir*/
border: 1px solid #b59dc6; /*Borda dos botões responder e exluir*/
color: #fff !important; /*Cor do texto dos botões responder e excluir*/
font-family: verdana; /*Fonte dos botões responder e excluir*/
font-weight: bold; /*Troque bold por normal para tirar o negrito*/
margin-right: 10px;}

.comments .comment .comment-actions a:hover {
background: #e3c6f6; /*Fundo dos botões responder e excluir quando passa o mouse*/
border: 1px solid #b59dc6; /*Borda dos botões responder e exluir quando passa o mouse*/
color: #684980 !important; /*Cor do texto dos botões responder e excluir quando passa o mouse*/
text-decoration: none;}

.comments .continue { border-top: none;}
.comments .continue a {display: none;}

/************FIM DOS COMENTARIOS CÓDIGO POR CHERRYBOOMB.COM NÃO RETIRE OS CRÉDITOS************/

A cor que ele vem é roxinho, mas se o seu layout for de outra cor edite. Créditos totais ao Cherry Bomb, pois o modelo pertence a ele! Enfim, dúvidas? Comentem! Kisses candy!

12 comentários:

  1. Eu já coloquei esse modelo de comentários no layout que estou fazendo,ficou muito fofo :3
    Ah,fui eu que pedi ^^.
    Beijos <3

    ResponderExcluir
    Respostas
    1. Concordo, o modelo é simples mas é fofo :v. Ah sim, eu irei colocar seus créditos!
      Kisses candy ♥

      Excluir
  2. O modelo dos comentarios são muito lindos mesmo! Mas eu não irei usar pra não ficar muito igual né!? Obrigada por comentar sobre a coelha rsrsr! Deve estar ajudando muita gente ♥
    Kisses | Doce Bunny

    ResponderExcluir
    Respostas
    1. Concordo ><. Se você quiser usar o modelo você pode usar, não importa se ficar igual ou não ^^.
      Kisses candy ♥

      Excluir
  3. Hi♥
    Perfeito este modelo estava a procura de um modelo assim a tempos acho ele bem trabalhado a beleza :3

    YuukaMori.blogspot.com || Boa Tarde♥

    ResponderExcluir
  4. Muito lindo! Adorei o novo estilo de ilustração, super lindo ^ ^

    There | Fluffy White

    ResponderExcluir
    Respostas
    1. Obrigado ♥ Fico feliz que tenha gostado ♥.
      Kisses candy ♥

      Excluir
  5. Nate, você pode me ajudar a fazer um layout fofinho?? Por favor
    Se você quiser, me dê seu email ^ ^

    ResponderExcluir
    Respostas
    1. Puxa :( eu não tenho muito tempo e também não posso passar meu e-mail :( mas se você precisar de algum tutorial é só pedir ;).
      Kisses candy ♥

      Excluir
  6. Tutoriais são sempre bem vindos né? kk Eu já uso esse no meu blog (ou pelo menos acho que é o mesmo) e super aprovo! Vou ficar de olhos nos outros e próximos tutoriais <3

    Beijinhos,

    Bia | Blog Escrevendo Mundos

    ResponderExcluir
    Respostas
    1. Mas é claro que sim! Eu também aprovo ><.
      Kisses candy ♥

      Excluir

♥ Não falar palavrões
♥ De sua opinião, porém seja educado
♥ Se não gostar de algo e acha que deve melhorar, fale, mas educadamente
♥ Não ofender as postadoras
♥ Troco comentários
♥ Antes de pedir algo, fale sobre o post ou seu comentário será ignorado
♥ Aceito: ¨Seguindo, segue de volta?¨
♥ Não me peça para D-I-V-U-L-G-A-R algo a qual eu não estou participando, se caso eu gostar de algo no seu blog, eu irei divulgar por vontade minha.