Tutorial: Perfil + Redes Sociais

Depois que fiz meu primeiro layout free, divulguei em alguns lugares... No grupo do Depois dos Quinze ganhei muitos elogios, e até algumas garotas já estão usando! Além disso, em um dos comentários, me perguntaram como eu fazia o perfil com links das redes sociais em icons. Como não vejo problema em dividir códigos com ninguém (meu problema é a explicação), resolvi fazer o primeiro tutorial aqui do blog!

Para ilustrar o que eu estou fazendo, irei utilizar nos exemplos o meu perfil!

O código:

<div class="separator" style="clear: both; text-align: center;"><img border="0" src="LINK DA IMAGEM AQUI" /></a></div>
<div style="text-align: center;"><span style="font-family: Georgia;">SEU PERFIL AQUI</span></div><div class="separator" style="clear: both; text-align: center;"><a href="mailto:SEU EMAIL"><img border="0" src="IMAGEM DO EMAIL" /></a><a href="LINK REDE SOCIAL"><img border="0" src="IMAGEM REDE SOCIAL" /></a></div>

O que está em Vermelho: Você coloca o link da sua imagem de perfil.
Ex:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_FVkl9iTcETjlUGrMZEy_xMs9lem6LX64Glc76Hq4hXVh2ehvC0JjAYFBXZmMS-jo_LR6mguiXciJDpF4ZwDCHZ4gYcNPeCDZb_TPZk4bSd8afcW_9x9-uWVBUPelK1aQmCmtKhppb3z6/s1600/sono.png

O que está em Itálico: É a fonte utilizada para a descrição do seu perfil, você pode altera-la.
Ex: Utilizei a Georgia.

O que está em Azul: Nesse local você escreve o seu "quem sou eu".
Ex: Maryana, 18 anos, blogueira...

O que está em Verde:
1. SEU EMAIL (você coloca o seu e-mail)
Ex: maryanasales@live.com

2. IMAGEM DO EMAIL (aqui é que vai o link do icon que você vai usar)
Ex:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx026lVfC3IPUu9OVhyphenhyphenq4SRiawv5MgM_DHt6EXawO2PlVlZP4swaDsoPJ6-gp8m6jvZjJmld6brSXHKexkW4Iwm-f6Zuf-oLlorK-umCWmGyDnbLaUmrgs7hfWeivBGM1DsLa5i74vwUjk/s1600/email.png

PS: Se você não quer um icon que redirecione o seu e-mail é só retirar essa parte do código:
<a href="mailto:SEU EMAIL"><img border="0" src="IMAGEM DO EMAIL" /></a>

 O que está em Rosa:
1. LINK DA REDE SOCIAL (você coloca o seu link de uma rede social)
Ex: https://www.facebook.com/maryanasales

2. IMAGEM REDE SOCIAL (você coloca o link do icon que você quer usar pra essa rede social)
Ex:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsZ2JlTZ1Huo5Pw6Ni9jzvqEZEv4Xkp93Tlp7lSUxsvx9IB6Yavy0Ma-1_5G50N7eM2zB0gmsovsNY7sYEETALQQaWjEJQA5viYliNqW94gSr3IV9qd2azQ_CbXXccL3I_lU1PuzIUzdLI/s1600/face.png

PS: Para colocar mais icons de outras redes sociais é só adicionar ANTES da última </div> esse código:
<a href="LINK REDE SOCIAL"><img border="0" src="IMAGEM REDE SOCIAL" /></a>

Exemplo do código do meu perfil com e-mail, facebook, twitter, tumblr e youtube:

<div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_FVkl9iTcETjlUGrMZEy_xMs9lem6LX64Glc76Hq4hXVh2ehvC0JjAYFBXZmMS-jo_LR6mguiXciJDpF4ZwDCHZ4gYcNPeCDZb_TPZk4bSd8afcW_9x9-uWVBUPelK1aQmCmtKhppb3z6/s1600/sono.png" /></a></div>
<div style="text-align: center;"><span style="font-family: Georgia;">Maryana, 18 anos, blogueira... </span></div><div class="separator" style="clear: both; text-align: center;"><a href="mailto:maryanasales@live.com"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx026lVfC3IPUu9OVhyphenhyphenq4SRiawv5MgM_DHt6EXawO2PlVlZP4swaDsoPJ6-gp8m6jvZjJmld6brSXHKexkW4Iwm-f6Zuf-oLlorK-umCWmGyDnbLaUmrgs7hfWeivBGM1DsLa5i74vwUjk/s1600/email.png" /></a><a href="https://www.facebook.com/maryanasales"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsZ2JlTZ1Huo5Pw6Ni9jzvqEZEv4Xkp93Tlp7lSUxsvx9IB6Yavy0Ma-1_5G50N7eM2zB0gmsovsNY7sYEETALQQaWjEJQA5viYliNqW94gSr3IV9qd2azQ_CbXXccL3I_lU1PuzIUzdLI/s1600/face.png" /></a><a href="https://twitter.com/maryanasales"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhueHQVciHpqtSx4_F8D4nQhrb6j5mk-0mYs6WdQkqG6nBqeuJcJ5JOnNtB8oXxQg-X-8GJE9FWcMCANWn_5zzMelg8Z4eLl5LgvISetNdmZYzLYKj2pTGAFJzrfwGafGqrdImcHCFGWk4H/s1600/twitter.png" /></a><a href="http://iniciodeinverno.tumblr.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkfxPFzRDbvTeJ6Rs1yN_M9gPLhgVgxAU9tix3Ew6no0_dVUTnT2pG7KZdic-qWDa0MU9aHqiNGxCB8APCbxnwfogs1TRUX5jpU0jLEvRA0TksXolYSThN3DfIcnbTtnFPFl6ZRiZjgpj6/s1600/picons45.png" /></a><a href="http://www.youtube.com/user/videosdamary/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVDtf1FpdlwCyQ1AD904PJmtt0OtIKB4iQ33-RCM_uL8e64AmBUzw8_5p3cxX__NNlo0_F4ErBnJGo8NaWJL8tfdWe7Tqc9sznE7EdA-EgOrOZghswVir0Sfalimr-8vXl-Z57sXQicwHx/s1600/yt.png" /></a></div>

Instalando:
Painel do Blogger > Layout > Adicionar um Gadget > HTML/JavaScript
No campo conteúdo, você adiciona o código completo.
Salve e posicione onde quiser no seu layout!

Dicas:
Para seu perfil ficar mais fofinho, edite a imagem antes de colocar. Uma ideia é colocar borda, ou transforma-la em "Polaroid".
Os icons que eu normalmente uso, encontro aqui.

Espero que entendam o tutorial, eu não sou muito boa com explicações! Qualquer dúvida deixe nos comentários ou no meu Ask.