Tumblr_lt7au4cbb61r4du1bo1_400_large

Oi criaturas sedentas por conhecimento que papai e mamãe trouxeram ao mundo pela graça divina de Deus (créditos a minha professora Adriana Mendes). Há pouco mais de um mês atrás a Marianna pediu para fazer esse post:

Amei seu blog *-*
ótimo tutorial, gostaria de pedir para você fazer um post ensinando a personalizar os comentários igual ao daqui, sem palavras! Bjs

Estava sem tempo, e só deu para postar hoje, putz, ela já deve estar achando que nem iria sair né, enfim desculpe pela demora, o importante é o tutorial, então vamos lá...




O primeiro á fazer é colocar o CSS:


/*LOVETDIXU.TK*/ .edit dos comentarios {}


#comments h4 { /* Este é titulo do formulario */
margin:0;
color:#AFB1FF;
font-family: Fineliner Script;
font-size:36px;
}
#perfill {
float:left;
margin-left:88px;
margin-top:-309px;
line-height: 1.4em;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border:3px solid #F6E9FF;
background:#F6E9FF;
}
.avatar-image-container img{ /*avatar do anonimo*/
background:url(http://i1107.photobucket.com/albums/h387/evelynlovetdixu12/av.png) center no-repeat;
width:36px;
height:37px
border:5px solid #F6E9FF;
}
#comments-block .comment-author { /* O espaço do nome de quem comentou */
background: #FFF;
color: #BCAFE0;
font-family: Fineliner Script;
font-size:26px;
border-bottom: dashed 1px #BCAFE0;
padding: 5px;
padding:3px;
margin:.5em 0;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
height:670px
}
#comments-block .comment-body { /* Area do texto do comentario */
margin-top:-13px;
padding-left:5px; padding-right:5px; padding-top:5px;
font: 100% 'Tahoma', Trebuchet, Arial, Verdana, Sans-serif;
color:#BCAFE0;
background:#fff;
height:670px
}
#comments-block .comment-footer { /* Rodape dos comentarios */
margin:-.25em 0 2em;
line-height: 1.4em;
margin-top:-12px;
font: 85% 'Tahoma', Trebuchet, Arial, Verdana, Sans-serif;
color:#FF19E6;
background: url('http://static.tumblr.com/mrycy6g/9dwls9bck/footer_coment.png') bottom no-repeat;
padding-top:70px;
height:670px
}
#comments-block .comment-body p {
margin:0 0 .75em;
}

Pronto, modifique as cores, vou explicar agora a parte das imagens.

  • O Avatar.
Faça-o de com o tamanho:
Largura: 27px.
Altura: 18 px;

  • O Rodapé.
O rodapé é essa faixa colorida no final do comentário.
O comentário:

O rodapé separado:

Na hora de adicionar o rodapé ao css modifique o valor de padding-top:70px para  o valor que desejar, isso vai influenciar na altura em que a data vai aparecer.
Na hora de criar essa linha na parte do design deixe mais ou menos 35px de espaço vazio na altura da linha, e não coloque o padding á menos de 35 px.
As partes rosa é a largura do comentário.
É só isso, espero que tenham gostado, até a próxima !!

17 coments:

Camilla Demézio disse... Reponder {}

Amei a frase da sua professora!!!kkk''...Ótima dica!!

http://meumundomudando.blogspot.com/

Anônimo disse... Reponder {}

Bem legal, mas fica desconfigurado, a parte do fundo dos comentários fica menor que o fundo do nome da pessoa e do footer :/

Isabelle Gasparinne disse... Reponder {}

Comentei errado e fui escrever outro acabei comentando em anônimo, desculpa hehe. AMEI SEU BLOG, lindo demais *-* e os tutoriais super explicativos, pena que o meu deu errado :/

Beijos, www.dearblueorange.com

Evelyn VR disse... Reponder {}

@Isabelle Gasparinne Eu coloquei um código que eu acho que irá resolver, tenta de novo, oks ?!
Beijos flor, obrigada pela visita !!

KarolineSoares disse... Reponder {}

Admiro muito você, tudo aqui é lindo seus comentários são muito legais, quando tiver tempo vou tentar fazer isso, rsrs

Evelyn VR disse... Reponder {}

@KarolineSoares Obrigada, eu tbm te admiro muito :m

Liah Sá disse... Reponder {}

Muito legal o tuto sua área de comentários é mt linda *_*
Vou repassar seu recado pra Isa, Kissus
www.bombadecereja.tk

Marianna disse... Reponder {}

ótimo tutorial, obrigada por ensinar! Vou tentar fazer no meu novo blog *-* Bjs

Lívia Vasconcellos disse... Reponder {}

Olá, poderia me dizer como faz para instalar um Layout do Blogskins?

Chita disse... Reponder {}

nossaa adorei o tuto!! e to seguindoo... segue de volta?
http://swett-girls.blogspot.com

David G. disse... Reponder {}

OI,adorei o seu blog ja to seguindoo concerteza , segue de volta se puder ?

http://garotoonerd.blogspot.com

Mary disse... Reponder {}

Achei muito útil esse tuto. Por enquanto não vou usar não mas pode ter certeza que estará no meu blog em breve.
Amei o blog!!!
seguindo...

bjos

http://maah5mais.blogspot.com

saulacecilia disse... Reponder {}

Respondi o formulário da pagina de encomendas!

Bjs,
http://sapatosdeveludo.blogspot.com

Mariana :) disse... Reponder {}

Adorei o tutorial, quando a preguiça desaparecer, vou fazer.
Post novo: girlteen-s2.blogspot.com
Concurso, Participa? http://girlteen-s2.blogspot.com/2011/11/concurso-seu-blog-divulgacao-participe.html

Thais Rodrigues disse... Reponder {}

Gente sem palavras adorei o tutorial , tem post novo flor , começaram as votações do concurso vote no seu blog preferido
http://perfeitinha-blog.blogspot.com/

daniele - blog sweet pop disse... Reponder {}

Muito legal, quando fica assim, sempre quiz saber, como você personalizava os comentários *-*

http://meublogblogdadanii.blogspot.com/

Glaucia Matos disse... Reponder {}

Olá, estou aqui fazendo uma visitinha e aproveitando para informá-los sobre o sorteio que está rolando no blog Capricha Mulher! Participem!
http://caprichamulher.blogspot.com/2011/11/primeiro-sorteio-no-cm.html
Já sigo seu blog, segue de volta?
bjO e boa sorte!
~Glaucia

Postar um comentário

:a   :b  :c  :d  :e :f  :g  :h  :i  :j  :k  :l  :m  :n  :o  :p  :q  :r  :s  :t  :u

Comentar não dói!