Modelo lindo para personalizar e numerar automaticamente os comentários do blog - * Blog Elaine Gaspareto *

Modelo lindo para personalizar e numerar automaticamente os comentários do blog

Publicado em 17/08/2018

Tempo de leitura:

Você é como eu e gosta de sempre aprender como personalizar ainda mais as coisinhas de seu blog? Eu gosto muito, gosto de testar coisas novas, experimentar mudanças, melhorar o que já está bom e aprimorar ainda tudo que for possível no blog.

Uma das áreas importantes de um blog é a área de comentários. Blog sem comentários não é blog, e deixar essa área bem bonita é muito legal. Aqui no blog tem vários tutoriais que ensinam como personalizar a área dos comentários.
Hoje vou te dar essa sugestão, que tem um visual lindo e um efeito bonitinho ao passar o mouse.
Olha:


Demonstração do tutorial


Além de ser bem bonito é totalmente personalizável. Você pode trocar cores e fontes facilmente pois deixei marcado no próprio código as áreas editáveis. Basta localizar a área que deseja personalizar ao seu modo e pronto!
Vamos aprender como fazer?

Para começar acesse a página com o código que vamos usar:


Copiar o código


A seguir vá até o painel administrativo de seu blog (ou do blog de testes onde eu sugiro que você faça o tutorial antes) e clique na aba Tema.
A seguir clique em Editar HTML e dentro da caixa do código fonte tecle Ctrl+F.
Na barra de pesquisa que aparecer digite ]]></b:skin> e tecle Enter para localizar.
Acima de ]]></b:skin> cole o CÓDIGO CSS.

Esse é o código que comanda tudo, as cores, as fontes, etc...
Deixei marcado no código o que cada trecho faz, é só ler, alterar como desejar e salvar.
Simples e rápido!
Ah, os comentários já são automaticamente numerados, exatamente como os meus, diferenciando comentários de respostas.
Legal, né?

Uma dica extra: caso seu blog já tenha a área dos comentários personalizada será preciso remover a personalização anterior e colar o código desta nova no lugar, ok?
Caso queira usar a fonte que usei, a Montserrat, precisa inserir o código dela abaixo de <head>
Deixei especificado na página do código, tá?
E pode trocar a fonte Montserrat pela fonte que desejar.
Escolha aqui: Google Fonts


Aproveita que foi facinho e compartilhe esse post em suas redes sociais...
Eu agradeço muito!!!





0 comentários via Blogger
comentários via Facebook

Nenhum comentário:

Postar um comentário

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…