Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1498248146
Vida do cache: 1498291346
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Tutoriais Blogger

Personalizar Container geral de comentários ( comments-block )

Dando segmento á série sobre como personalizar a Área de Comentários, você já aprendeu a Desmembrar a área de comentários no artigo inicial.
Agora que você já conseguiu se familiarizar melhor com essa área do blog, e já sabe desvendar e identificar o que cada código significa,vai aprender a customizar cada parte na área de comentários. Você vai aprender a aplicar estilos a cada item do bloco de comentários.
Hoje vamos iniciar aprendendo a aplicar estilos ao container geral (bloco de comentários – “comments-block“)

Apenas para relembrar, o “comment-block” , abre o bloco de comentários. Se refere ao container geral dos comentários. ((Veja a imagem demonstrativa))

Nesta parte podemos aplicar vários estilos, como bordas, colocar uma cor de fundo diferente para dar mais destaque ao container geral dos comentários, e podemos também, colocar uma barra de rolagem, que é uma opção de se ganhar um pouco mais de espaço, se for o caso.

Para personalizar esse trecho, requer uma inclusão no código CSS, visto que nos templates padrões do blogger, não possuem a linha CSS para aplicar estilos a esta parte.
O que vamos fazer é inserir o código CSS aplicável ao bloco geral de comentários e definir os estilos que desejamos a ele.

Entre no painel do blogger , acesse o menu “modelo”, clique em “Editar html” (não precisa marcar a opção “expandir modelos de widget”).
Procure no seu template os trechos CSS que se referem aos comentários. Geralmente está assim:

/* Comments
-------------

Será nesse trecho que você irá colar o código CSS para definir os estilos.
Caso não encontre, localize a tag ]]></b:skin>
e cole ANTES dela o código a seguir :

 
.comments { 
background:#ffffff; /* ---Coloque a cor de fundo ---*/ 
margin: 15px 0px 10px; /* ---edite as medidas ---*/ 
width: auto; /* ---defina a largura se quiser ---*/ 
padding: 10px; /* ---edite as medidas ---*/ 
border:2px solid #723233; /* ---Coloque borda se quiser ---*/ 
} 

No código acima, não se esqueça que você deverá editar as partes que estão marcadas e destacadas em vermelho.
Na linha que se refe a largura (width) você preferir, pode colocar a mesma medida que tiver sua área total de postagem, caso algo fique desalinhado, vá ajustando a largura e as medidas até atingir o resultado que você quer.

 

Colocar barra de rolagem no container geral dos cometários:

Se quiser incluir uma barra de rolagem para fazer rolar todos os comentários que já foram publicados, basta incluir algumas linhas no trecho que você acabou de inserir no código CSS.
Procure por:

.comments

E acrescente as linhas:

 
height: 400px; /* ---edite a altura ---*/ 
overflow: auto; 

Devendo ficar assim:

 
.comments { background:#ffffff; /* ---Coloque a cor de fundo ---*/ 
margin: 15px 0px 10px; /* ---edite as medidas ---*/ 
width: auto; /* ---defina a largura se quiser ---*/ 
padding: 10px; /* ---edite as medidas ---*/ border:2px solid #723233; /* ---Coloque borda se quiser ---*/ 
height: 400px; /* ---edite a altura ---*/ 
overflow: auto; 
} 

height: 400px; é a altura total que terá o container geral de comentários (bloco de comentários).
O comando overflow: auto; faz como que a barra de rolagem apareça automaticamente, apenas se altura do container geral de comentários ultrapassar os 400px.

Recomendo que você leia todos os tutoriais desta série: Desmembrando a área de comentários, pois tenho certeza que no final da série você vai conseguir personalizar sua área de comentários da maneira que desejar.

Confira a lista dos tutoriais desta série que já foram publicados:

  1. Desmembrar a área de comentários
  2. Personalizar Container geral de comentários “comments-block”
  3. Personalizar nome do autor dos comentários “comment-author” ((não funciona no Designer de Modelo))
  4. Personalizar o corpo da mensagem dos comentários “comment-body” ((não funciona no Designer de Modelo))
  5. Personalizar o rodapé dos comentários “comment-footer” ((não funciona no Designer de Modelo))



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

