Dicas Tech: Como colocar os seus Ícones das Redes Sociais pela Plataforma do WordPress
17/10/2013Olá Pessoal, tudo bem com vocês?
No meu primeiro post que eu fiz a dica foi de como colocar os ícones das redes sociais no blog da plataforma do Blogger (post aqui), hoje vamos aprender a colocar os ícones no blog da plataforma do WordPress. Os primeiros passos são os mesmos que do outro tutorial, o que vai mudar é no momento de inserir o código HTML no blog.
Para a Plataforma do WordPress:
1º Passo – escolher o ícone: como eu já havia explicado no tutorial anterior, você irá escolher a imagem do ícone das redes sociais em algum site de dowload de ícones. Eu uso o site Icon Archive, como eu já havia sitado no outro post, mas existem vários outros site sobre o assunto que você também pode utilizar.
2º Passo – Armazenar imagens no servidor web: Depois da escolha do ícone, você irá hospedar as imagens em um servidor online de armazenamento de fotos na internet. Como foi postado no primeiro tutorial, eu uso o Picasa Web do google, mas você pode utilizar o servidor que já está acostumado.
3º Passo – colocar os ícones no blog: a partir daqui muda o tutorial, no painel do WordPress você irá seguir os seguintes passos:
3.1 Acesse a opção Aparência, irá abrir algumas opções em baixo, clique em Widgets:
3.2 Irá aparecer varias widgets, você escolhe a opção Texto e irá puxar a janela até onde você quer que fique os ícones das redes sociais, na barra lateral ou no rodapé.
3.3 Depois de colocar o widget na posição que você deseja, ele irá abrir uma janela como na figura abaixo:
4º Passo – configurar o código HTML: agora você irá realizar a configuração das redes sociais, no campo onde está “Insira o código HTML aqui” 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>
Esse é o mesmo código HTML utilizado na plataforma Blogger, então a sequencia do tutorial volta a ser a mesma coisa que o outro post. Depois de inserir o código, você irá alterá-lo da seguinte maneira:
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á colocar 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. Mas antes verifique cada link se está direcionado corretamente para as 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 Six Revisions
Muito bom!!
Demorei muito até encontrar alguém que explicasse de um modo claro para iniciantes como eu…rss
Obrigada!!
obrigadaaaaaaaaaaa! suei pra encontrar um post eficaz sobre como colocar um icone das redes sociais no wordpress!
Deu super certo!
Como faco para deixar o icone menor?
Graziela,
Muito obrigada por este tutorial! Consegui aplicar em todos os botões que queria colocar no meu blog!
Parabéns!
Beijos
Oi Vera!!!!
Aproveite muito as dicas do CBB!
Beijos
Deu certo, porem a imagem está grande, qual codigo consigo reduzir?
Obrigada!!
Olá como faz no Blogger?