Dica tech: Como colocar os seus Ícones das Redes Sociais pela Plataforma do Blogger
01/10/2013Oi 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
Obrigada, seu tutorial ajudou muito. Parabéns pelo trabalho!
Obrigada
Oie, eu nao estou conseguindo colocar as minhas redes sociais, ! Bom eu peguei um layout pronto dai eu so tinha que trocar os links mas da erro
Olá Juliana o problema de se trabalhar com Layout Free é que nem sempre os códigos HTMLs estão da mesma forma que um layout feito por partes. Então nesse caso dificulta a edição. No seu caso pode ser alguma coisinha que você está colocando errada por isso dá erro.
Olá Boa tarde!
Tenho blog com layout Free, ele já vem com os ícones de redes sociais mas não consigo colocar os links das minhas redes,por favor me ajuda ja estou com a cabeça explodindo de tanto tentar. http://blogchilli.blogspot.com.br/
Boa tarde Daniele, o problema de se usar layout free é que em alguns casos não permitem a alteração. E em outros os códigos HTML mudam, então pode ser que ele não aceite outros tipos de códigos. Nesse caso teria que estudar como está o código do seu layout para fazer a alteração. Pode ser que tenha que fazer a alteração dentro do corpo do blog e não em um arquivo de Gadgets.
Ola Graziela. Tudo bem? Estou tentando colocar os icones no meu blog, mas também não está funcionando. Será que você pode me mandar o link do novo codigo?
Obrigada.
Olá Gabriela, o código HTMl foi alterado, por isso não estava dando certo. O post já foi atualizado com o novo código.
Ainda assim nao estou conseguindo.
Coloco tudo como voce explica, mas na hora de visualizar no blog aparece como se fosse um arquivo cortado no meio.
Vc sabe o que pode ser?
Obrigada
Olá Gabriela, pelo que verifiquei no seu blog, está aparecendo correto duas redes sociais. Caso tem mais ícones para aparecer deve ser algum espaço que você deve ter colocado entre um código ou outro que não deixa aparecer as outras.
Vi pelos comentários que o código não é mais o mesmo, qual é o novo?
Olá Nayara. O post já foi atualizado com o novo código.
Não funcionou, não apareceu imagem nenhuma, posso lhe mandar o código html pra vc conferir?
Olá Priscila, utilize o código HTML conforme abaixo: