Box com mini-biografia e redes sociais do autor do post

em 10 de maio de 2016

Box com mini-biografia e redes sociais do autor do post

Oi, gente!
Vou compartilhar com você um tutorial bem simples de fazer, que vai mostrar sua foto de perfil Google ou Blogger ao final de seus posts, e junto dela ícones que levam para suas redes sociais.
Assim:

Clique sobre a imagem e veja em funcionamento ao final do post.

É bem simples de fazer, basta um tiquinho de atenção e tudo dará certo.
Para começar você precisa fazer backup de seu template.

Clique aqui e aprenda como salvar seu template e evitar algum erro.


Feito o backup de segurança vá até o painel de seu blog e clique na aba Layout.
Clique em Editar abaixo do item Postagens no blog.
Na janela que expandir marque a opção Mostrar perfil do autor abaixo da postagem.
Salve.
A seguir abra a página com os códigos que precisará copiar:


Copiar os códigos


Agora, no painel de seu blog,  clique na aba Modelo, e dentro da caixa de código de seu template tecle Ctrl+F. Na barra de busca que expandir cole isso:



Tecle Enter para localizar.
Provavelmente você achará 2 ocorrências desse trecho. Estamos em busca da segunda ocorrência, tá?
Localizou?
Abaixo dela cole o código HTML (o primeiro que está no blog de códigos).
Preste muita atenção!
Deixei marcado no código as áreas que você precisa editar. São os links de suas redes sociais, o link de sua página de perfil e o texto da mini-biografia.
É essencial editar isso, ok?
Fez?
Então salve.


Agora localize essa tag de fechamento:



E acima dela cole o Código CSS.
Salve.

Localize a tag de abertura <head> (está bem no comecinho do código-fonte) e abaixo dela cole o Código da fonte especial.
Salve.
Está feito.
Agora seus leitores podem encontrar você nas suas redes sociais preferidas, além de verem uma mini-biografia sua abaixo dos seus posts.
Fica legal, né?


Perguntas que podem surgir


1- Quero acrescentar mais redes sociais. Posso?
Sim, pode. Basta acrescentar ao Código CSS, abaixo do código do Instagram, este código:




E repeti-lo para tantas quantas redes desejar acrescentar, sempre alterando o número 5 pelos sequenciais 6, 7, etc...

Também precisa acrescentar esse código ao Código HTML:



E repeti-lo para tantas quantas redes desejar acrescentar, sempre alterando o número 5 pelos sequenciais 6, 7, etc...

2- Quero trocar as cores...
As cores dos ícones você altera no Código CSS, são os números hexadecimais precedidos de #.

3- Fiz tudo e não deu certo, o que houve?
Não sei.
Releia o tutorial e refaça tudo.
Testei em templates nativos do Blogger.
Se seu template é baixado da internet pode não funcionar. Tem que testar.

4- Fiz, deu certo, mas quero tirar. Como faço?
Releia o tutorial e vá excluindo o que inseriu.

5- Não tenho uma página Sobre.
Crie uma. Vá em Páginas/Nova página e crie uma sobre você e/ou sobre seu blog.

6- Quero excluir uma das redes sociais.
Apague o trecho, no Código HTML, referente à rede que deseja excluir.

7- Quero trocar a foto.
Vá ao seu perfil Google (ou Blogger, depende de qual usa) e troque. A troca será automática no blog.



aqui
Leia e releia até se certificar de haver entendido.
O tutorial é longo mas é porque eu sou detalhista e gosto de explicar tudo, pra minimizar as dúvidas.
Acredite, montar o tutorial, testar e refazer os códigos, dá 10 vezes mais trabalho do que implementar no blog.
Vai por mim, é facim, facim...


*A imagem que ilustra o post é uma cortesia do Banco de imagens Shutterstock.

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. Oi Elaine,
    eu gosto da forma como você explica, o texto fica longo, mas é melhor pra entender.
    Adorei! Obrigada por compartilhar seu conhecimento com a gente.
    Beijos

    ResponderExcluir
  2. Aiaiai vamos ver se consigo. Estava querendo isso. Atualizar a bio porque estou fazendo outras coisas e quero direcionar a bio informando.
    Obrigada!

    ResponderExcluir
  3. Olá, tudo certo? Eu gostaria de saber como faço quando o blog é escrito por mais de uma pessoa. Agradeço!

    ResponderExcluir
    Respostas
    1. Também gostaria de saber, já que em meu blog são vários autores, e esse estilo de assinatura é bem simples e apresentável, mas não serviria para mim já que não é mostrado como por para mais de um autor. Ainda assim, seria uma boa a Elaine responder informando se é ou não possível, e se sim, como seria para por mais de um autor.

      Excluir
    2. É possível sim, tanto que uso aqui no blog.
      Mas pede outro tutorial, farei assim que possível.

      Excluir
  4. Mais uma vez Obrigado meu Amor.. Ajudou pa Caramba!!!

    ResponderExcluir
  5. Elaine, como faço para alterar a cor da fonte ?

    ResponderExcluir
  6. Oi Elaine boa tarde, muito obrigado por esse tutorial ficou bem legal, queria só tirar uma dúvida, tem como deixar igual ao seu abaixo dos botões das redes sociais, o meu ficou acima. Desde já ti agradeço. bjsss

    ResponderExcluir
    Respostas
    1. Sim, e nesse caso é ir colando o código em lugares diferentes e testando até ele ficar onde você deseja.
      Não vou dizer exatamente onde pois cada template tem variações, mas se quer que o box fique mais embaixo mude a posição dele para depois dos botões de compartilhar :)
      bjsssss

      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…