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.

;)