A pedido da seguidora Juliana Wood hoje vim fazer meu primeiro tutorial de como deixar a área dos comentários igual a do VV.
Preview:
Lindo não?
Bem esse modelo eu que fiz, é um circular com imagem de fundo, vamos ver como se faz?
È super hiper mega fácil!
Leia Mais
Bem, existem dois modelos para se fazer:
-HTML
-CSS
Eu particularmente prefiro CSS, é bem mais fácil, mas vamos por html:
-HTML
Vá em Editar HTML, aperte Ctrl+F e pesquise por:
]]></b:skin
Acima disso cole:
/*****************************INICIO COMENTARIOS
CHERRYBOOMB- MODIFICADO POR VITORIA VIEIRA OFICIAL*****************************/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #transparent; /*Cor da fonte*/
font-family: Verdana; /*Fonte do texto*/
font-size: 10px; /*Tamanho da fonte*/}
#comments {
background: URL DA IMAGEM DE FUNDO; /*Fundo da área geral dos comentários*/
padding: 10px;
background-image: url(" URL DA MESMA IMAGEM DE FUNDO ALI DE CIMA");
border:0px dashed #000000;
}
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #64BCBA; /*Cor da fonte do numero total de comentarios*/
font-family: Comic Sans MS; /*Fonte do texto*/
font-size: 20px; /*Tamanho da fonte*/}
#comments {
background: #TRANSPARENT; /*NÃO MODIFIQUE*/padding: 15px;
}
.comments .comment-block { margin-left: 70px; /*Espaço entre o avatar e o corpo do comentário*/}
.comment-header {
background: #FF6699; /*Cor de fundo do nome do autor do comentário*/
border: 4px solid #FF6699; /*Borda onde fica o nome do autor do comentário*/
border-radius: 20px 20px 0 0;
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: bold; /*Troque bold por normal para tirar o negrito*/}
.comment-header a:hover { color: #FAA7B9 !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 alinhada a 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*/
position: relative;
background: #fff; /*Fundo do bloco de texto do comentário*/
border: 1px dashed #FF6699; /*Borda do bloco de texto do comentário*/
border-radius: 0 0 20px 20px;
padding: 10px;
color: #3f3f3f; /*Cor da fonte do bloco de texto do comentário*/
font-size: 11px; /*Tamanho da fonte*/}
.comments .avatar-image-container {
/*Tamanho do avatar */
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: #FFADDF; /*Cor da borda do avatar*/
padding: 3px; /*Espessura da borda do avatar*/}
.comments .avatar-image-container img{
/*Tamanho do avatar */
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: #64BCBA; /*Fundo dos botões responder e excluir*/
border: 1px solid #64BCBA; /*Borda dos botões responder e exluir*/
-Moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
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: #FAA7B9; /*Fundo dos botões responder e excluir quando passa o mouse*/
border: 1px solid #FAA7B9; /*Borda dos botões responder e excluir quando passa o mouse*/
color: #fff !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 POR WWW.PAPOGAROTA.COM.BR- MODIFICADO POR VITÓRIA VIEIRA********/
- CSS
Vá no seu CSS, é simples, vá em Modelo/ Personalizar/ Adicionar CSS
E cole isso:
/*****************************INICIO COMENTARIOS
CHERRYBOOMB- MODIFICADO POR VITORIA VIEIRA OFICIAL*****************************/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #transparent; /*Cor da fonte*/
font-family: Verdana; /*Fonte do texto*/
font-size: 10px; /*Tamanho da fonte*/}
#comments {
background: URL DA IMAGEM DE FUNDO; /*Fundo da área geral dos comentários*/
padding: 10px;
background-image: url(" URL DA MESMA IMAGEM DE FUNDO ALI DE CIMA");
border:0px dashed #000000;
}
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #64BCBA; /*Cor da fonte do numero total de comentarios*/
font-family: Comic Sans MS; /*Fonte do texto*/
font-size: 20px; /*Tamanho da fonte*/}
#comments {
background: #TRANSPARENT; /*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: #FF6699; /*Cor de fundo do nome do autor do comentário*/
border: 4px solid #FF6699; /*Borda onde fica o nome do autor do comentário*/
border-radius: 20px 20px 0 0;
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: bold; /*Troque bold por normal para tirar o negrito*/}
.comment-header a:hover { color: #FAA7B9 !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 alinhada a 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*/
position: relative;
background: #fff; /*Fundo do bloco de texto do comentário*/
border: 1px dashed #FF6699; /*Borda do bloco de texto do comentário*/
border-radius: 0 0 20px 20px;
padding: 10px;
color: #3f3f3f; /*Cor da fonte do bloco de texto do comentário*/
font-size: 11px; /*Tamanho da fonte*/}
.comments .avatar-image-container {
/*Tamanho do avatar */
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: #FFADDF; /*Cor da borda do avatar*/
padding: 3px; /*Espessura da borda do avatar*/}
.comments .avatar-image-container img{
/*Tamanho do avatar */
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: #64BCBA; /*Fundo dos botões responder e excluir*/
border: 1px solid #64BCBA; /*Borda dos botões responder e exluir*/
-Moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
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: #FAA7B9; /*Fundo dos botões responder e excluir quando passa o mouse*/
border: 1px solid #FAA7B9; /*Borda dos botões responder e excluir quando passa o mouse*/
color: #fff !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 POR WWW.PAPOGAROTA.COM.BR- MODIFICADO POR VITÓRIA VIEIRA********/
Então, simples né? E fica lindo!
O que acharam do meu Primeiro Tutorial?
Acharam legal?
Não se esqueçam dos créditos caso forem colocar no seu blog!
Irei fazer um página para encomendar tutoriais, por favor peça um tutô!!!
Beijos
Amei! Estava procurando um tuto para modificar os coments que não precisasse de html, pois meu blog é meio estranho, não consigo modificar direito o html
ResponderExcluirAi que bom!!!!!!
ExcluirQue pena que não consegue mexer no html do seu blog direito, depois se quiser eu ensino!
Beijos
Pusheen =*-*=
nossa,que tutorial bom!
ResponderExcluirAmei,bjs
Meninas na Web
Obrigada!
ExcluirFico Feliz que gostou!
Beijos
Pusheen =*-*=
É lindo esse tipo de comentários no blog, quando eu fizer o meu próximo layout com certeza vou usar. Amei o tutorial ♥♥
ResponderExcluirAté mais... YPortela.blogspot.com
Aww, fico feliz que gostou!
ExcluirEspero que use no seu próximo layout!
Beijos
Pusheen =*-*=
Adorei! vou testar no Html e no java script ^^
ResponderExcluirObrigada!
ExcluirFico Feliz que gostou!
Beijos
Pusheen =*-*=
Adorei esse modelinho muito fofinho *3* fico que nem louca procurando modelos de comentario para meus layouts (preguiçosa -q) talvez use ele no proximo lay que fizer
ResponderExcluirbeijos <3 ~~http://u-ncomplicated.blogspot.com.br/
Obrigada!
ExcluirTambém sou muito preguiçosa!
Fico Feliz que gostou e irá usá-lo!
Beijos
Pusheen =*-*=
Eu irei usar esse modelo de comentários em um dos próximos layouts do 15 Primaveras! Ele é muito lindo *u*.
ResponderExcluirFico Feliz que irá usá-lo!!!
ExcluirObrigada!
Beijos
Pusheen =*-*=
Adorei o modelo!!
ResponderExcluirChu ~~ http://auwss.blogspot.com.br/
Obrigada!
ExcluirFico Feliz que gostou!
Beijos
Pusheen =*-*=
Olá c:
ResponderExcluirQue modelo fofo :3
Sinceramente não gosto do CSS, acho complicado demais :x Estou acostumada com o HTML então uso ele mesmo haha
Gostei do tuto :3
Beijos ♥
PS: Eu te respondi lá no meu blog, sobre você modificar o fundo de um layout meu e tals: http://algunsr4biscos.blogspot.com.br/2015/04/wishlist-2015.html#comment-form
Post novo: http://algunsr4biscos.blogspot.com.br/2015/04/4-dicas-pra-mim-e-para-voces.html
www.algunsr4biscos.blogspot.com
Obrigada!
ExcluirFico Feliz que gostou♥
Eu prefiro CSS, é só copiar+colar, o HTML tem que ficar pesquisando, e muitas vezes não acho!
P.S- Irei ver!
Beijos
Pusheen =*-*=
Ainw parabéns amiga pelo 50 seguidores e´que venham muito mais <33
ResponderExcluirAdorei o lay e tutorial vou usa-lo,pode fazer um de como colocar o cabeçalho como o seu?
Beijos
Obrigada amiga! <33 Para você também!
ExcluirFico feliz que gostou e irá usá-lo!
Como?Deste Layout?Ou o da Briar Beauty?
Beijos
O da Briar ^^
ExcluirFicou divo demais mig's
Beijos
Ta´okay mig´s, acho que hoje mesmo ainda sai esse tutorial.
Excluirbeijos
Oi Vi! adorei o blog,já tô seguindo! esse tuto é ótimo,deixa os comentários bem lindos...Beijos
ResponderExcluirhttp://princes-kawaii.blogspot.com.br/
Awwt, obrigado Gi!!!
ExcluirFico feliz que gostou!
Beijos
Pusheen =*-*=
Adorei o tutorial a área dos comentários fica bem charmosa.
ResponderExcluirXoXo
Gato Fofo
Obrigado!
ExcluirFico Feliz que Gostou! Fica bem charmosa mesmo!
Beijos
Pusheen =*-*=
A-M-E-I!!! Estava procurando um tuto desses! Vou usar no meu blog!
ResponderExcluirBeijinhos da Malu :3
Awwts fofa, fico feliz que amou♥
ExcluirFico feliz que irá usar!
Beijos
Pusheen =*-*=
Awn! Amei! Usei no meu novo blog! >.< Vou colocar os créditos agora mesmo! Bjs!
ResponderExcluirAwn, fico Feliz que gostou!
ExcluirFico tão que usou e colocará os créditos! ♥
Beijos♥
Faz um tutorial sobre como perzonalizar o botaozinho das pags e como colocar o negocio de voltar ao topo
ResponderExcluir