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á! Gostaria de colocar o baner do CB BLOGUERS no meu blog , mas nao sei onde posso pegar HTML. Pode me dizer?
Obrigada, bjs!
Oi Zenaide,
Aqui vai o link: https://www.cbblogers.com/selinho-do-cbblogers/
Abraços, Michael
Olá, quando eu coloco o código, depois de pronto, quando clico no ícone, o link leva ao endereço do meu blog / o link da rede social… tem como resolver?
Olá Lucas, no lugar do link da Rede social, você deve ter cadastrado o link do seu blog, por isso está ocorrendo esse erro. Veja o exemplo de como ficou o código com os dados do meu blog pessoal:
Pra resolver esse problema é só colocar o “https://WWW” antes do endereço da rede social.
Bjinhos!! jessicapeck.com.br
OI Grazi, que pode me ajudar? Estou tentando fazer do jeitinho que você postou mas não estou conseguindo. Se poder, entre na minha página, acredito que na hora da figura que está saindo alguma coisa errada. Fico no aguardo. Muito obrigada.
Olá Eva, verifiquei a sua pagina e pelo modo como está aparecendo as redes sociais, é alguma coisa que você sem querer acrescentou no código HTML. Verifique cada parte do código para ver se não tem nenhum carácter errado, pois uma virgula fora do lugar muda tudo. Outra coisa, verifique também as imagens se você hospedou de forma correta em um servido online, porque não adianta copiar somente o URL de uma imagem da Internet que não vai dar certo. Depois de verificar esses dois detalhes e o problema persistir me avise para que possamos achar o problema e solucionar.
Olá Fanny, fazer para você eu não posso, mas vou te ajudar a solucionar o caso. Me envie as imagens dos ícones que você está usando e um print da tela onde está o código de HTML para que eu possa verificar.
Meu e-mail é intensymodas@gmail.com
Grazi
A imagem do ícone não aparece o que eu faço?
Olá Fanny, verifiquei no seu blog e pelo jeito pode ser algum problema na sua configuração ou na imagem escolhida, verifique os três passos abaixo:
1º verifique se você hospedou as imagens no servidor web, e utilizou o URL da Imagem e não a imagem salva somente no seu computador.
2º pode ser algum erro no código de HTML, então analise o código HTML e verifique se está igual ao do tutorial
3º ou a imagem do ícone escolhida não está mais disponível.
Verifique as três opções, se o problema persistir me avise que estarei verificando junto com você para solucionarmos.
Bjo
Eu não consegui, será que se eu mandar minhas informações por e-mail pra você você faz pra mim? Eu não vejo problema nisso é que eu não estou conseguindo mesmo, se sim manda seu e-mail na resposta, beijos.
Olá!
Boa noite!
Já faz um tempão que tento colocar as redes sociais uma ao lado da outra e nunca consigo, pois na hora que clico o ícone não corresponde a rede social.. Então sempre coloco uma em cima da outra.. Gostaria de saber se pode me ajudar?
Desde já obrigada!Ah esse post foi perfeito!!
Olá Lolla, claro que posso te ajudar sim.
Entrei no seu blog, e pelo que verifiquei a imagem que vocês escolheu já vem junto com o nome da rede social, estou certa? Me confirme isso por gentileza.
Se a imagem do ícone já vier com o nome da rede social, realmente não vão ficar uma do lado da outra, pelo simples fato de ser uma imagem larga. E mesmo se você diminuir a imagem, irá ficar desproporcional pois a figura que você escolheu é para ficar no formato que está, uma embaixo da outra.
Caso queira que fique no formato como está aqui na pagina do CBBlogers (uma do lado da outra), é necessário que você escolha um ícone que tenha somente o logo da rede social, sem o nome, ai sim você irá conseguir colocar um do lado do outro.
Att
Grazi