19 maio 2016

Como hospedar imagens + Menu da Blogueira com redes sociais



Percebi que muita gente acha legal ter um perfil no blog com foto e descrição da própria blogueira, além das redes sociais. Então, resolvi fazer esse tutorial explicando pra vocês como fazê-lo, além de ensinar como hospedar facilmente uma imagem(que será utilizada para o seu perfil). Também decidi deixar freebies de ícones para as redes sociais de vocês lá no fim do post.

Se você não faz ideia de que perfil estou falando, é este aqui:


Então vamos lá!!!         


Primeiramente você precisa de uma imagem sua, obviamente. Depois você precisa hospedá-la, já que vamos trabalhar somente com códigos e links. Ou seja, sua imagem precisa virar um link.


Vá ao site do IMGUR, clicando aqui


Como mostra na imagem abaixo, vocês devem clicar em uma setinha logo no topo da página e depois, clicar na aba "Upload Images"


Após isso, abrirá uma janela com algumas opções de importação, vocês irão escolher a opção "browse your computer"



Vai abrir novamente mais uma janela, você vai procurar pela sua foto, selecionar e clicar em "Abrir"



Clique em "Start Upload"


Espere carregar a foto, clique nela com o botão direito e clique pra abrir em nova guia


Quando abrir, selecione o link da foto, copie e cole em algum lugar seguro como bloco de notas ou word pra guardá-lo, pois vamos utilizar ele


Bom, agora vamos volta pro blogger e ir na aba de Layout e criar um gadget na barra lateral


Escolha o gadget "HTML/JavaScript" e no conteúdo dele cole o seguinte código:




<center><img src="COLE AQUI O LINK DA SUA IMAGEM" style="width:310px; heigh:auto;" /><br />ESCREVA AQUI A SUA DESCRIÇÃO<br /><a href="LINK DO SEU FACEBOOK"><img src="LINK DO ÍCONE DO FACEBOOK"  width="35px"/></a>


<a href="LINK DO SEU TWITTER"><img src="LINK DO ÍCONE DO SEU TWITTER"  width="35px"/></a>


<a href="LINK DO SEU YOUTUBE"><img src="LINK DO ÍCONE DO SEU YOUTUBE"  width="35px"/></a>


<a href="LINK DO SEU INSTAGRAM"><img src="LINK DO ÍCONE DO SEU INSTAGREM"  width="35px"/></a>


<a href="LINK DO SEU G+"><img src="LINK DO ÍCONE DO SEU G+"  width="35px"/></a>


<a href="LINK DO SEU PINTREST"><img src="LINK DO ÍCONE DO SEU PINTREST"  width="35px"/></a>


<a href="LINK DO SEU WEHEARTIT"><img src="LINK DO ÍCONE DO SEU WEHEARTIT"  width="35px"/></a>


<a href="LINK DO SEU TUMBLR"><img src="LINK DO ÍCONE DO SEU TUMBLR"  width="35px"/></a>


</center>





Agora, é só você preencher o código de acordo com suas preferências. É a hora de pegar o link da sua imagem e colocar no lugar das letras em azul, escreva sua descrição no lugar das letras em vermelho e não se esqueça de colocar suas redes sociais de acordo como manda o código e depois, salve seu gadget. 

Vou deixar pra vocês alguns freebies de redes sociais pra vocês pegarem. 


AZUL


CINZA



LILÁS



VERDE





Espero que tenham gostado do post. Se tiverem alguma dúvida ou der erro podem comentar aqui que vou responder a todos com o maior prazer. Continuem acompanhando os tutoriais, porque ainda vai ter muito mais pela frente. Beijinhos!

7 comentários:

  1. Amei a dica isso me ajudou muito. Bjos

    ResponderExcluir
  2. Ebaaa consegui enfim, já havia tentado com varios outros blogs mas nenhum deixou tao simples e bem explicado como voce amei de verdade obrigadaaaaaaaaaaa

    ResponderExcluir
  3. Vou tentar fazer,se eu consegui te aviso!
    http://isaberenice.blogspot.com.br/

    ResponderExcluir
  4. Adorei a tuto, você sempre arrasa gata!


    Tô te esperando no meu blog, tá cheio de novidades, vem conferir! ♡
    http://docedezoitoblog.blogspot.com.br/

    ResponderExcluir
  5. Nossa sempre quis fazer isso no meu blog😍 ai que bom que você ensinou, amei.

    ResponderExcluir
  6. Finalmente consegui colocar os botões das minhas redes sociais!
    Obrigada pelo tutorial maravilhoso <3

    www.verifiqueapagina.com.br

    ResponderExcluir

Copyright © 2016 | Design e Código: Milena Motta Design | • voltar ao topo