Rodapé dos posts personalizado com postagens relacionadas e box de curtir a fanpage - * Blog Elaine Gaspareto *

Rodapé dos posts personalizado com postagens relacionadas e box de curtir a fanpage

em 20/12/2016

Rodapé dos posts personalizado com postagens relacionadas e box de curtir a fanpage

Oi, gente!
No tutorial de hoje eu vou te mostrar como colocar em seu blog um rodapé (ou footer, pra ficar mais chique rsrsrs) personalizado para as postagens, com o box de curtir a fanpage de seu blog, link para seguir seu blog via Bloglovin (ou qualquer outro link que deseje) e o mais legal: os posts relacionados!
Ficará assim:


Demonstração do tutorial


E ao final vou deixar a opção de aparecer na home do blog ou somente nas páginas internas, dos posts.
Quer ver como é simples?
Vem comigo!



Como colocar os posts relacionados no blog?


Antes de mais nada abra a página com os códigos necessários à realização deste tutorial, e a mantenha aberta:


Copiar os códigos


A seguir vá ao painel administrativo do blog onde vai instalar o recurso e clique em Modelo.
Aí clique em Editar HTML e na caixa do código fonte tecle simultaneamente Ctrl+F.
Na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
Acima disso cole o CÓDIGO CSS.
Salve.

Agora, na barrinha de pesquisa, digite <div class='post-footer-line post-footer-line-3'> e tecle Enter.
Abaixo disso cole o CÓDIGO HTML.
Salve.
Se tudo deu certo você já tem o rodapé pronto, agora é só editar.
Vamos lá?
Atenção às dicas, ok?


Dicas extras importantes- leia com atenção!


1- Sugiro sempre que você faça antes em um blog de testes que tenha ao menos 8 posts com imagem, que seja público e que tenha marcadores inseridos nos posts. E que tenha, de preferência, o mesmo template de seu blog real.
Assim você pega as manha tudo e ao fazer em seu blog não cometerá erros.

2- O CÓDIGO CSS define a aparência do box. Coisas como cor de fundo, cor e tipo de bordas, cor e tipo de fonte, tudo é definido no CÓDIGO CSS. Para alterar o que você desejar em termos de aparência leia este código; deixei marcado em CAPSLOCK todas as áreas que considero relevantes. Vá mudando e testando até ficar como deseja.

3- No CÓDIGO HTML você vai modificar o link para o Bloglovin, ou inserir o link que desejar.
Explico.
Vamos supor que você queira tirar o link que direciona para o Bloglovin e no lugar dele colocar seu Instagram, por exemplo. Ou o link de seu Google+.
Basta apagar o link do meu Bloglovin e no lugar dele colocar o link que desejar.
Altere a frase e siga o blog via Bloglovin caso mexa nessa parte.
Se colocar o link do seu Instagram alter para Me siga no Instagram ou algo semelhante.
Seja criativo!

4- Também no CÓDIGO HTML você precisa trocar o nome da minha fanpage pelo nome da sua. E o endereço completo da minha fanpage pelo endereço comélto da sua, ok?
Está assim:

<p class='Fanpage'><a href=' https://www.facebook.com/ElaineGaspareto/'>Ou curta nossa fanpage no Facebook:</a></p>
&lt;iframe src=&quot;https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FElaineGaspareto%2F&amp;tabs&amp;width=300&amp;height=70&amp;small_header=true&amp;adapt_container_width=true&amp;hide_cover=false&amp;show_facepile=false&amp;appId=1566384683669266&quot; width=&quot;300&quot; height=&quot;70&quot; style=&quot;border:none;overflow:hidden&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowTransparency=&quot;true&quot;&gt;&lt;/iframe&gt;
</div></div>

Altere onde marquei em azul para o nome de sua fanpage, exatamente o nome que aparece no navegador quando você entra em sua fanpage, ok?
A minha aparece assim no navegador: https://www.facebook.com/ElaineGaspareto/
Então eu coloco ElaineGaspareto no código que estamos editando.
Faça isso com a sua e salve.
E, claro, não esqueça de colocar o endereço completo onde está o meu. Marquei em azul aqui, pra você entender certinho.

5- Caso queira que o box só apareça nas páginas internas dos posts e não na página inicial do blog acrescente a condicional que deixei na página de códigos antes do CÓDIGO HTML e não esqueça de fechar essa condicional.
Deixei tudo lá na página com os códigos, tá?

6- Leia e releia, tanto o tutorial quanto os códigos, até se certificar de haver compreendido tudo.
É bem simples, dois passos apenas, mas como bem sabemos o charme e graça estão nos detalhes, né? Então preste atenção em tudo, faça em um blog de testes e divirta-se!


Se tiver alguma pergunta deixe nos comentários e eu ajudo se for possível.

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

9 comentários , comente também!

  1. Quando eu digito < div class='post-footer-line post-footer-line-3' > na barrinha de pesquisa ele não 'encontra'. Oque eu faço?

    ResponderExcluir
    Respostas
    1. Rayssa, experimente procurar por trechos da tag, tipo post-footer
      Vá teclando Enter e achando todas, até achar a que deseja. Pode ser line 1, line 2...

      Excluir
    2. clica em ir para gadjet e seleciona a opção HTML4 abra a barra de pesquisa e seleciona a tag que pretendes pesquisar aparecera

      Excluir
  2. Olá Elaine, bn!
    Amei essa dica!
    Elaine, quero aproveitar p/já desejar um feliz Natal e que o ano de 2017 venha com muita saúde, muita paz e muitas alegrias p/vc e sua família. Desejo que sua mãe e seu esposo tenham melhoras maravilhosas nesse novo ano. Aproveito tb a oportunidade p/agradecer pela atenção que vc me dispensou em 2016.
    Bjsss querida

    ResponderExcluir
    Respostas
    1. Maria, muito obrigada!!!
      É tudo que quero!
      beijossss

      Excluir
  3. Elaine, hoje eu vim só para lhe desejar um Santo e feliz Natal. Não sei como vai a senhora sua mãe espero que esteja melhor. E desejo que 2017, seja um ano mais calmo, e sobretudo que o marido não sofra surtos.
    Um abraço

    ResponderExcluir
  4. Este comentário foi removido pelo autor.

    ResponderExcluir
  5. Eu fiz de acordo com o tutorial, infelizmente os posts relacionados não estão funcionando, eu não consegui achar algum erro, sendo que meus posts tem marcadores e deveria achar, pode me ajudar nisso fazendo favor? obrigado. Já usei outros tutoriais seus e são excelentes, parabéns pelo trabalho.

    ResponderExcluir
    Respostas
    1. Felipe, infelizmente não tenho como saber se há algo em seu blog causando conflito.
      Pode acontecer, em um dos templates que testei as miniaturas não apareceram.
      Minha sugestão é: faça o processso em um blog de testes, certifique-se de não haver esquecido nada.
      Mas adianto que, vez em quando, por mais certo que a gente faça, algo no blog (códigos anteriores, algum gadget que use script pra rodar como o widget Eu te salvo, até alguma imagem de algum post) podem interferir e não funciona como deveria...

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



Contando...

Dias online
Postagens
comentários

Visualizações