Pular para o conteúdo principal

Personalizar o Widget dos Seguidores (CSS)

Guia Blogger - Dicas, Tutoriais e Templates
Não faz muito tempo que os Seguidores (Followers) está disponível no Blogger/blogspot .
Eu vi alguns tutoriais que ensinavam  a personalizar o widget (remover ou alterar alguns links como Acompanhar, Pare de Acompanhar e etc.
O código abaixo, personaliza as imagens do widget. Veja:
.follower a img {
opacity:0.5;filter:
alpha(Opacity=50);
border:3px solid #ffffff;
display:block;
}

.follower a img:hover {
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100);
border:3px solid #99cc00;
display:block;
}
Em que:
A parte em verde faz com que a imagem fique desbotada, e quando passar o mouse a sua cor volta ao normal. Eu recomendo que ela não seja modificada, se você preferir, apenas remova-a.
O trecho que está em vermelho, indica como será a borda da imagem normal. Onde, 3px indica a largura da borda, solid o tipo de borda, e #ffffff.
Esses valores podem ser modificados da seguinte maneira:
  • 3px pode ser alterado para qualquer valor maior que 0px;
  • Solid pode ser alterado para:
    1. none
      hidden
      dotted
      dashed
      solid
      double
      groove
      ridge
      inset
      outset
  • #ffffff indica a cor da borda (no caso branca), para ver mais cores clique < a href="http://downloadmediacenter.googlepages.com/tabeladecores.htm" target="_blank">AQUI
A outra parte do código que está em azul, indica como vai ficar a borda da imagem quando passar o mouse sobre ela. As modificações dessa parte podem ser feitas do mesmo jeito que você modificou a parte em vermelho.
Depois de modificar o código: vá para Layout > Editar HTML, faça um backup do seu template (clique em baixar modelo completo).
Guia Blogger - Dicas, Tutoriais e Templates

Cole o código antes de ]]></b:skin> (CTRL + F para procurar).
Salve.
Esse foi o primeiro tutorial sobre como personalizar o widget dos seguidores.
O segundo eu já estou preparando.
E, por enquanto é só!
Valeu!

Postagens mais visitadas deste blog

Mudar Imagem ao Passar o Mouse

A interatividade é o que muitas vezes (quando combinada com bom conteúdo) faz com que os leitores gostem e voltem a visitar o seu site. Nesse tutorial você aprende um código em JavaScript que altera a imagem quando o cursor do mouse passa sobre ela.

E-Referer - De onde vem seus visitantes?

O site E-Referer oferece uma ferramenta gratuita que mostra a origem dos visitantes do seu blog e a quantidade de visitas que lhe enviou.