E a pedido de duas pessoas,hoje ensinarei a fazer uma área dos comentários igual ao do Bang Teen.Ja vou avisando que se você usar,credite porque se eu pegar neguinho com esse tipo de área sem ter dado créditos eu vou denunciar,porque deu trabalho inventar isso e deu trabalho elaborar a postagem.O post é grande mas da pra entender certinho.
Eu usei o código do Cherry Bomb e fui modificando,então ai estão os créditos!
Vamos la...
Aperte ctrl+f e procure pela tag de #comments.
Irá aparecer esse código:
#comments {
background: $(comments.background);
padding: 15px;
}
#comments .comment-author {
padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
color: $(post.title.text.color);
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
margin: .2em 0 0;
}
background: $(comments.background);
padding: 15px;
}
#comments .comment-author {
padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
color: $(post.title.text.color);
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
margin: .2em 0 0;
}
Então cole o código abaixo no lugar deste.
/*Area dos comentarios por bangteen.blogspot.com/*
#comments h4 { /* Este é titulo do formulario, onde mostra "X Comentários" e "Postar um comentário" */
margin:0;
color:#ee6363;
font-family: Century Gothic;
text-align: center;
font-weight: normal;
font-size:25px;
text-shadow: none;
}
#comments-block .comment-author { /* O espaço do nome de quem comentou */
box-shadow: inset 0px 0px 20px #fff; /* sombra por dentro */
background: #D5E2DC; /*Cor de fundo do nome de quem comentou*/
border-radius:20px 20px 0px 20px; */ borda arredondada */
color: #fff; /*Cor da fonte*/
font-family: Century Gothic; /*Nome da fonte*/
font-size:16px; /*Tamanho da fonte*/
border-bottom: dashed 1px #31798C; /*Borda de baixo do nome*/
padding: 5px;
margin:.5em 0;
margin-bottom: 2px; /*margem de baixo da área A*/
height:30px; /*Altura do espaço do nome*/
font-weight: normal; /*Peso da fonte. Mude de normal para strong se quiser o texto em negrito*/
}
#comments-block .comment-author a:link {
text-decoration: none;
}
#comments-block .comment-body { /* Area do texto do comentario */
background: #fff; /*Fundo da área do comentário*/
margin-top: -2px; /*Margem externa do topo*/
box-shadow: inset 0px 0px 20px #fff; /* sombra por dentro */
padding: 5px;
font-family:Century Gothic,Arial; /*Nome da Fonte*/
font-size: 12px;/*Tamanho da fonte*/
color:#000; /*Cor da fonte*/
width: 499px; /*Largura da área dos comentários, altere de acordo com seu blog*/
/*Bordas arredondadas da área do comentário*/
border-radius:0 0 20px 20px; */ borda arredondada */
-moz-border-radius: 0 0 30px 30px; */ borda arredondada */
-webkit-border-radius: 0 0 30px 30px; */ borda arredondada */
/*Fim do código da borda arredondada*/
}
#comments-block .comment-footer {
margin:7px 0 2em;
line-height: 1.4em;
font-size: 95%; /* tamanho da fonte da data do comentário */
text-align: left; /* alinhamento da data do comentário */
letter-spacing:.1em;
}
#comments-block .comment-footer a:link{
background: #fff; /*Fundo da data do comentário*/
}
.deleted-comment a {
margin: 10px 0 2em;
font-style: italic;
color: #000; /*** cor do recado de 'comentário deletado' ***/
}
Dê ctrl+f novamente e procure por /*content .Abaixo dessa tag você vai encontrar o body { .Cole o código abaixo antes de body { .
div.avatar-image-container {
-moz-border-radius: 50px;-webkit-border-radius: 50px;
border-radius: 50px;
box-shadow: 1px 1px 3px #a7a7a7; /*Sombra do avatar*/
margin-top: -2px; /*Margem externa do topo, para alinhar o avatar*/
}
div.avatar-image-container img {
display:none;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}
/*Efeito de quando passar o mouse em cima da foto*/
div.avatar-image-container img:hover {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
opacity: 0.8; /*Opacidade*/
-moz-opacity: 0.8; /*Opacidade*/
-webkit-opacity: 0.8; /*Opacidade*/
}
div.avatar-image-container img.delayLoad {
display:block;
}
Não se esqueça de deixar na opção Abrir em janela Pop-up.
É isso,espero que entendam......Beijos
Adorei ! o Resultado fica super divo *-* Beijos ♥
ResponderExcluiryour-smile-oficial.blogspot.com
Fica lindo! Eu adorei :)
ResponderExcluirBeijos,
Sim Senhorita (Clique no perfil)
Nossa muito boom! Adorei :)
ResponderExcluircute-bii.blogspot.com
Adorei fica super lindo...Vc quer participar do concurso lá no blog?
ResponderExcluirParabéns pelo tutorial. A área personalizada fica bem linda e bem mais interessante =) Ah, o Bang Teen foi finalista do concurso, sabia? Passe lá no blog e leia o último post.
ResponderExcluirBeijos,
Anna
garota-queen.blogspot.com
Acho lindo essa sua área dos comentários Luiz, quando tiver um tempinho dou uma testada no tutorial. Um beijo, e o resultado do concurso já saiu.
ResponderExcluirWorld-cutest.blogspot.com.br
Puxa, que incrível você mesmo criou o código! *o* Parabéns, o tuto ficou muito bem explicado, adorei! A área dos comentários daqui é muito lindo! E adorei estar no post! rs :33
ResponderExcluirBeijinhos, Paula! ♥
~Sweet Makeup~
(clica no perfil pra visitar meu blog)
Essa area dos comentários tá super fofa e caprichada!Só sou muuuito preguiçosa com essas coisas,mas vou tentar fazer! haha
ResponderExcluirKisses,seguindo!http://www.cotidianodeumabarbie.blogspot.com.br/
Fica lindo, amei o tutorial. E você sumiu hem. Mas mas isso não amor =(
ResponderExcluirBeijos,
Adolescentes do oposto (blog no perfil)
Putz ! Amei ! Ficou liindo !
ResponderExcluir~ my-dreams-perfects.blogspot.com
Adorei o jeito que você personalizou os seus comentários Luiz, é bem lindo esse efeito da sombra por dentro! Eu também peguei o mesmo tutorial do CB e fui personalizando algumas coisinhas pra deixar do jeitinho que está (:
ResponderExcluirBeijos :3
quinzedilemas.blogspot.com
Amei o tutorial fica parecido com um tumblr eu acho lindo
ResponderExcluircaliforniadreams2.blogspot.com.br
belo tutorial, o resultado fica perfect!!!
ResponderExcluirhttp://blogclubeteen.blogspot.com.br/
Que fofo, muito lindo, talvez no próximo Lay eu use. Amei aqui, seguindo.
ResponderExcluircherry-blog-official | blogspot.com.br.
Beijos.
Sim, você vai pra votação final juntos com os outros 4 blogs. Os que ficaram com 29 pontos irão pra outra enquete diferente, mas todos terão uma semana pra pedir votos ^^
ResponderExcluirBeijos,
Anna
garota-queen.blogspot.com
Vou tentar fazer um no meu blog porque, normalmente, não consigo personalizar a área dos comentários. TTwTT'
ResponderExcluir//Nyaah ^^ Seu blog é MUITO perfeito! Já estou seguindo. Kissus!
anonlypossibility.blogspot.com
Amei o resultado! Vou usar no próximo lay!
ResponderExcluirBjs, bjs ;*
jaguarsedictions.blogspot.com
Como todos ja disseram, o resultado fica mesmo super legal :)
ResponderExcluirSaudades daqui ^^
Abraço!
http://blog-part-of-me.blogspot.com.br/
Pode começar a pedir seus votos! As enquetes estão na barra lateral!
ResponderExcluirBeijos,
Anna
garota-queen.blogspot.com
Ain' ótimo tutorial! Super pratico e lindo ;D
ResponderExcluirblog-allthelovers
COmo você criou o seu layout?
ResponderExcluirFica lindo o resultado, teu blog é muito fofo :3
ResponderExcluirAceita afiliação?Já estou seguindo.
Beijos,blog no perfil.
Fica lindo o resultado, teu blog é muito fofo :3
ResponderExcluirAceita afiliação?Já estou seguindo.
Beijos,blog no perfil.
É lindo esse efeito na área de comentários! Parabéns pelo tutorial, é ótimo!!
ResponderExcluirBeijos!
Garota Vertigem (blog no perfil)
Este comentário foi removido pelo autor.
ResponderExcluirMuito fofa a personalização, mas no lay atual do meu optei pela área dos comments mais simples! ^^
ResponderExcluirAndei sumida, mas agora voltei!
Malikisses Xx
EII, PSIU! Rolando concurso no meu blog! CORRE LÁ ====> Meu Jardim secreto
Que fofo. *-*
ResponderExcluirdetalhesdaamooda.blogspot.com.br
omg fica muito perfeito *-------*
ResponderExcluirrabisqueamesa(.blogspot.com.br)
Adorei o tutorial flor,ajuda muito a deixar o blog mais com a sua cara! hehe beijoss
ResponderExcluirdepoisdovento.blogspot.com
Adoro o resultado, ficou lindo aqui no Bang Teen! Deixou o blog mais "harmônico".
ResponderExcluirBeijos,
depoisdeveneza.blogspot.com.br
Amei o resultado ! Beijos.
ResponderExcluirSweet Imagination
Amei o tuto , vou usar no proximo design do blog , amei o seu blog !! Seguindo aquiii
ResponderExcluirbeijooos
cupcakederendas.blogspot.com
Heey,amor adorei o seu blogger, e super lindo , adorei mesmo !
ResponderExcluirAmor to seguindo o seu blogger, sera que voce pode seguir o meu tambem ?
Eu espero anciosamente voce no meu blogger,!
world-commentsgirls.(blogspot.com.br) -> TIRE OS PARENTESES OU ENTRE PELO MEU PERFIL
Amei de mais! Fica lindo!
ResponderExcluircandy-grape
Fica bem legal.
ResponderExcluirBeijo, Lili
Princesa Imperfeita
Linda sua area de comentários.
ResponderExcluirblogdapaulla.blogspot.com
@deardiarioblog
Adorei, vou tentar fazer (; http://1mundoteen.blogspot.com.br/
ResponderExcluirSua área de comentário é linda! Deixa eu perguntar, queria saber se aceita afiliação.
ResponderExcluirBjs bom domingo!
upgrade-br.blogspot.com.br
Luiz,lembra de mim? Então você ganhou uma promoção do meu blog, no entanto a camiseta foi desviada só essa semana fui resolver. Segunda feira estou mandando novamente gostaria que você me reenviasse o endereço. Mil perdões pela demora e pelo imprevisto. Passei quase 2 meses sem entrar no blog e por isso a demora. D e verdade me perdoe enviarei na segunda.
ResponderExcluirWWW.NARELLYBATISTA.COM
Nossa é lindo e bem diferente esses comentários né? Bom eu estava super sumida né :/ Enfim, o blog está lindo viu?
ResponderExcluirVictory Official
Space Tutorials
Aceita afiliação e participe do nosso mural
ResponderExcluirhttp://sonhosdeumate-en.blogspot.com.br/2012/10/mural-da-amizade.html
kd tu?
ResponderExcluirtou com xaudade
toda vez entro aki e nada d postagem do tavoh
ai ai
Ótimo tutorial, o resultado fica tão bonito *-*
ResponderExcluirBeijos,
modicesdemenina.blogspot.com
Fica muito lindo!!
ResponderExcluirSeguindo aqui
[ http://vestido-de-porcelana.blogspot.com.br/ ]
Oii!
ResponderExcluirÉ um otimo tutorial :d
Eu acho sua area para coments muito legal assim como todo o seu blog (que é lindo de mais)
Tem uma tag para você lá no JG :d
Bjs
justgloss.blogspot.com
Ótimo tutorial !
ResponderExcluirSigam meu blog , fiz ele a poco tempo.
http://enfoldteen.blogspot.com.br/
Este comentário foi removido pelo autor.
ResponderExcluir@Gabriela OliveiraFica mesmo lindo né, vou colocar no meu novo templante
ResponderExcluirKKKKKKK
ExcluirOoi, vou tentar colocar no meu blog ^^
ResponderExcluirEspero que o seu tuto dê certo, porque aqui no meu todos estão dando errado ;/
Obrigada, bjoos :*
Este comentário foi removido pelo autor.
ResponderExcluirAmeeeei, muito facil e fica realmente LINDO! Obrigada mesmo...
ResponderExcluirSweet Pepper
Passei a manhã tentando modificar a area dos coments do me blog, mas até agora o máximo que consegui foi tirar aquele fundo cinza horroso, vou tentar usar o seu.
ResponderExcluirfashionistasassumidas.blogspot
Deu certoo!! Obrigadaa!
ResponderExcluirMuito bom o tutorial =)
ResponderExcluirminhas-confissoes-2012.blogspot.com