Modelo para Perfil

Oie...ter um gadget/widget de perfil ou boas vindas no seu blog é importante, como quando você se apresenta para alguém, em poucas palavras, pode ser dito muito a seu respeito, sobre seu blog, suas intenções, regras e onde podem te encontrar. Vou deixar um modelinho super simples aqui, feito por mim, para que usem; é legal usá-lo no primeiro widget/gadget HTML/JavaScript, na sidebar.
Esse será o resultado:

Welcome!


Avatar by JapanLover

Sejam bem-vindos ao Reino Kawaii! Eu sou Roberta e criei esse blog para compartilhar tutoriais para deixar tudo mais fofo, dicas de moda com inspiração em estilos japoneses, aplicativos legais, música, ilustrações, downloads...Espero que possamos ser amigos ;3


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><br/>
<center><img class='afoto' src='URL-DA-FOTO-DE-PERFIL'/></center><br/>
<center>
<div class='otexto'>
SUA DESCRIÇÃO AQUI.
<br/><center>
<a href='#' title='NOME DO LINK'><img src="URL-DA-IMAGEM-1" onmouseover="this.src='URL-DA-IMAGEM-2';" onmouseout="this.src='URL-DA-IMAGEM-1';"/></a><a href='#' title='NOME DO LINK'><img src="URL-DA-IMAGEM-1" onmouseover="this.src='URL-DA-IMAGEM-2';" onmouseout="this.src='URL-DA-IMAGEM-1';"/></a><a href='#' title='NOME DO LINK'><img src="URL-DA-IMAGEM-1" onmouseover="this.src='URL-DA-IMAGEM-2';" onmouseout="this.src='URL-DA-IMAGEM-1';"/></a><a href='#' title='NOME DO LINK'><img src="URL-DA-IMAGEM-1" onmouseover="this.src='URL-DA-IMAGEM-2';" onmouseout="this.src='URL-DA-IMAGEM-1';"/></a><br/>
<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>

Bom, onde está padding: 40px, você vai posicionar o título Welcome ou outro que preferir, mais para esquerda/direita, para cima/baixo...quando usei esse código, posicionei com margin no lugar de padding, assim: margin: -20px 0px -40px 0px; talvez você prefira usá-lo né...
As fontes que usei no código são Rouge Script e Delius Swash Caps, que postei aqui. A borda arredondada pode ganhar formas se você usar valores diferentes, exemplo, se usar border-radius: 0 50% 50% 50%; você obtém a borda estilo 'folha':


Em SEU TÍTULO AQUI, você insere seu nome, boas vindas...Mude todos "#" por links, no caso seria interessante que fossem de suas redes sociais; em NOME DO LINK, você coloca o nome da rede social/link, que aparece ao passar o mouse na imagem. O menu de redes sociais usa duas imagens, como mostrei nesse tutorial, leia-o e mude URL-DA-IMAGEM-1/URL-DA-IMAGEM-2/URL-DA-IMAGEM pelos links de imagem que preferir. E caso queira usar essas imagens do exemplo, baixe-as no Blog Black Cherry e no Deviantart.
É isso; espero que gostem :)  

6 Comments

  1. ichigo hime24 setembro

    Que lindo :3
    Seu blog tem tantos tutoriais úteis :~ Com certeza vou usar quando estiver reformulando meu blog ♥

    ResponderExcluir
    Respostas
    1. Roberta24 setembro

      Obrigada :3 Fiquei muito contente com sua visita ♥

      Excluir
  2. Mariana Meira19 setembro

    Queria diminuir para poder caber no layout chibi kawai. Mas, não to conseguindo. Tem como diminuir?

    ResponderExcluir
  3. Anônimo02 dezembro

    Roberta adorei o tutorial mais a imagem n aparece

    ResponderExcluir
    Respostas
    1. Roberta22 julho

      Aqui tá normal... Tente outra vez usar o link de sua imagem de perfil, talvez resolva ^^

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up