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
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:
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.
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;
}]]></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'><b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>
<b:includable id='main'><div class='followersbox'></b:includable>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.
