Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

19 março 2010

Personalizar os comentários - Web Developer


Quando modificamos um layout do Blogger diretamente nos códigos (painel Editar HTML) e clicamos em Visualizar, temos uma visão da página inicial. Se clicarmos nos comentários, as alterações não se revelam enquanto não salvarmos as modificações, o que nos obriga a personalizar a área dos comentários 'no escuro'. É preciso salvar a modificação e abrir o blog em um dos posts para que se possa ver o resultado. É trabalhoso, é chato, desanima. Por isso vou ensinar um método (o que uso) para personalizar os comentários de maneira muito mais fácil e agradável.

Primeiro de tudo, use o Firefox e baixe a extensão Web Developer. Depois de baixar, instalar e reabrir o navegador, você verá um novo menu, como mostra a imagem:


Você logo descobrirá o quão fantástica é esta extensão e o quanto ela poderá te auxiliar a criar layouts e entender melhor alguns códigos em diversas páginas. Falarei sobre os recursos desta extensão em um novo post, hoje me deterei a aba CSS e a possibilidade de editar o código CSS de qualquer página da web (Obviamente a modificação nos códigos de uma página gerará uma visualização prévia, não uma mudança real).

Entre e uma página do seu blog onde os comentários estão visíveis. Feito isso, clique em CSS no menu que acabou de instalar e escolha a opção Edit CSS.



Uma janela se abrirá na parte inferior (em alguns casos, superior) do browser, então clique na última opção do menu desta janela 'Embedded Styles':


Na parte inferior do menu aparecerá todo o código CSS da página onde se encontra. 
Note que depois que iniciar as alteração na página, você não deverá sair dela ou perderá o que escreveu, por isso altere tudo o que deseja, copie suas alterações e só então deixe a página.

Procure no código que se abriu o trecho comments como mostra a imagem:


Eu já mostrei em outro tutorial que uma boa maneira de descobrir a que se relaciona cada trecho do código é determinando cores de fundo para cada bloco, quanto mais chamativas, melhor. Faça isso, como mostra a imagem (veja que inseri background: red no código e background: yellow, etc):




Para separar um comentário do outro, dei estilo a #comments-block .comment-body


Vá colorindo cada parte do código e descobrindo sua função, criando estilos para cada parte dos comentários. Note que a cada mudança que se faz nos códigos o resultado é mostrado instantaneamente na página. Depois que terminar suas alterações, copie tudo o que fez, feche a janela do Web Developer e vá até o código do seu template, substituindo o trecho que modificou pelos novos códigos e salve:


Copie apenas o trecho que modificou e substitua apenas o que deseja modificar, não o código da página inteira, ok?

Para centralizar o formulário de comentários, acrescente esta linha:

#commnet-form, .comment-form{margin: 0 auto;}

Para aumentar a largura do formulário de comentário você deve ir direto no código do seu template, expandir modelo de widget e encontrar este trecho:


Altere o valor 100% de width para qualquer outro que deseja, por exemplo: 580px. Se quiser aproveitar e diminuir a distância do formulário de comentário para os link de navegação, diminua o valor de height (coloque uns 290px).



Bem, mostrei a ferramenta que uso para me ajudar a modificar os códigos dos comentários, agora é com a criatividade de cada um. Para ajudar ainda mais neste trabalho, sugiro que leiam os seguintes tutoriais:

Personalizando a caixa de comentários do Blogger
Destacar comentários do autor no Blogger 
Blogger: Avatares en los comentarios

Claro que existem muitos outros tutoriais de grande qualidade em outros blogs; uma simples busca no google  trará ótimos resultados.

;)

Artigos Relacionados

26 comentários:

Mateus disse...

No google chrome fazemos isso sem precisar instalar nada...

rubensSB disse...

Conheço este add on para o firefox, mais ainda não consigo me desgrudar do Firebug.

Estou a pouco na esfera do blog e gosto muito de seus tutoriais, realmente auxilian e muito!

Rafael disse...

nossa facilitou a minha vida e muito otima postagem merece um 10

Atanaildo disse...

Ariane vlw pelo poste pricipalmente pela dica da extenção Web Developer do firefox vai ser de grande ajuda.

Obrigadão XD

Adrux disse...

Oi Ariane, extensão maravilhosa, contém muitas ferramentas e é muito poderoso. Eu já instalado e vou tentar. Outra pergunta, eu enviei uma consulta através do seu formulário de contato, mas eu não recebi uma resposta (você provavelmente nunca ouviu falar.) Se está tudo bem, eu gostaria de publicar e reproduzir no meu blog, uma entrevista que você fez para um amigo novo blogger templates, 29 de agosto de 2009.
Aguardo sua resposta.
Obrigado

Hola Ariane, magnifica extensión, contiene muchas herramientas y es muy potente .Ya la he instalado y voy a probarla. Otra cuestión, te he mandado una consulta por intermedio de tu formulario de contacto, pero no he recibido contestación (seguramente no te ha llegado). Si te parece bien, me gustaría mucho publicar y reproducir en mi blog, una entrevista que le hiciste a un amigo en templates novo blogger , el 29 Agosto 2009.
Espero tu respuesta.
Gracias

Suzy disse...

Ariane, parabéns pelo dia do blogueiro, pois você é uma blogueira que se tornou referência nesse vasto universo interativo da blogosfera.

Olhares Hodiernos disse...

Seu blog tem me ajudado muito na construção e na manutensão do meu. Você é incrível. Continue assim.

