20/11/2014

Perfil Fofo no Blog

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 Roberta do Reino kawaii, para que usem (os créditos são de lá); é legal usá-lo no primeiro widget/gadget HTML/JavaScript, na sidebar. Esse será o resultado:





Welcome
Sejam bem-vindos ao Chiclete Funny! Eu sou Thereza e criei esse blog para compartilhar tutoriais para deixar tudo mais fofo, dicas, música, ilustrações..."Tudo que você Precisa está Aqui"! Não esqueça os Créditos. Você pode fazer um Pedido pra mim >.< Bejus!!
Cole o código abaixo em HTML/Javascript:
<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='#' 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>

<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>
-------------------

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, Bejus >.<

4 comentários:

  1. aff , esse tuto é do blog Reino kawaii
    Cadê os créditos?
    Plágio è crime sabiia ?? ;-;

    ResponderExcluir
    Respostas
    1. Já ouviu falar em crianças blogueiras e estamos começando a blogar? Obrigado,trouxa!

      Excluir
    2. Não sabe lê? Eu coloquei os créditos,aff..

      Excluir