[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