terça-feira, 8 de outubro de 2013

Criando um Blog - Ícones de redes sociais

Oi gente, tudo bem.

Resolvi fazer esse post primeiro antes mesmo da apresentação, para que eu não acabasse me esquecendo das coisas que fiz.
Bom, comecei criando blog, aqui, pelo Blogger mesmo. Escolhi fundo, nome, cor dos textos. Ao ver o "esqueletinho" dele achei que estava muito pelado, não tinha nem os ícones para redes sociais, então fui buscar como fazer isso.
Achei em vários blogs como se fazia, mas as informações eram meio jogadas, então fiz um passo a passo bem rapidinho de como fazer isso, pelo sistema aqui do Blogger.


Passo a passo para inserir ícones de redes sociais no seu Blogger

1º Endereço da rede
Primeiro você vai precisar do seu endereço usuário na rede social necessária.
Por exemplo: https://twitter.com/_LouOliveira 

2º Endereço da figura do ícone
Você vai precisar também do endereço (URL) da figura que quer utilizar para ícone da sua rede social. Para isso, escolha uma figura, clique em cima dela com o botão direito do mouse e escolha "COPIAR LINK". Ao dar um "ctrl c" em algum lugar de texto você terá o URL da figura.
Outro modo clicar em cima da figura e, ainda segurando ela com o botão esquerdo do mouse pressionado, arrastá-la para a barra de endereço do seu navegador. Assim aparecerá só a figura e na barra de endereço o URL dela.
Você pode procurar a figura na internet ou em sites próprios. O que eu utilizei e indico é:

3º Adicionando
Na página de visualização  de seus blogs clique em "Layout"


 
A página será redirecionada para a área de configuração de Layout. No seu layout, escolha o espaço para adicionar gadget que preferir.




Ao selecionar, será aberta uma janela separada com as opções de gadget disponíveis. Você irá escolher a opção HTML/JavaScript.


Existem duas áreas disponíveis: a de título e a para inserir os códigos. A de título é opcional, no meu, por exemplo, eu não utilizei.

Na parte de inserir o código você deverá utilizar o seguinte procedimento. Para cada rede social você abrirá uma chave do tipo:

<a href="url do seu perfil"><img src="url da imagem" /></a>

sendo que no url do seu perfil você irá inserir o endereço do seu perfil (1º passo), e no url da imagem o endereço da figura (2ºpasso).
Se for colocar mais de uma rede é só ir separando uma da outra através de enter.
Caso queira que elas fiquem centralizadas no espaço disponível coloque <center> antes da primeira rede e </center> depois da última. No final você terá algo assim: 

<center><a href="https://twitter.com/_LouOliveira"><img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/03-twitter-32.png" /></a>
<a href="http://instagram.com/_louiseoliveira#"><img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/78-instagram-32.png" /></a>
<a href="http://www.pinterest.com/oliveiralou/"><img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/33-pinterest-32.png" /></a><center/>





(Exemplo das minhas próprias configurações)

Após isso é só confirmar e visualizar sua página.


Em caso de dúvidas deixe seu comentário.
Até mais.

Nenhum comentário:

Postar um comentário