Tutorial - Perfil do autor no Gadget + ícones de redes sociais

Não resisti em colocar a imagem do Gancho de Once Upon a Time

Hello People! Tudo bem? Eu sim! Bom, como eu havia dito antes, estarei postando aqui tutoriais para que vocês personalizem o blog de vocês para ficarem lindos!

Este tutorial eu encontrei no Reino Kawaii. Então os devidos créditos são deles. E estarei postando aqui como vocês deverão fazer para ficar com o perfil do autor no gadget, assim como o meu.

Clique em Leia mais para saber!

O resultado será este aqui:

Gostaram? Então veja os passos de como colocar isto no seu blog. Vá em Layout>Adicionar Gadget>HTML/JavaScript e cole o seguinte código:

style>

.otitulo {/* texto welcome */

color: #C0F6F6;/* cor do texto */

font-family: 'Rouge Script', cursive;/* tipo de fonte */

font-size: 55px;/* tamanho da fonte */

text-shadow: 1px 2px 3px #1CD4D5;/* sombra do texto */

text-align: center;/* centralizado */

padding: 40px;/* posiciona o texto */

}

.afoto {/* foto do perfil */

border-radius: 50% 50% 50% 50%;/* arredondar bordas */

max-width: 300px; /* largura maxima */

height: auto;/* altura */

}

.otexto {/* descricao */

color: #AAAAAA;/* cor do texto */

font-family: 'Delius Swash Caps', cursive;/* fonte */

font-size: 14px;/* tamanho da fonte */

text-align: justify;/* justificado */

width: 300px;/* largura */

padding: 8px;

background: white;/* plano de fundo */

border: 1px dashed #C0F6F6;/* borda */

}

</style>

<div class='otitulo'>SEU TÍTULO AQUI</div>

<center><img class='afoto' src='URL-DA-FOTO-DE-PERFIL'/></center>

<center>

<div class='otexto'>

SUA DESCRIÇÃO AQUI.

<center>

<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a>

<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a>

<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a></center></div></center>

O próprio código já está auto-explicativo. Se o seu perfil ficar saindo para fora do Gadget aumente a largura dele em: Modelo>Personalizar>Ajustar Larguras>Barra Lateral Direita.

Caso o título fique enorme demais, é só você diminuir o tamanho da letra em Font-size, e alterar a fonte, em font-family. 

Mas vocês devem ter reparado que eu não uso este título, não é mesmo? Eu uso o título do próprio Gadget. 

Se quiser tirar o título apague os seguintes códigos:

.otitulo {/* texto welcome */

color: #C0F6F6;/* cor do texto */

font-family: 'Rouge Script', cursive;/* tipo de fonte */

font-size: 55px;/* tamanho da fonte */

text-shadow: 1px 2px 3px #1CD4D5;/* sombra do texto */

text-align: center;/* centralizado */

padding: 40px;/* posiciona o texto */

}

E depois este:

<div class='otitulo'>SEU TÍTULO AQUI</div>

Para ver códigos de cores, vocês podem consultar este site AQUI, super recomendo. Uso ele sempre!

Se você quiser que apareça os ícones de Facebook, Google+, etc. Você deverá preencher os campos abaixo do "Sua descrição aqui".

Em nome do link, por exemplo você coloca o link do seu Facebook ou da sua página, e na URL da Imagem, você coloca o link do ícone que você quer que apareça.

Se você quiser mais redes sociais do que apenas três, repita o seguinte código abaixo dos outros:

<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a></center></div></center>

Caso você não queira que apareça as redes sociais, apague o seguinte código:

<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a>

<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a>

<a href='#' target='_blank' title='NOME DO LINK'><img border='0' src='URL-DA-IMAGEM'/></a></center></div></center>

E de brinde eu irei deixar aqui alguns ícones para vocês usarem no perfil de vocês! E não se esqueçam de comentar!