Série Fazendo meu layout- personalizar elementos de página e área dos comentários - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Série Fazendo meu layout- personalizar elementos de página e área dos comentários

Publicado em 17/06/2019

Hoje o dia vai ser longo! Vamos personalizar a área dos comentários, adicionar as variáveis que permitem a personalização via painel de vários elementos de página e ajustar esses elementos.
Como sempre tenho feito gravei a execução dessa parte do tutorial em vídeo.
Aperta o play e vamos trabalhar!



Agora vá até o painel administrativo de seu blog, esse que estamos personalizando, e clique na aba Tema.
Aí clique em Editar HTML.
Vamos começar personalizando a área dos comentários.
Aqui no blog tem uma infinidade de modelos personalizados prontos para usar na personalização da área dos comentários, mas para esta série eu escolhi este tutorial:


Clique no link, acesse o tutorial e o faça. Não tem erro, é só copiar e colar, e depois ajustar cores e fontes como preferir.
Uma dica: como já inserimos na aula anterior o script da fonte que estamos usando pode pular essa parte ao fazer o tutorial dos comentários personalizados.
Veja o vídeo, eu demonstro lá :)

Personalizar elementos de página:
Agora vamos para a parte mais trabalhosa da aula de hoje.
Vamos inserir as variáveis que permitirão alterar cores e fontes da caixa de pesquisa, do gadget Seguir por email, dos créditos do rodapé e do botão voltar ao topo.
A seguir vamos adicionar os respectivos códigos desses itens.

Parece um mundão de coisas mas basicamente é copiar e colar.
Deixei os códigos prontinhos e todos juntos e shallow now na página com os códigos de hoje.
Faremos apenas 3 passos, vamos?
Acesse a página com os códigos:


Copiar os códigos


Copie todo o código com as variáveis que criei, vá ao painel de seu blog e cole esses códigos acima de <Variable name="keycolor" description
Salve.

O que fizemos?
Adicionamos variáveis que permitem alterar cores e fontes dos elementos de página que citei acima.
Isso eu tenho feito em meus temas grátis para Blogger 2019 e facilitam demais na hora de mudar/personalizar/ajustar cores e fontes.

Agora localize a tag de fechamento ]]></b:skin> e acima dela cole o CÓDIGO CSS DOS ELEMENTOS DE PÁGINA.
Salve.

O que fizemos?
Adicionamos os estilos para os elementos de página que mencionei acima.
Aí já estão quase todos, e você pode alterar cores e fontes direto pelo painel, conforme expliquei acima.

Localize a tag de fechamento </body> e, acima dela, cole os CÓDIGOS DO BOTÃO VOLTAR AO TOPO, CRÉDITOS E AJUSTE DAS MINIATURAS DAS POSTAGENS MAIS VISTAS
Salve.

O que fizemos?
Inserimos o script do botão Voltar ao topo, a correção das miniaturas dos posts mais vistos e adicionamos os créditos do rodapé.
Nessa área você pode substituir o endereço do meu blog pelo seu e o meu nome pelo seu já que você está fazendo a Série Fazendo meu layout.
Se estivesse baixando este Tema Fernanda ou qualquer outro tema meu jamais poderia alterar meus créditos.
Entendeu?

Personalizar as categorias em formato menu suspenso:
Para finalizar a aula de hoje vamos personalizar os marcadores/tags/categorias e coloca-las em formato de menu suspenso. Este é o elemento que aparece lado a lado com o gadget Arquivo.
Para fazer isso copie o CÓDIGO DOS MARCADORES e volte ao painel de seu blog.
Aí clique no item Ir para um widget e localize seus marcadores. Deve ser algo como Label1
Clique nele.
Vai aparecer o código do widget.
Selecione de <b:widget até </b:widget> e no lugar cole o código de personalização que forneci.
Salve.

Caso queira ver para entender o tutorial que segui para personalizar os marcadores acesse: Marcadores em formato de menu suspenso.
Tem vídeo mostrando como fazer :)

Perfil personalizado:
Para adicionar esse recurso faça assim: copie o código que forneci e vá ao painel do seu blog.
Clique na aba Layout e a seguir clique em Adicionar um gadget.
Escolha a opção HTML/JAVASCRIPT e dentro da caixinha que expandir cole o CÓDIGO PERFIL PERSONALIZADO.
Cores são alteradas pelos códigos hexadecimais precedidos de #.

Salve, coloque no topo da sidebar e salve novamente a alteração no Layout.

Para editar a foto de perfil:
Onde está marcado em pink é a url da foto.
Escolha sua foto, hospede-a como ensino abaixo e troque a url da foto do meu exemplo pela url da sua foto.

Para editar os links das redes sociais:
Coloque o endereço https de suas redes sociais nos campos marcados em cada uma, respectivamente.
Salve.

O que fizemos?
Adicionamos o perfil do blogueiro/blogueira.
Claro, é opcional, se não quiser pode deixar sem.

Dica bônus: como hospedar imagens usando o próprio Blogger


Faça assim: crie um post de rascunho em seu blog ou crie um blog de testes só pra isso.
Abra o editor de postagens (ali onde você escreve seus posts), carregue as imagens que precisa hospedar, deixe-as em Tamanho original.
Pare o mouse sobre cada uma delas e clique sobre a imagem com o botão direito do mouse.
Selecione (no Chrome) Copiar endereço do link.
Essa é a url hospedada de sua imagem.
Os posts de rascunho podem ser apagados depois, as imagens permanecem.
Elas só desaparecerão se sua conta for excluída.



E terminamos a parte "visual" da Série Fazendo meu layout!
No próximo tutorial prático vamos nos aprofundar e otimizar o tema para mecanismos de busca, corrigir erros em heading tags, e mais coisas essenciais para seu tema funcionar direitinho.

Também vamos, ao final de tudo, realizar alguns ajustes finos nos códigos, para deixar tudo redondinho.
Temos muito trabalho ainda, mas tá valendo a pena, né?
Tem algo que você queira perguntar sobre o que fizemos até aqui?
Diz aí...





2 comentários

  1. Oi Elaine, apareci de novo com mais um problema hahahahaha, eu coloco o código pra personalizar os comentários, salvo tudo normal, mas quando vou ver não mudou nada, fiz alguma coisa errado?

    ResponderExcluir
  2. Está dando falha no meu codigo (colar acima de <Variable name="keycolor" description), dá erro.

    ResponderExcluir

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.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
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…