ttnovo: Perfil do Autor no Gadget

março 07, 2015 Por Géssica Marques 0 Comentários

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!