Personalizando o gadget Perfil

Nos templates do Blogger o gadget  Perfil se apresenta da seguinte maneira:

 Se clicarmos na imagem escolhida ou no link Visualizar meu perfil completo, somos levados à página padrão do Blogger para o perfil do usuário:

Podemos alterar o gadget do Perfil não só em sua aparência, mudando fontes, cores e colocando uma imagem diferente da que está gravada no perfil, como podemos ainda criar uma nova direção para ele, por exemplo, para uma página do próprio blog, onde podemos apresentar um perfil mais completo.

Perfil único autor - trocando a imagem

É possível exibir no blog uma imagem diferente da imagem escolhida para a página Perfil e isto se torna bastante interessante quando se tem vários blogs e se deseja empregar uma imagem diferente para cada um deles.
Hospede a imagem escolhida no site de sua preferência (eu uso o TinyPic) copie a url fornecida (Direct Link for Layouts), depois vá em Editar HTML e clique em Expandir Modelo de Widget. Óbviamente você já deve ter acrescentado em sua página o gadget Perfil. Procure por este trecho do código (tecle Ctrl + F para encontrar com maior facilidade):

<b:if cond='data:photo.url != &quot;&quot;'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if>

Apague o que está em vermelho e no lugar de data:photo.url  cole a url da imagem que você hospedou. Visualize e se estiver aparecendo a nova imagem, salve.

Para alterar o destino do link e imagem do gadget Perfil

A página do perfil do Blogger não é lá muito charmosa, por isso, você pode criar um post bem caprichado falando de você, seu trabalho, o que for, e fazer com que o gadget Perfil leve o leitor até este post. Primeiro crie o texto falando sobre você e antes de publicar, clique no link Opções de Postagens e programe uma data no passado, para que o post não apareça na primeira página do blog, como mostra a imagem abaixo:

Publique seu post, vá até a página Editar Postagens e você verá uma lista com todos os seus posts publicados. Ao lado de cada post existem dois links: Editar e Visualizar. Clique com o botão direito do mouse sobre Visualizar ao lado do post que corresponde ao seu perfil e copie a url do mesmo (isto seve inclusive para colocar o link de um post no menu horizontal - muita gente me pergunta isso!), como mostra a imagem abaixo:

Volta a página Editar HTML, clique em Expandir Modelo de Widget e torne a encontrar aquele trecho do código:

<b:if cond='data:photo.url != &quot;&quot;'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if>

Apague o que está em vermelho e no lugar de data:userUrl cole o link do seu post, que você copiou na página Editar Postagens. Isso fará com que a imagem leve ao texto.

Para que o link Visualizar meu Perfil Completo leve ao post que você criou, procure mais abaixo o trecho:

<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>

Novamente apague o que está em vermelho e no lugar de data:userUrl coloque o link do seu post. Para mudar a mensagem Visualizar meu perfil completo por qualquer outra chamada, apague o que está em verde e coloque no lugar outra frase/palavra.

Para alterar o estilo do gadget Perfil

Agora que alteramos a imagem e a direção do link  do Perfil, podemos alterar também o estilo que ele apresenta. Para isso, procure no código o seguinte trecho do CSS:

/* Profile
----------------------------------------------- */
.profile-img {
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  padding: 4px;
  border: 1px solid $bordercolor;
}

.profile-data {
  margin:0;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  color: $sidebarcolor;
  font-weight: bold;
  line-height: 1.6em;
}

.profile-datablock {
  margin:.5em 0 .5em;
}

.profile-textblock {
  margin: 0.5em 0;
  line-height: 1.6em;
}

.profile-link {
  font: $postfooterfont;
  text-transform: uppercase;
  letter-spacing: .1em;
}

Em .profile-img podemos fazer todas as alterações na imagem do gadget, inclusive alterar o tamanho e a largura do mesmo. Antes de alterar o tamanho da imagem, certifique-se da largura da sua sidebar e de qualquer alteração em .sidebar .widget (se o seu template conter esta especificação). Como estou usando um template Mínima para meu exemplo, o que fiz foi alterar a largura de #outer-wrapper para 960px e a largura da sidebar para 280px, possibilitando os valores para a imagem, que coloquei como segue abaixo:

.profile-img {
  float: $startSide;
  margin: 13px;
  padding: 2px;
  width: 240px;
  height: 220px;
  border: 5px solid #9EAF65}


Em .profile-data eu posso fazer alterações no estilo para o meu nome e a localização informada no gadget (São Paulo, Brazil). Aqui você pode altarar o estilo e cor da fonte.

Em .profile-datablock está contida a imagem e o texto que a acompanha. Você pode determinar aqui uma cor ou imagem para o background, ou borda, por exemplo.

Em .profile-textblock acrescente os estilos para o texto que se apresenta, alterando a cor da fonte, tamanho, etc.

Em .profile-link você acrescenta os estilos para o link Visualizar meu perfil completo. Para ter mais liberdade de modificar os estilos para este link (como posicionar ao centro ou dentro de .profile-textblock, volte ao trecho que modificamos anteriormente:

<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>

substitua todo este trecho por:

<div class="profile-link">
<a href="url do post com o perfil">Meu Perfil Completo</a></div>

Para colocar o link dentro da área de .profile block (pois se você acrescentar um background o link ficará fora dele), recorte este trecho e cole onde se apresenta:

<b:if cond='data:aboutme != &quot;&quot;'><dd class='profile-textblock'> <data:aboutme/></dd></b:if>

<div class='profile-link'><a href='http://templatebasic.blogspot.com/2009/06/quem-sou.html'>Meu Perfil Completo</a></div>

</dl>    
</b:if>

No meu exemplo eu alterei todo o código desta maneira:

/* Profile
----------------------------------------------- */
.profile-img {
  float: $startSide;
  margin: 13px;
  padding: 2px;
  width: 240px;
  height: 220px;
  border: 5px solid #DEDCC5}

.profile-data {
  margin:0;
  text-transform:capitalize;
  letter-spacing:0;
  font-size:13px;
  color: #262B15;
  font-weight: bold;
  line-height: 1.6em;
  text-align:center;
}

.profile-datablock {
  margin:10px auto 10px;
  background: #84875a;
  border: 5px solid #DEDCC5

}

.profile-textblock {
  margin: 0 0 0;
  padding: 6px 10px;
  line-height: 1.4em;
  color: #F4F3EC
}

.profile-link {
  font-size: 13px;
  text-transform: capitalize;
  text-align:center;
  padding: 4px 0px;
  letter-spacing: 0;
  color: #fff;
}

.profile link a:link, .profile-link a:visited{color: #fff}
.profile link a:hover{color: #820000; text-decoration:none}

E o resultado foi este :

Uma outra idéia, usando um background fixo:

Agora é com a criatividade de cada um :)

No próximo tutorial explicarei como dar estilo ao gadget quando há mais de um autor no blog.