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:
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.
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...
Importante
Há uma atualização desse tutorial, para blogs com mais de um autor.Acesse:
*A imagem que ilustra o post é uma cortesia do Banco de imagens Shutterstock.
17 comentários via Blogger
Dias online
Postagens
comentários
Oi Elaine,
ResponderExcluireu gosto da forma como você explica, o texto fica longo, mas é melhor pra entender.
Adorei! Obrigada por compartilhar seu conhecimento com a gente.
Beijos
Aiaiai vamos ver se consigo. Estava querendo isso. Atualizar a bio porque estou fazendo outras coisas e quero direcionar a bio informando.
ResponderExcluirObrigada!
Olá, tudo certo? Eu gostaria de saber como faço quando o blog é escrito por mais de uma pessoa. Agradeço!
ResponderExcluirTambé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É possível sim, tanto que uso aqui no blog.
ExcluirMas pede outro tutorial, farei assim que possível.
Estou na espera desse tutorial
ExcluirBeijos
Dayana e Miqole. o tutorial prometido:
ExcluirBox com mini bio e redes sociais para blogs com mais de um autor
Mais uma vez Obrigado meu Amor.. Ajudou pa Caramba!!!
ResponderExcluirElaine, como faço para alterar a cor da fonte ?
ResponderExcluirOi 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
ResponderExcluirSim, e nesse caso é ir colando o código em lugares diferentes e testando até ele ficar onde você deseja.
ExcluirNã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
OI Elaine! Adoro teus tutoriais tem me ajudado muito! Só tenho uma dúvida. Na busca do primeiro código surgiram 5 resultados. Qual deles eu escolho? Abraço
ResponderExcluirwww.papicher.com
Leone, tem que ir testando.
ExcluirEm geral é na segunda ocorrência, mas se seu template tiver sido mexido isso pode mudar. Vá colando em cada ocorrência e testando. Em geral, na segunda funciona, na primeira não aparece nada rsrsr
Oii, eu adorei o Blog! O Blogger fez algumas mudanças no site, e eu não consegui fazer...
ResponderExcluirRafaela, não houve mudança significativa desde a data da publicação do tutorial.
ExcluirExperimente de novo, talvez tenha esquecido algo, ou pulado algo...
Como faz para colocar os ícones das redes sociais no lado direito?
ResponderExcluirGabriela, tem que alterar o código css, mas eu não testei.
ExcluirExperimente alterar o trecho .authorsocial a{display:inline-block;text-align:center;margin-right:10px}
mudando o valor de margin-right
Mas tem que testar, não testei...