Dica tech: Como colocar os seus Ícones das Redes Sociais pela Plataforma do Blogger
01/10/2013
Oi pessoal, tudo bom??
Aqui é Grazi do Blog Intensy Modas, e hoje eu trago até vocês uma dica de como colocar ícones das redes sociais no blog da plataforma do Blogger. Todos nós sabemos o quanto é importante os ícones das redes sociais, esse assunto até já foi abordado aqui no CBBlogers algumas vezes, mas acredito que muitos de nós, blogueiras e blogueiros, ainda tem algumas dúvidas sobre como colocá-los.
Então eu preparei um passo-a-passo bem simples, que pode lhe ajudar (e muito) a atrair mais pessoas até as suas redes sociais.
Para a Plataforma do Blogger:
1º Passo – escolher o ícone: você irá acessar o site Icon Archive (http://www.iconarchive.com/category/social-network-icons.html), escolher o ícone das redes sociais que você quer e irá salvar no seu computador. Lembrando que existem vários sites aonde você pode fazer o download dos ícones.
2º Passo – Armazenar imagens no servidor web: você irá hospedar as imagens dos ícones em um servidor online de armazenamento de fotos na internet. Eu utilizo o Picasa Web do Google, mas caso esteja acostumado com algum outro servidor, pode utilizá-lo.
3º passo – colocar os ícones no blog: No painel do Blogger você irá seguir as regras:
- 1ª Acessar a opção Layout,
- 2ª Clicar na opção adicionar Gadget – conforme a imagem abaixo.
- 3ª Quando aparecer a janela com as opções de Gadgets, você irá escolher a opção HTML, demonstração na imagem abaixo.
- 4º Depois de escolher a opção HTML irá aparecer a janela para realizar a configuração, no campo conteúdo você irá colar o código abaixo:
<a href="URL DO FACEBOOK"><img border="0" src="URL da IMAGEM" /></a> <a href="URL do TWITTER"><img border="0" src="URL da IMAGEM" /></a> <a href="URL do PINTEREST"><img border="0" src="URL da IMAGEM" /></a> <a href="URL do GOOGLE+"><img border="0" src="URL da IMAGEM" /></a> <a href="URL do YOUTUBE"><img border="0" src="URL da IMAGEM"/></a>
Acredito que até aqui não houve complicações, agora iremos alterar o código para que apareça as suas redes sociais. Só será alterado os campos que estão em negrito, inserindo o link das suas redes sociais nos campo URL DO YOUTUBE por exemplo.
No campo URL DA IMAGE, você irá colar o link de onde a imagem foi salva no servidor web.
Caso queira colocar outras redes sociais é só acrescentar mais um campo do código abaixo, antes do </a>
<a href="URL do YOUTUBE"><img border="0" src="URL da IMAGEM"/></a>
No final é só salvar que a suas redes já estarão disponíveis no seu blog para que os seus leitores possam acessar e segui-las.
Por favor, tenha certeza de acessá-las para se certificar de que o link está direcionado corretamente às suas redes sociais.
Se alguém tiver alguma duvida ou dificuldade, é só deixar nos comentários que eu estarei ajudando.
Um Super Beijo,
CBBlogers by Gra
E não se esqueça de passar no Blog Intensy Modas e também segui-la aqui no CBBlogers.
Facebook / Twitter / Pinterest / Instagram
*imagem via iconarchive
Olá, um ótimo post. Está me ajudando muito.
Porém eu gostaria de colocar os ícones todos numa linha e que ocupassem a largura total dessa linha.
Será que você pode me ajudar?
Eu tentei setar via html mesmo, um tamanho (altura e largura) para eles, mas não fica bom.
Queria realmente que eles ocupassem todo o espaço disponível na linha.
Muito obrigada.
Olá Marcela, nesse caso você precisa utilizar as imagens dos icones do tamanho desejado. Pois alterar o tamanho da imagem pelo HTML as vezes não fica bom.
Olá, tudo bem?
Deu certo, quando clico nas imagens, redireciona pra página escolhida. O único problema é que os desenhos das redes sociais não aparecem :(. Você poderia dar uma ollhada ? Obrigado desde já.
http://www.thedayinthelifeblog.blogspot.com.br/
Olá Maike, vc hospedou a imagem no Dropbox, sempre que alguém hospeda a imagem desses tutoriais no Dropbox não dá certo, eu mesma nunca usei o Dropbox para fazer esse tipo de hospedagem. Pode ser que o erro esteja ai, tente fazer com o drive do Google o Picasa (https://picasaweb.google.com/home) para ver se da certo. Caso o erro persistir deve ser algum problema com a imagem que você está hospedando.
Olá,gostaria de agradecer pelo conteúdo produzido e dizer que ele é de grande utilidade, é simples e de fácil entendimento. Muito obrigada!
Deu tudo muito certo!
Obrigada Ingrid. Bjo
Eu gostei bastante!Obrigada por ajudar!Bjoss
Talvez seja por causa do tamanho do teu blog.O meu também ficou um pouco grande.Mas vou deixar mesmo assim.Bjoss
Aqui fazemos tudo de coração!
Beijos Viviane!
Grazi, Boa Tarde!
Consegui fazer do jeitinho que você falou… Apenas uma coisa ficou um pouco diferente, o ícone que eu hospedei era pequeno e quando eu passei para o meu blog ele ficou em tamanho maior, você sabe o que pode ter acontecido?! Beijão
Talvez seja por causa do tamanho do teu blog.O meu também ficou um pouco grande.Mas vou deixar mesmo assim.Bjoss
Olá Viviani, a imagem precisa ser exatamente no tamanho que se encaixa no seu blog, por exemplo da no meu blog eu uso o tamanho de cada ícone de 60px por 60px. Pode ser que na hora que vc baixou a imagem ela parecia estar pequena e quando exportou ela ficou no tamanho original.
Olá,
Eu fiz do jeito que você disse, mas pra mim, a imagem aparece, mas quando tento clicar em cima, ele não direciona pra lugar nenhum. O link tá certo, como eu faço?
Olá Andressa, você precisa confirma se o link do seu perfil está correto. Verifique também se há espaço entre as “”, pois não pode ter espaço nenhum, se não dá errado o código.