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:
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:
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á?
Como faz pra colocar esse botão de copiar os códigos?
ResponderExcluiroi 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?
ResponderExcluirKarine, só esse código mesmo.
ExcluirTem certeza que não esqueceu nada? Colocou o endereço do ícone? O código no lugar certo?
Este comentário foi removido pelo autor.
ResponderExcluirOi 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?
ResponderExcluirEliane, para que os gadgets fiquem todos com a mesma aparência vc precisa alterar o h2 do título por h4.
ExcluirIsso 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
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...
ExcluirEliane, tente o blog da Nanda:
Excluirhttps://www.simplesbellablog.com/
Talvez lá tenha algo que te ajude, ela tem alguns posts sobre Adsense
bjssss
Farei isso, muito obrigada!
Excluir