Tutoriais Blogger Vanessa S.
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:
- Desmembrar a área de comentários
- Personalizar Container geral de comentários “comments-block”
- Personalizar nome do autor dos comentários “comment-author” ((não funciona no Designer de Modelo))
- Personalizar o corpo da mensagem dos comentários “comment-body” ((não funciona no Designer de Modelo))
- Personalizar o rodapé dos comentários “comment-footer” ((não funciona no Designer de Modelo))
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.
Clau, gostaria de saber como separar a area dos comentários do rodapé das postagens, tem como?
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?
Para quem usa o Intensedebate como se faz isso ?
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!
Testei… e você???
Que bom que deu tudo certo no seu template. Obrigada pelo comentário e pela dica tb…volte sempre.
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
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.
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ê
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.
@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?
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
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!
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
@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!
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!
@Avelino:
Isso acontece apenas aqui no Gothic Darkness ou acontece tb nos meus outros Blogs, como o :Universo Sombrio e o Blogosfera Legalizada?
@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?
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!
@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
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