By Lecca – Letícia Pontes » Arquivo » Personalizando a caixa de comentarios:

Vídeo: Diário da ortognática – Pós-opertatório

Semana passada postei…

View more

Receita: Ratatouille

Lá em 2007…

View more

Dica de série: Unbreakable Kimmy Schmidt

Ontem foi meu…

View more

Comprei na china: Pincéis de maquiagem

Fazia um bom…

View more

Personalizando a caixa de comentarios:

Como modificar a area de seus comentários e deixa-lo personalizada.
Bem, vi esse estilo de comentários no wordpress, dai entrando e saindo de blogs, vi este estilo também no blogspot.
Comecei então a procurar um tutorial que tornasse possivel eu usar este tipi de comentários, e achei, e agora vou traduzir aqui para vocês.
Tutorial retirado da página blogspottutorial:

Como póde ver na imagem a caixa de comentários está dentro de uma imagem personalizada.


Clique aqui para ampliar

Lembre-se que cada código no modelo é diferente um outro, mas que poderiam ser os mesmos.
Se este tutorial possui diferentes códigos do seu template (modelo), sinto muito,eu acabei de dizer “Lamento” e isso significa que você não está com sorte. Como um exemplo, eu uso os códigos do modelo mínimo (simples).

Vamos ao tutorial:
1. Não esqueça de fazer cópia do seu lay (Clique em Baixar modelo completo é importante):
2. Clique em Layout:
3. Clique em editar HTML:
4.Clique em Expandir Modelo Widget :
Obs. Quando não dá certo com o modedo expandido eu costumo usar os códigos do modelo que baixei, abrindo eum editor de html, ou para quen não tem o bloco de notas.

Procure por esse códigos no css do seu modelo: ( use Ctrl + F) localiza os arquivos mais rápido.


 

Novamente procure agora por este códigos: 

(preste a atenção as vezes póde achar códigos semelhantes)

 

 

 

 

Substitua por esses novos códigos abaixo:

 


 

 

Salve o templates

Fim, é só testar

Você tem como base o css e se entender um pouco salve apartir dai da para mudar a largura e a imagem:

Aprendeu aqui credite:


Responder para lays-lecca

Cancelar resposta

Comentários

Leticia Thais | 05-02-2009 às 16:26 | Responder

eu não entendi “/ e o meu é modelo clássico o q eu faço?

Lecca | 15-02-2009 às 23:12 | Responder

Não funciona no modelo clássico, ao menos não que eu saiba editar para o clássico.

Sonhadora | 18-02-2009 às 13:58 | Responder

Oi, Lecca! Achei ótimo esse tutorial. Mas estou com um problema: minha template é a minima (com alterações :P), e não tem esse div de comments. Quero tentar incluir, mas não sei em que parte do div: antes de que? depois de que?
Vc pode me ajudar?
bjs e obrigada!

lays-lecca | 18-02-2009 às 18:58 | Responder

Este comentário foi removido pelo autor.

Lecca | 18-02-2009 às 19:04 | Responder

Sonhadora.
Esses códigos é para a minima, acima já está indicando todos os trechos a serem substituidos, agora se não for para a minima sinto não poder ajudar.
De repente você póde consultar o site do autor do tutorial que está acima, quem sabe lá você consegue entender melhor, né.

LetíciaThais | 20-03-2009 às 16:57 | Responder

eu naum sei inverte vc sabe ?

Gley' | 03-04-2009 às 13:42 | Responder

“LECCA” assim parabéns pra vc e pra mim >.<
eu consegui *O* mas tem um problema :/
a caixa de comentários ficou grande eu não sei como reduz e as fotos do povo que comenta não aparece :/ se vc poder passe no meu blog e veja
se poder tmb´me ajude? please:/
bye parabéns mais uma vez /o/

Gley' | 03-04-2009 às 23:24 | Responder

“LECCA” parabéns mais uma vez e muito obrigado
eu consegui ajustar //fogos de artifícios /o/o/o/
VIVA’ @.@ obrigado //ah ficou LECAL ^^’

Gley' | 03-04-2009 às 23:27 | Responder

