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

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:

 Botões de compartilhar personalizados

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:

 Postagens relacionadas- modelo responsivo pronto para usar

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:

 Botão do Pinterest que aparece sobre as imagens dos posts

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