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.
;)