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.

Artigos recentes

Linkem me:

Related Posts with Thumbnails
Google