Barra de compartilhamento: Personalização
Autor: Tkoift | Publicado: 2011-01-14T09:36:00-03:00

[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&#234;s a personalizar a barra de algumas maneiras, utilizando CSS.  As personaliza&#231;&#245;es dessa postagem ser&#227;o basicamente relacionadas ao estilo da barra, relativamente simples.  Pronto para come&#231;ar? Vamos l&#225;!   Personaliza&#231;&#227;o 1: Barra na vertical  Para colocar a barra com os bot&#245;es/&#237;cones empilhados um em cima do outro, basta utilizar a barra logo antes de &lt;data:post.body/&gt; e colar esse c&#243;digo antes de &lt;/b:skin&gt;:  .sharebar{   width:110px; /* A largura da barra, em pixels */    float:left; /* A posi&#231;&#227;o da barra; left = esquerda e right = direita */    text-align:center; /* Alinha os bot&#245;es no centro */    }    .sharebar .sharebutton{    clear:both;    display:block;    margin:5px auto;    }  Visualize para ver se est&#225; tudo OK e salve o modelo.  Personaliza&#231;&#227;o 2: Barra com fundo (n&#227;o transparente) e borda  Essa personaliza&#231;&#227;o pode ser feita em qualquer modelo da barra. Cole isso antes de &lt;/b:skin&gt;:  .sharebar{   padding:5px; /* espa&#231;amento interno */    margin:5px; /* margens ao redor */    background:#CCCCCC; /* Cor de fundo */    border:1px solid #999999; /* Largura, tipo e cor da borda */    }  Personaliza&#231;&#227;o 3: Efeito mouseover na barra horizontal  Nesse efeito, os &#237;cones crescem ao passar o mouse por cima. S&#243; funciona com o modelo &#8220;&#205;cones Grandes&#8221; (modelo: icone, tamanho:grande) e n&#227;o funciona no Internet Explorer 6.  .sharebar{   margin:5px; /* Margem */    text-align:center; /* Alinhamento dos &#237;cones (left, right ou center)*/    line-height:61px; /* Altura da linha na barra, para os &#237;cones ficarem centralizados */    height:61px; /* Altura da barra */    }    .sharebar a{    margin:0;padding:0; /* Retirar todo espa&#231;amento dos bot&#245;es */    }    .sharebar .sharebutton{    margin:0 5px; /* Espa&#231;amento horizontal dos &#237;cones */    display:inline; /* Garante que as imagens fiquem alinhadas verticalmente */    width:25px; /* Largura do &#237;cone pequeno */    height:25px; /* Altura do &#237;cone pequeno */    padding:13px; /* Espa&#231;amento, para deixar os &#237;cones centralizados */    }    .sharebar .sharebutton:hover, .sharebar a:hover .sharebutton{    width:50px; /* largura do &#237;cone com o ponteiro do mouse em cima */    height:50px; /* altura do &#237;cone com o ponteiro do mouse em cima */    padding:0; /* Espa&#231;amento, para deixar os &#237;cones centralizados */    }  Personaliza&#231;&#227;o 4: Efeito mouseover na barra vertical  Como o anterior, ele s&#243; funciona com &#237;cones grandes e n&#227;o funciona no Internet Explorer 6 (os &#237;cones continuam pequenos):   .sharebar{   margin:5px; /* Margem */    text-align:center; /* Alinhamento dos &#237;cones, centralizados*/    line-height:61px; /* Altura da linha na barra, para os &#237;cones ficarem espa&#231;ados corretamente */    float: left; /* left ou right, onde voc&#234; quer que a barra fique. */    width:61px; /* Largura da barra */    }    .sharebar a{    margin:0;padding:0; /* Retirar todo espa&#231;amento dos bot&#245;es */    }    .sharebar .sharebutton{    margin:0; /* Espa&#231;amento 0 dos &#237;cones */    display:block; /* Garante que as imagens fiquem uma em cada linha*/    width:25px; /* Largura do &#237;cone pequeno */    height:25px; /* Altura do &#237;cone pequeno */    padding:13px; /* Espa&#231;amento, para deixar os &#237;cones centralizados */    }    .sharebar .sharebutton:hover, .sharebar a:hover .sharebutton{    width:50px; /* largura do &#237;cone com o ponteiro do mouse em cima */    height:50px; /* altura do &#237;cone com o ponteiro do mouse em cima */    padding:0; /* Espa&#231;amento, para deixar os &#237;cones centralizados */    }  Personaliza&#231;&#227;o 5: bot&#245;es em movimento ao passar o mouse  Nessa personaliza&#231;&#227;o, os &#237;cones apenas se elevam 5px com o ponteiro do mouse em cima deles.&#160; Dessa vez, funciona com qualquer modelo, mas continua n&#227;o funcionando no IE6.  .sharebar .sharebutton{   vertical-align:baseline; /* Faz com que os &#237;cones continuem parados quando um estiver mais acima*/    display:inline; /* Faz com que a linha acima funcione */    padding:5px; /* espa&#231;amento que ir&#225; aumentar quando o usu&#225;rio passar o mouse por cima */    }    .sharebar a:hover img{    padding:0px 5px 10px 5px; /* aumenta o espa&#231;amento abaixo e diminui acima: a&#237; est&#225; o nosso efeito */    }  Personaliza&#231;&#227;o 6: Fa&#231;a voc&#234; mesmo  Com o b&#225;sico de CSS, voc&#234; pode fazer modifica&#231;&#245;es simples na barra do seu blog.   Voc&#234; pode colocar ela para flutuar por fora do post e acompanhar o scroll do visitante ou apenas colocar seus &#237;cones alinhados &#224; esquerda, direita ou centralizados. Fa&#231;a como quiser e achar melhor para seu blog!