Lecca sou eu mais uma vez eu esqueçi de te perguntar no caso eu mudo de cor o blog
como que faz pra mudar as cores dos balãoes
e a cor da borda interna e externa?

*Gostei do seu blog, vc ajuda as pessoas.Tem uns blogs que os donos ele não ajudam cara fico com muita raiva e sem contar que eles são ignorantes.
PARABÉNS!

misa | 12-04-2009 às 17:22 | Responder

obrigada lecca eu tbm gosto muito daquela musica.
como vc esta?
agradecida
ass misa

paty | 11-05-2009 às 15:02 | Responder

oii lecca! sobre o segundo codigo, onde exatamente ele esta? pa u estou usando o ‘minima’ e eu vasculhei tudo e não o achei =

beijinhos e obrigado!

Imperio Dicas | 09-06-2009 às 16:21 | Responder

Erro ao interpretar modelo do blog

Invalid data reference post.embedCommentForm: com.google.layouts.framework.widgetview.GoogleMarkupException: No dictionary named: ‘post’ in: [‘blog’]

Apareceu isto quando clico em layout e elementos de pagina.

O que fazer ?

uellington | 02-09-2009 às 00:47 | Responder

Oi tudo bem pra localizar esses codigos basta vc ir em editar html clica dentro dessa caixa e presiona ( ctrl + f ) e digita um poko do que vc que saber tipo vc que localiazar head

vc digita lá head vai aparescelo logo com uma cor diferente no seu html tipo basta vc egar um poko do codigo que ele fornece acima e digitar…

Anonymous | 23-11-2009 às 16:13 | Responder

?:

nerdpervertido | 16-12-2009 às 10:55 | Responder

Nossa, MUITO OBRIGADO MESMO!

Estou editando um Lay a tempos, e tinha feito algo errado, que não estava aparecendo a caixa de comentários.

Testei vários tutos, mas este foi o único que funfo. Abraço e sucesso

Fernando Zanforlin | 18-02-2010 às 09:31 | Responder

Olá, Lecca, tenho procurado maneiras de personalizar a caixa de coemntários, mas não encontro o que procuro.
É sobre essa caixa de escremos os comentários, onde há o scroll e as demais caixa. Gostaria de mudar cores, fontes, textos. Essa não encontro em lugar nenhum.
Saberia que faze-lo?
at.
Ob.

Luka | 26-03-2010 às 11:16 | Responder

oi Lecca pra colocar essa caixa de comenterio pra substitur o codigo tenho que apagar oq ta aqui no blogger, é isso.Obrigao

Lecca | 26-03-2010 às 12:03 | Responder

Não, vc vai substituir parte dos códigos, no caso apartir de b:includable id=’comments’ var=’pos até o final destes códigos.

Isaque Dos Santos | 28-04-2010 às 23:32 | Responder

Você não tem noção de quanto me ajudou. !! Parabens seu blog é 10

Ligadas pelo Criador | 21-10-2010 às 21:36 | Responder

naum entendi tanto assim…

Anonymous | 07-11-2010 às 21:23 | Responder

Ai mano se liga da o codigo para html puroficar de visel de ussar em tal templates eu criou site ,mais quero saber como faso para o meu menu de caixa de comentarios ficar editavel tipo ess sua caixa de texto utiliza simples mente o codigo html

lado tavendo>>>>>>>
meu hotmail é djeantrindade2.0@hotmail.com
o codigo html que eu isere não foi aceito

Anonymous | 30-11-2010 às 19:05 | Responder

dsadasda

Tobz | 02-12-2010 às 20:55 | Responder

Olá lecca, gostei desta postagem e de seu css. Mas vc tem que complementar no html, o código da imagem do avatar. Substituir

dl class=’commentlist’

pelo código:

dl expr:class=’data:post.avatarIndentClass’ id=’commentlist’

Colocar acima de

a expr:name=’data:comment.anchorName’/

o código:

b:if cond=’data:comment.favicon’
img expr:src=’data:comment.favicon’ height=’16px’ style=’margin-bottom:-2px;’ width=’16px’/
/b:if

E colocar abaixo de