アツダ ヒル disse...

Oi Ariane. Ja acompanho o blog a 1 ano e meio. ^ ^
Desculpa por postar aqui uma duvida que nao tem nada haver com o post. Mas gostaria MUITO de saber uma coisa.

Graças as dicas que você sempre poem aqui no TNB, hoje eu ja sou um desenvolvedor mediano no blogger, mas algo ainda me intriga muito.

Gostaria de saber como funciona um sistema de login/logout, pois estou desenvolvendo um site tendo o blogger como host e nao tenho a minima noção de como isso funciona. ^^

Agradeço desde ja!

OCP disse...

Obrigado pela dica, Ariane. :)

De certeza que vai ajudar muito. ;)

Abraço. :)

denis disse...

Tem como você fazer um tutorial de como adicionar artigos relacionados como você fez

Massa Bruta disse...

Sem palavras ,otimo poster

eduardotlopes disse...

Cara Ariane
como vi no seu perfil, é perita em blogue. talvez me possa dar um ajuda.Vai me desculpar, mas tenho um problema com a edição de mensagens. De um momento para o outro deparei que ao editar mensagem aparece nos botões superiores do lado direito o botão HTML accionado com o respectivo texto em HTML, troco para Redigir e tenho acesso ao texto. Depois, quando acciono o botão para publicar mensagem ele abre os seguintes avisos
"O seu HTML não pode ser aceite: Tag is not allowed: LINK"
"!Parar de mostrar erros de HTML do corpo desta mensagem "clico no quadradinho de; "parar de mostrar erros de HTML..." e logo visualizando o meu blogue aparecem as mensagens misturadas com as mini aplicações. será que me pode ajudar.
peço desculpa pelo abuso, mas sou um blogueiro novato.
um abraço.
edutelo

Ariane disse...

eduardotlopes a mensagem aparece por que uma tag não foi corretamente fechada. O ideal é usar o modo Editar HTML apenas se tiver um certo conhecimento desta linguagem, do contrário é melhor usar o modo Escrever e os recursos do painel de edição, para centralizar texto, modificar fontes ou colocar imagens. De qualquer maneira, normalmente ao aparecer a mensagem de erro o próprio blogger destaca o erro no código, facilitando a correção.

Betinho disse...

the best people of blog

A melhor blogueira do mundo eh vc ariane

Marcos-Gabriel disse...

Me desculpe mas ainda não entendi porque WEB DEVELOPER
no titulo da postagem, este tipo de coisa n é feita por webdeveloper e sim por um webdesigner o que seria o mais correto a ser colocado no titulo e nas tags.
Bom, a opção por deixar é sua...
Mas correto não esta.

Gisele Goes disse...

Ariane, minha pergunta não tem nada a ver com o tutorial,mas é porque estou com um problema. Meu blog não aprece nas pesquisas do google, já testei e nada. Pensei que sendo do blogger automaticamente apareceria. O q faço para ele aparecer?

VAL-gabundo disse...

Ariane, parabéns pelo blog, será que vc conseguiria me ajudar, criei um blog e os comentários não aparecem quando público uma postagem, mas quando visualizo dentro do meu blog essa postagem, os comentários aparecem, escrevi TESTE em uma postagem e o comentário aparece na visualização mas com a postagem publicada não aparece, o blog até acusa que existe 1 comentário, vc sabe como eu poderia estar arrumando isso, desde já agradeço.
VAL-gabundo (Lourival)

Ariane disse...

VAL vá no painel Elementos de Página e clique em Editar no quadrado que corresponde a coluna dos posts. Na janela que se abrir, veja se a opção de mostrar o link enviar comentários está marcada.

Lander Costa disse...

Nosso Deus! Tive que comentar só por causa do Marcos-Gabriel.

Amigo, você não percebeu que não é por opção que a Ariane colocou no título: Web Developer??

E sim porque o nome do ADDON usado para o Firefox se chama justamente: Web Developer

https://addons.mozilla.org/pt-BR/firefox/addon/web-developer

Que a Ariane me avise se eu estiver errado! :)

Ariane disse...

Lander Costa é isso ai! :)

Taillard disse...

Lander Costa

Arrazouuu!

Beijao Ariane

Yory disse...

OI gostaria de saber se voce sabe como posso alterar a ordem dos comentarios tipo o meu é igual ao seu que mostra primeiro os comentarios mais antigos e os mais novos ficam bem abaixo, queria saber se tem como eu deixar os mais novos em cima e os mais antigos pra baixo...por favor me respondo flw

Edson F. disse...

Ariane, tudo bem?
Eu segui todos os passos, mas a imagem só aparece quando clico pra comentar, ou seja, quando estou já dentro dos comentários. Ela não aparece no "Clique aqui para comentar", logo abaixo do Post. Por que isto acontece?
Obrigado!

Edson F. disse...

Já resolvi o problema colocando o "Leia Mais"

Aleksander D.L disse...

opa, eu altero as coisas, mais não altera na no blog , como disse que era para aparecer em tempo real.

Sei lá, tem que cliar em algum lugar no plugin para atualizar a página.

Clã Celestial Blog disse...

Bacana esse programinha, apesar disso todo navegador atualmente possui um editor de código.

O do firefox se chama firebug, e os do chome e opera já vem integrados, e o do IE... deve ter algo pra ele também.

Postar um comentário

Os comentários são moderados.