Barra de compartilhamento: Personalização

[Compartilhe seus artigos no Twitter, Facebook, Buzz e Orkut!]

No dia 11 de janeiro, foi postada nesse blog a Barra de compartilhamento Twitter, Facebook, Orkut e Buzz. Como prometido, vou ensinar vocês a personalizar a barra de algumas maneiras, utilizando CSS.

As personalizações dessa postagem serão basicamente relacionadas ao estilo da barra, relativamente simples.

Pronto para começar? Vamos lá!

Personalização 1: Barra na vertical

Para colocar a barra com os botões/ícones empilhados um em cima do outro, basta utilizar a barra logo antes de <data:post.body/> e colar esse código antes de </b:skin>:

.sharebar{
width:110px; /* A largura da barra, em pixels */
float:left; /* A posição da barra; left = esquerda e right = direita */
text-align:center; /* Alinha os botões no centro */
}
.sharebar .sharebutton{
clear:both;
display:block;
margin:5px auto;
}

Visualize para ver se está tudo OK e salve o modelo.

Personalização 2: Barra com fundo (não transparente) e borda

Essa personalização pode ser feita em qualquer modelo da barra. Cole isso antes de </b:skin>:

.sharebar{
padding:5px; /* espaçamento interno */
margin:5px; /* margens ao redor */
background:#CCCCCC; /* Cor de fundo */
border:1px solid #999999; /* Largura, tipo e cor da borda */
}

Personalização 3: Efeito mouseover na barra horizontal

Nesse efeito, os ícones crescem ao passar o mouse por cima. Só funciona com o modelo “Ícones Grandes” (modelo: icone, tamanho:grande) e não funciona no Internet Explorer 6.

.sharebar{
margin:5px; /* Margem */
text-align:center; /* Alinhamento dos ícones (left, right ou center)*/
line-height:61px; /* Altura da linha na barra, para os ícones ficarem centralizados */
height:61px; /* Altura da barra */
}
.sharebar a{
margin:0;padding:0; /* Retirar todo espaçamento dos botões */
}
.sharebar .sharebutton{
margin:0 5px; /* Espaçamento horizontal dos ícones */
display:inline; /* Garante que as imagens fiquem alinhadas verticalmente */
width:25px; /* Largura do ícone pequeno */
height:25px; /* Altura do ícone pequeno */
padding:13px; /* Espaçamento, para deixar os ícones centralizados */
}
.sharebar .sharebutton:hover, .sharebar a:hover .sharebutton{
width:50px; /* largura do ícone com o ponteiro do mouse em cima */
height:50px; /* altura do ícone com o ponteiro do mouse em cima */
padding:0; /* Espaçamento, para deixar os ícones centralizados */
}

Personalização 4: Efeito mouseover na barra vertical

Como o anterior, ele só funciona com ícones grandes e não funciona no Internet Explorer 6 (os ícones continuam pequenos):

.sharebar{
margin:5px; /* Margem */
text-align:center; /* Alinhamento dos ícones, centralizados*/
line-height:61px; /* Altura da linha na barra, para os ícones ficarem espaçados corretamente */
float: left; /* left ou right, onde você quer que a barra fique. */
width:61px; /* Largura da barra */
}
.sharebar a{
margin:0;padding:0; /* Retirar todo espaçamento dos botões */
}
.sharebar .sharebutton{
margin:0; /* Espaçamento 0 dos ícones */
display:block; /* Garante que as imagens fiquem uma em cada linha*/
width:25px; /* Largura do ícone pequeno */
height:25px; /* Altura do ícone pequeno */
padding:13px; /* Espaçamento, para deixar os ícones centralizados */
}
.sharebar .sharebutton:hover, .sharebar a:hover .sharebutton{
width:50px; /* largura do ícone com o ponteiro do mouse em cima */
height:50px; /* altura do ícone com o ponteiro do mouse em cima */
padding:0; /* Espaçamento, para deixar os ícones centralizados */
}

Personalização 5: botões em movimento ao passar o mouse

Nessa personalização, os ícones apenas se elevam 5px com o ponteiro do mouse em cima deles.  Dessa vez, funciona com qualquer modelo, mas continua não funcionando no IE6.

.sharebar .sharebutton{
vertical-align:baseline; /* Faz com que os ícones continuem parados quando um estiver mais acima*/
display:inline; /* Faz com que a linha acima funcione */
padding:5px; /* espaçamento que irá aumentar quando o usuário passar o mouse por cima */
}
.sharebar a:hover img{
padding:0px 5px 10px 5px; /* aumenta o espaçamento abaixo e diminui acima: aí está o nosso efeito */
}

Personalização 6: Faça você mesmo

Com o básico de CSS, você pode fazer modificações simples na barra do seu blog.

Você pode colocar ela para flutuar por fora do post e acompanhar o scroll do visitante ou apenas colocar seus ícones alinhados à esquerda, direita ou centralizados. Faça como quiser e achar melhor para seu blog!