Série Fazendo meu layout- personalizar sidebar e inserir recursos na área do post - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Série Fazendo meu layout- personalizar sidebar e inserir recursos na área do post

Publicado em 03/06/2019

Série Fazendo meu layout- personalizar sidebar e inserir recursos indispensáveis
E chegamos ao 3º tutorial da Série Fazendo meu layout! Finalmente vamos personalizar a sidebar do blog, inserir as postagens relacionadas e os botões de compartilhar posts.
Também vamos inserir o botão do Pinterest sobre as imagens dos posts, um recurso mega legal e importante!
Vem comigo que hoje vamos trabalhar bastante!

Antes, uma dica:
Buscando um plano de Internet Banda Larga para sua residência? Confira os planos em fibra óptica das principais operadoras no site: https://portaldosplanos.com

Como sempre tenho feito nesta série eu gravei parte do tutorial de hoje em vídeo.
Aperta o play e vem comigo!



Botões de compartilhamento:
Para adicionar os botões de compartilhar eu segui este tutorial:


Lembrando que no tutorial passado já inseri o CÓDIGO HTML então vamos seguir até esse passo e pronto.
Também retirei o arredondamento dos botões apagando o trecho no CÓDIGO CSS:

    border-radius:50px;
    -o-border-radius:50px;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;

Para finalizar essa parte eu adicionei um COMPLEMENTO DOS BOTÕES COMPARTILHAR.
Está na página de códigos que vamos usar hoje:


Copiar o código


Postagens relacionadas ao final dos posts:
Para inserir esse recurso você pode seguir qualquer um dos tutoriais nos quais ensino sobre postagens relacionadas.
Eu segui este tutorial abaixo linkado pois ele resulta em um recurso mais limpo e o melhor: já responsivo, o que nos desobriga de escrever media queries específicas para esse hack:


Nota:
Ao concluir o tutorial seus posts relacionados já estarão aparecendo.
Por isso pedi que você adicionasse marcadores aos seus posts.
Sem marcadores não aparecem posts relacionados e nem aparecerá o slide que futuramente vamos instalar.
Além de possuir os marcadores o blog precisa ser público, ok?


Botão do Pinterest sobre as imagens dos posts:
Para finalizar a personalização da área dos posts vamos adicionar o botão Pin it que aparece sobre as imagens dos posts.
Pare o mouse sobre cada imagem aqui do blog e você verá do que estou falando.
Para adicionar ao blog onde estamos trabalhando eu segui este tutorial:


Basta adicionar o código acima de </body>, inserir a url do ícone do Pinterest que desejar e voilà!
Está feito!


Personalizar títulos dos gadgets da sidebar:
Agora que personalizamos completamente a área do post vamos personalizar os títulos da sidebar.
Localize:

<Group description="Gadget Text" selector=".sidebar .widget">

E cole, acima dele, o CÓDIGO VARIÁVEL DOS TÍTULOS.
Salve.

O que fizemos?
Inserimos as variáveis que permitem trocar a cor de fundo dos títulos dos gadgets direto pelo painel do Blogger.
Faremos isso futuramente com alguns elementos de página. Isso visa facilitar a vida quando quiser trocar cores e fontes, tendo as variáveis não precisará entrar no código-fonte para fazer essas alterações.
Legal, né?
Sigamos.

Localize:

/* Headings

Selecione tudo assim:

/* Headings
---------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

E no lugar cole o código /* TÍTULO DOS GADGETS
Salve.
Está feito!
Agora os títulos da sidebar estão com fundo, centralizados e com as margens ajustadas.
Se quiser, futuramente, alterar cor e fonte dos títulos basta ir em Tema/Avançado e verá que existe uma nova classe lá que permite escolher isso.
Futuramente, se você quiser, posso te ensinar como escrever variáveis.
Diz aí nos comentários se há interesse...

E terminamos por hoje!
Rendemos bastante, e falta pouco para concluir a parte "visual" da nossa Série Fazendo meu layout.
Na próxima aula vamos finalizar essa parte e a seguir vamos adentrar um pouco mais fundo e otimizar o tema no qual estamos trabalhando para deixa-lo o melhor possível para SEO.
Também vamos corrigir erros e mais alguns truques que você não vai querer perder.
Te espero na próxima aula, tá?





9 comentários

  1. Como faz pra colocar esse botão de copiar os códigos?

    ResponderExcluir
  2. oi Elaine o codigo do pinterest não aparece no meu refiz varias vezes em 3 blogs testes e nao aparece meu botão do pinterest, tem alguma opção ao que vc menciona gatona linda?

    ResponderExcluir
    Respostas
    1. Karine, só esse código mesmo.
      Tem certeza que não esqueceu nada? Colocou o endereço do ícone? O código no lugar certo?

      Excluir
  3. Este comentário foi removido pelo autor.

    ResponderExcluir
  4. Oi Elaine, estou usando o tema Fernanda no blog. Mas se você der uma olhada lá (praticafiscal.com.br), eu inseri no sidebar (é assim que chama aquela coluna lateral né?) uma Gadget Destaque, mas a altura da linha do título do Gadget ficou mais fina do que os outros e a largura do título mais estreita quando comparada com o postagens mais acessadas, por exemplo, e isso acontece com qualquer outro que eu insira. Como faço pra ficar tudo igual? Pode me ajudar?

    ResponderExcluir
    Respostas
    1. Eliane, para que os gadgets fiquem todos com a mesma aparência vc precisa alterar o h2 do título por h4.
      Isso precisa ser feito porque o Tema Fernanda tem as heading tags já corrigidas.
      Leia este tutorial para entender:
      https://www.elainegaspareto.com/2018/01/como-corrigir-os-erros-das-heading-tags.html

      Excluir
    2. Elaine você é minha deusaaaa. Segui apenas a parte final do tutorial que você indicou, pra alterar o h2 por h4 e foi batata. O título do Gadget ficou ajustadinho. Muuuuito obrigada por toda essa generosidade! Tem algum post pra indicar que me ajude a descobrir porque meus anúncios adsense não aparecem no blog? Já tive a conta aprovada, as URL estão com status de pronto, configurei em ganhos para os anúncios aparecem nos post e sidebar (recomendado) e segui o tutorial do google inserindo o código entre as tags body e /body e nada de anúncio aparecer...

      Excluir
    3. Eliane, tente o blog da Nanda:
      https://www.simplesbellablog.com/
      Talvez lá tenha algo que te ajude, ela tem alguns posts sobre Adsense
      bjssss

      Excluir

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…