21 Comentários

  1. André Luiz disse:

    Opa, gostei das dicas desse site. Estou criando um Blog pra nossa empresa, nós trabalhamos com locação de container e queremos criar um blog para informar aos nossos clientes as utilidades que um container tem.

  2. Lucas Skinny disse:

    Clau, gostaria de saber como separar a area dos comentários do rodapé das postagens, tem como?

  3. #PedroO disse:

    Clau eu tenho varios comentarios sendo que eles ficam todos juntos e nao da para compreender, entao queria que vc tirasse essa minha duvida.
    Como faço para deixar cada comentario individual?

  4. Angelo disse:

    Para quem usa o Intensedebate como se faz isso ?

  5. René Gustavo disse:

    Oi Clau, tudo bem?
    Bom, eu tenho uma dúvida sobre esse artigo.
    Eu coloquei a barra de rolagem nos meus comentários, para que a página não fique muito longa. Mas a área para o usuário digitar seu comentário (esta na qual estou digitando) fica dentro da área da barra de rolagem, e eu gostaria de coloca-la fora, há algum jeito?
    E também gostaria de saber como colocar um aviso, como esse acima, com o título "LEIA ANTES DE COMENTAR!", como colocar isso para que apareça no meu blog?
    Desde já agradeço, obrigado!

  6. .:: Clau ::. disse:

    Testei… e você???
    Que bom que deu tudo certo no seu template. Obrigada pelo comentário e pela dica tb…volte sempre.

  7. Testei... e você??? disse:

    Oi Clau, comecei a usar o Disqus e não desabilitei o meu do Blogger e os dois trabalham em conjunto, porém quem aparece é só o Disqus, com isso os novos comentários são registrados tanto no blogger e no Disqus, caso um dia queira deletar não perderei nenhum dado.
    Bjssss

  8. .:: Clau ::. disse:

    Thiago de Andrade
    Eu já publiquei uma série de tutoriais sobre a área de comentários a fim de tentar ajudar aqueles que querem personalizar melhor esta área. Faça uma busca em nosso indice de tutoriais e tente segui-los.
    Agora se vc tem dificuldades e necessita de um atendimento individual e personalizado, peço que envie-nos email através do formulário de contato,para que possamos lhe enviar o orçamento para este tipo de atendimento individual.

  9. Thiago de Andrade disse:

    Oi Clau

    O template que eu coloquei no meu blog, vem com uma área de comentário muito feia e limitada, e como o blog ja está todo personalizado e com as imagens feitas para aquele template, não queria trocar, pra não precisar mudar tudo… mas não consigo mudar nada na parte do comentário, já cheguei a retirar a imagem de fundo dele e mesmo assim continuava a mesma coisa

    O que eu faço?
    se quiser eu te passo o nome do template original e o endereço do meu blog pra você ver

    E parabéns pelo blog, só consegui fazer o meu graças a você

  10. Deb. disse:

    Eu fui acrescentar o disqus no meu blog e quando instalei ele sumiu com todos os comentários das postagens. TODOS.

    Mas resolver foi fácil. Bastou excluir o widget do Disqus do modelo do blog e tudo voltou ao normal.

    Nunca mais!

    Deb.

  11. ::Clau:: disse:

    @Arierom:
    Já estou escrevendo mais artigos sobre o assunto, logo estará no ar sobre o "comment-author" e em seguida esse que vc citou…pode aguardar que já já sai…é q as vezes o tempo não me permite fazer tudo que gostaria de fazer…rs
    Obrigada pela visita viu?

  12. Arierom disse:

    Olá Clau!

    aguardarei com expectativa os próximos artigos da série principalmente sobre "comment-body", pois penso que me ajudará a resolver um problema que estou enfrentando com a fonte dos comentários desde abril.
    Alguns "adereços técnicos" que usei anteriormente, tenho encontrado aqui mais simples e atualizado. Muito Bom!

    Parabéns pela didática do seu estilo;

    @BlogdeTaro

  13. Avelino disse:

    Olá Clau!

    è parece que deve ser no meu pc ou não!,de muitas vezes que visito quando está ok o blog é só carregar outro post que sai o css e fica tudobranco,estou escrevendo co Firefox atualizado e antes de abrir limpei o cache e cookies de todos os navegadores com CCleaner.
    Você pode tentar só colocar o link link href='URL_do_Aquivo_CSS' rel='stylesheet' type='text/css' em vez de import….

    Não sei se ajudará mais é esquisito mesmo!!
    Abraço!

  14. Andressa Quadro disse:

    Oi Clau, você sempre me ajudando =D
    perfeito este post, era o que eu estava precisando!

    PS: há algumas semanas quando entrei aqui ele apareceu sem CSS, todo em branco e sem nenhuma formatação mesmo, uso o firefox 3.6. No outro dia quando entrei de novo estava normal.

    Abraços, ótima semana

  15. ::Clau:: disse:

    @Avelino:
    Engraçado. Hje qdo loguei no blog aconteceu isso comigo, e pela 1º vez, aqui no GD estava tudo normal, mas no Blogosfera Legalizada e no Universo Sombrio estavam todo branco,sem css nenhum…ai corri pra limpar o cache e ficou tudo normal.
    O mais estranho é q só ficou assim,sem css, no firefox. No chrome e no IEca8 estavam normais…estranho isso! Õ.õ
    O q será q tá acontecendo? OMG!

  16. Avelino disse:

    Na questão dos navegadores quando ocorre de ficar sem css aqui,eu copio o link,limpo o cache e testo nos seguintes navegadores instalados aqui no pc:
    No IE 8,Firefox atualizado,de vez em quando no Opera e no crome que é meu padrão e estou usando agora,por enquanto neste momento está tudo ok com o blog e o US e BL…

    Abraços!

  17. ::Clau:: disse:

    @Avelino:
    Isso acontece apenas aqui no Gothic Darkness ou acontece tb nos meus outros Blogs, como o :Universo Sombrio e o Blogosfera Legalizada?

  18. ::Clau:: disse:

    @Avelino:
    Nossa que estranho Õ.õ
    Pior q pra mim aparece normal, e já perguntei a ouras pessoas q falaram q aparece normal…
    Pior q comecei a usar servidor externo pros meus arquivos por causa das clonagens e dos plágios =/
    é obvio q isso acaba deixando o blog mais rápido tb..mas não era pra sumir meu CSS….#mimimi
    Q navegadore q antivirus vc usa?

  19. Avelino disse:

    Pois é Clau continua só que é esquisito,no dia acesso mais ou menos umas 4,5 vezes o blog tanto direcionado do feed por email ou até digito na barra de endereço do navegador e vejo seu blog todo branco só algumas estilizações como por exemplo os botões,nem a imagem topo com o nome do blog e logomarca eu vejo,fica tudo branco,só vejo a escrita com a mesma cor.
    Com relação ao cache e até sou neurótico(já que estou a começar a desenvolver site e fuçar em blogs) tenho o CCleaner instalado e limpo sempre o cache,inclusive quando ocorre algum erro semelhante eu corro e limpo o mardito cache!!kkkk
    Neste mesmo comentário acabei de ver seu blog todo branco,quando carregou a página após digitar login e senha…

    E o disqus não pretendo tirar,até por causa deste problema,não tem volta!rs,mas estou contente com este sistema…

    Abraços!

  20. ::Clau:: disse:

    @Avelino:
    Só tome alguns cuidado com o Disqus, pq todo comentário recebido fica armazenado no Disqus. Se um dia vc resolver remover o Disqus do seu blog, seu comentários irão sumir. Vários amigos meus que usaram o disqus, já me comentaram sobre esse problema de perder os comentários depois que removeram o Disqus.
    Sobre o CSS do meu blog: eu hospedo meus arquivos em site externo sim, na uolhost. Estranho que já relatei esse problema a eles, eles solucionaram, mas vc está dizendo que pra vc ainda está causando problemas de visualização Õ.Õ
    Vou ter q reclamar lá com o servidor novamente…poxa que chato isso…#odio
    Pior é q tô começando a achar q o problema possa ser do blogger..será?Õ.õ
    Vc já tentou limpar seu cache ou cookies?
    Ah e vem k..vc sumiu heim =P

  21. Avelino disse:

    Bem que este artigo podia ter sido feito a uns 2 meses atrás porque agora uso o disqus e está sendo uma mão na roda,posso editar os comentários,exclui-los,moderar e até tem uma opção de personalizar do nosso jeito com css…
    Más com certeza o blogger vai melhorar seu sistema de comentário o mais breve possível e não seria ótimo ter trackback?rsrs

    Clau notei que muitas vezes seu blog ficava sem estilização (css) porque vi que tinha que carregar em outro lugar(servidor)pelo jeito está complicado de fazer este modo de carregar o css em um servidor que não seja o google!!rsrs
    Digo isto porque praticamente todo dia visito o blog e já estou quase decorando onde encontrar algo(artigo) que queira em um dos seus "tutoriais blogger"

    Abraços!

    Atenciosamente

    Rafael Avelino

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.