terça-feira, 6 de janeiro de 2009

Como personalizar o widget dos seguidores

Update 01/03/2009: Com a integração dos Seguidores com o Google Friend Connect, esse hack não mais funciona. Vamos aguardar as novidades!

Há muito tempo eu queria personalizar o widget dos Seguidores do Blogger, colocando uma cor no background e talvez uma borda. Observando o código no template, tentei usar uma das class mas ela acabava alterando as propriedades dos thumbnails. Não há uma class ou id referente a toda caixa.
O autor do blog The Technical Thought Of You, entretanto, criou um código nesta página para personalizar o widget.

O código disponibilizado cria várias "class" que alteram os links, as imagens e é claro, o que eu queria, a aparência do widget. Analisando o hack, percebi que é só criar uma div com uma class diferente e depois no css, colocar os atributos que eu queria, tais como o background, border, padding e marging. Assim nasceu em minha mente a class "followerbox"!

Portanto, aqui vai o tutorial como eu fiz:

a) Antes de tudo, faça um backup de seu template!

b) O código css abaixo
.followersbox {
background: #eee ;
padding: 10px;
margin: 3px;
border: 1px solid #ff6600;
}
deve ser colocado antes de
]]></b:skin>

Explicando:

background: #eee; =>> Aqui eu defino a cor do fundo da caixa
padding: 10px; =>> A padding deve ser ajustada conforme as medidas de seu blog
margin: 3px; =>> A marging deve ser ajustada conforme as medidas de seu blog
border: 1px solid #ff6600; =>> Aqui defino a grossura, o tipo e a cor da borda que vai envolver a caixa


c) Marque expandir o modelo de widgets em Lay-out>>Editar HTML e localize essa linha:
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>
<b:includable id='main'>
d) Acrescente a div que está em negrito:
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>
<b:includable id='main'><div class='followersbox'>
e) Localize o final do código e antes de
</b:includable>
colocar </div>

Pronto! O widget dos seguidores está personalizado:


As alterações que fiz bastam para mim, caso queiram alterar por completo o widget, recomendo que siga o tutorial do The Technical Thought Of You na íntegra.

10 comentários:

  1. ah maqs isso é simples, axu que nem precisava de tuto

    ahahahha

    bom para que esta no inicio talvez :s


    flws

    ResponderExcluir
  2. Cidão, eu retirei o número de seguidores acima, porque repete embaixo! Desnecessário isso, não?

    ResponderExcluir
  3. Olá,

    Tentei mas não deu certo,não entendi onde coloco o tal css (desculpa, mas faço na marra, pois não entendo nada do assunto e vai tudo na base da tentativa e erros). Agradeço a ajuda,
    abraço, Liete

    ResponderExcluir
  4. Liete: No post eu dou a localização. Faça control+F e procure o código que mencionei. Ultimamente, os seguidores estão dando problemas de visualização nos navegadores. É melhor esperer um pouco para ver se o pessoal do Blogger conserte os bugs.

    ResponderExcluir
  5. Achei que aqui teria muito mais que isso!
    mas o que vale é a intenção!

    ResponderExcluir
  6. baixartempalates.com: Este post foi escrito no ano passado com direcionamento às pessoas que não possuem um conhecimento mais sólido de CSS.

    ResponderExcluir

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Artigos recentes

Related Posts with Thumbnails
Google