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 != ""'>
<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 PerfilA 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 != ""'>
<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 PerfilAgora 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 != ""'><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.
