30 julho 2015

Tutorial -Comentários personalizados


Oláaaa meninas tudo bem?!Faz tempo que eu não postava tutoriais para vocês,e hoje trouxe um que todo blog precisa ter,comentários personalizados e fofos que combinem com o blog aplicado...Comentários bem organizados com cores bonitas deixam seu vlog mas harmônico e faz a leitora se sentir confortável,eu aprendi na Cherry Bomb,e vou ensinar agora para vocês,vamos lá?!

 
Para adicionar esse comentários personalizados ao seu blog, basta abrir ir em modelo → editar html → dê um crt + F → procure por ]]></b:skin> → cole o código escolhido logo acima do que você encontrou. Prontinho amores!!!

Modelo de comentários 



CÓDIGO 


/________________________INICIO COMENTARIOS - CHERRYBOOMB.COM___________________________/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #COR; /*Cor da fonte*/
font-family: Verdana; /*Fonte do texto*/
font-size: 18px; /*Tamanho da fonte*/}
#comments {
background: #COR; /*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: #COR; /*Cor de fundo do nome do autor do comentário*/
border: 1px solid #COR; /*Borda de onde fica o nome do autor do comentário*/
padding: 3px;}
.comment-header a {
color: #COR !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: #COR !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: #COR; /*Fundo do bloco de texto do comentário*/
border: 1px solid #COR; /*Borda do bloco de texto do comentário*/
padding: 10px;
color: #COR; /*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: #COR; /*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: #COR; /*Fundo dos botões responder e excluir*/
border: 1px solid #COR; /*Borda dos botões responder e exluir*/
color: #COR !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: #COR; /*Fundo dos botões responder e excluir quando passa o mouse*/
border: 1px solid #COR; /*Borda dos botões responder e exluir quando passa o mouse*/
color: #COR !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______________/

Onde tem #COR troque pelos códigos das cores abaixo: 

 COR  / CÓDIGO


  #76eec6

  #458b74

 #b4eeb4

  #698b69

  #4eee94

  #2e8b57

  #90ee90

 #548b54

  #00ee76

 #008b45

  #00ee00

  #008b00

  #76ee00

 #458b00

  #b3ee3a

  #698b22

  #bcee68

  #6e8b3d

  #eee685

 #8b864e

 #eedc82

  #8b814c

  #eeeed1

 #8b8b7a

  #eeee00

 #8b8b00

 #eec900

  #8b7500

  #eeb422

  #8b6914

  #eead0e

  #8b6508

 #eeb4b4

  #8b6969

  #ee6363

  #8b3a3a

  #ee7942

  #8b4726

  #eec591

  #8b7355

  #eed8ae

  #8b7e66

  #ee9a49

  #8b5a2b

  #ee7621

  #8b4513

  #ee2c2c

 #8b1a1a

  #ee3b3b

#8b4513

 #ee6a50

  #8b3e2f

  #ee5c42

  #8b3626

 #ee4000

  #8b2500

  #ee0000

  #8b0000

  #ee1289

  #8b0a50

  #ee6aa7

  #8b3a62

  #eea9b8

  #8b636c

  #eea2ad

  #8b5f65

  #ee799f

  #8b475d

  #ee30a7

  #8b1c62

  #ee3a8c

  #8b2252

  #ee00ee

  #8b008b

 #ee7ae9

  #8b4789

  #eeaeee

  #8b668b

  #d15fee

  #7a378b

 #b23aee

  #68228b
Espero que tenham gostado,e que consigam fazer,não é tão difícil assim,beeeijos meu amores e até o próximo post,tchau tchau!!! 

2 comentários:

  1. Que fofo Mary vou fazer no meu! Adorei a dica linda.
    Beeeeejos!

    ResponderExcluir
    Respostas
    1. que bom que gostou Allane,beeijos :)

      Excluir

Obrigada pelo seu comentário,volte sempre!
♥ Deixe o link do seu blog para que eu possa visitar !
♥Siga-me no Instagram @marianasousaoficial
♥Deixe seu like na minha Fan Page

BLOG DA MARY 2015-2017: | • voltar para cima