a expr:name=’data:comment.anchorName’/

o código:

b:if cond=’data:blog.enabledCommentProfileImages’
data:comment.authorAvatarImage/
/b:if

Não se esqueça de abrir e fechar todos os códigos acima pq aqui no comentário não deu pra colocar o html certinho. Abraços.

Tobz | 02-12-2010 às 21:24 | Responder

Lecca, se você colocar no código os avatares, coloca também o alinhamento no css dos avatares por favor. O alinhamento ao lado do nome do comentador. Agradeço.

Tobz | 06-12-2010 às 00:57 | Responder

Lecca, aquele blog meu que vc comentou eu tenho a base dos comentários mas o design tá feio e não é meu. Eu não to conseguindo arrumar o avatar ao lado do nome do comentariata. Tem como vc colocar neste código do tutorial, o avatar com alinhamento, como nos seus comentários aqui do seu blog. Muito Obrigado!

RafaH | 02-01-2011 às 14:09 | Responder

Este comentário foi removido pelo autor.

RafaH | 07-01-2011 às 12:29 | Responder

Este comentário foi removido pelo autor.

cLicKDawnload | 24-01-2011 às 22:33 | Responder

cara parabens mesmo..vc mim ajudo muito.muito abrigado…vo recomenda vc para os meus amigos.vlw

Léo Santos | 26-03-2011 às 16:03 | Responder

valeu *-*

Anonymous | 03-04-2011 às 21:41 | Responder

tank’s O_o

Sánchez | 08-04-2011 às 12:28 | Responder

Alguem pode me ajudar ñ consigo achar o segundo codigo.

Ana Beatriz - Bruxchinha | 29-06-2011 às 16:31 | Responder

APARECEU ISSO:Não foi possível salvar o modelo

Corrija o erro abaixo e envie o seu modelo novamente.
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The element type “div” must be terminated by the matching end-tag “
“.

O QUE EU FAÇO?

MEU EMAIL É ANADASFADS2@GMAIL.COM

Anonymous | 30-07-2011 às 07:50 | Responder

sdasd

Gabriela | 30-07-2011 às 15:37 | Responder

Não consegui, G: fiz tudo certo e não foi -‘
blog-de-uma-garota-apaixonada.blogspot.com

Anonymous | 31-08-2011 às 09:40 | Responder

Muito bom

Anonymous | 29-04-2013 às 17:03 | Responder

..

Clã Celestial Blog | 21-10-2011 às 23:27 | Responder

Fico muito bonito e elegante.

TiagoMachado | 18-11-2011 às 17:01 | Responder

Eu vou fazer um tutorial como fazer num classico 😛

Wilker | 03-01-2012 às 19:15 | Responder

Muito bom, gostei. Obrigado 🙂

Nestor - Segurança do Trabalho nwn | 28-01-2012 às 07:31 | Responder

Isso é o sonho de todos os Bloggers mas para mim parece um pouco complicado demais.

Abraços

Anonymous | 04-03-2012 às 21:25 | Responder

sem identificação ?

Coelho Drogado | 09-03-2012 às 22:04 | Responder

funfou mais ficou estranho no meu, estou tentando arrumar direitinho no css.. só deu o problema de não aparecer as imagens dos autores dos comments. como arrumar isso?

pra Daise | 14-04-2013 às 00:15 | Responder

Muito lindo o seu blog!
Eu não sei pq não tô conseguindo achar “Expandir Modelo Widget”
nao sei pq já entrei em contato mandando este problema.

Sempre mexi em meu blog no HTML os codigos e agora eu não consigo mais.
Você sab o que pode ser?
bjo

pra Daise | 14-04-2013 às 00:38 | Responder

opzzz eu não havia encontrado pq agora o blogger esta diferente

Fashion Compass | 21-06-2013 às 15:47 | Responder

como faço para encontrar um site para baixar esses modelos de caixa de comentarios??? :/

Anonymous | 29-12-2014 às 06:56 | Responder

m;tbme

Johnf261 | 17-09-2015 às 10:33 | Responder

I think you have noted some very interesting points , appreciate it for the post. eaeedcdddedd