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
Segui todas as dicas e foi perfeito! Obrigada e parabéns pelo blog! Ah, aproveite e faça uma visitinha! Bjs
Que bom que deu certo Jana.
Obrigada
Muito bom!! Me ajudou muuito, OBRIGADA!
Acessem: http://www.lorraineviana.com.br
Olá Lorraine, que bom que deu certo!
Bjo
Olá.. Estou montando um blog e acompanhei toda sua explicação sobre link das redes sociais.. Porém, o meu não fica um do lado do outro, apenas acima. Como faço?
Outra dúvida é de como fazer na configuração que o leitor clique no ícone da rede social e abra em outra janela..
Desde já agradeço.
http://leoricardoonline.blogspot.com.br/
Olá Leonardo, esse tutorial é para os ícones ficarem um do lado do outro. Se você estiver usando um layout free pode ser por esse motivo que ele está mudando o código.
Com relação a configuração para que o link abra em outra janela, me envie um e-mail graziela@cbblogers.com com a duvida, assim eu poderei te ajudar, pois será necessário incluir um código e se eu colocar aqui nos comentário não irá aparecer para você ver.
Me ajudou bastante a organizar melhor as minhas redes sociais no blog. Obrigado. agradeço se puder conhecer meu blog tbm.
Quem bom que ajudou Eryk!
Olá Brenda, sempre que faço esses tutoriais que precisa que a imagem seja hospedada, eu utilizo o Picasa Web (https://picasaweb.google.com/home) ou o tinypic (http://pt-br.tinypic.com). Nunca fiz com imagens salva em galeria ou armazenadas em nuvens como Dropbox. Veja nesse tutorial como armazenar as imagens no Picasa web https://www.cbblogers.com/2014/01/picasaweb-como-hospedar-e-utilizar-url-de-imagem/.
Oi Grazi, eu já salvei no Picasa deu na mesma. O que faço??
Deve ser alguma coisa no código que vc está usando. Pois uma virgula fora do lugar em código HTML não dá certo. Eu entrei no seu blog e as imagens de rede social estão aparecendo normal. Verifique o código e se o problema persistir me enviei um e-mail para que eu possa te ajudar, meu e-mail é graziela@cbblogers.com
Olá, fiz tudo conforme foi dito, mas a imagem que coloquei não aparece.
Salvei as imagens na galeria do google+.
Olá Brenda, sempre que faço esses tutoriais que precisa que a imagem seja hospedada, eu utilizo o Picasa Web (https://picasaweb.google.com/home) ou o tinypic (http://pt-br.tinypic.com). Nunca fiz com imagens salva em galeria ou armazenadas em nuvens como Dropbox. Veja nesse tutorial como armazenar as imagens no Picasa web https://www.cbblogers.com/2014/01/picasaweb-como-hospedar-e-utilizar-url-de-imagem/.