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á?





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.
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…