O BlogBlogs comemora a sua virada para a nova versão do site, juntamente com a virada do ano para 2009, com um concurso cultural: a Virada Premiada BlogBlogs. Para participar é muito fácil:

1. Faça o seu cadastro no BlogBlogs, se já não é usuário, e adicione seus blogs. Lembre-se de categorizá-lo corretamente;
2. Instale em seu(s) blog(s) o nosso widget Últimos Leitores, clicando aqui para gerar o código;
3. Crie um layout personalizado para o seu widget;
4. Envie-nos um e-mail para o endereço viradapremiada@blogblogs.com.br com seus dados (Nome, e-mail, Nome do Blog, URL do Blog) e aguarde a confirmação de sua participação.

Você pode ficar sabendo mais detalhadamente nesse post ou lendo o regulamento.

A premição é a seguinte:

• Primeiro Colocado: Leva um MacBook;
• Segundo e Terceiro Colocados: Levam um Acer AspireOne, cada;
• Quarto ao Décimo Colocados: Faturam um iPod Nano 8GB, cada.

Você tem até às 23hrs e 59 minutos para concorrer. Confesso que é uma bela ajuda para quem está precisando de um notebook, ou até para quem sempre quis ter um iPod. Se algum designer ganhar o MacBook, poxa! Que sorte! Já li em fóruns discussões sobre o Mac ser a melhor escolha para um designer, mas quem tem dinheiro pra comprar um hoje, hein? Eu pelo menos não. Sempre quis adquirir experiência em Macs e quem ganhar essa promoção bem que poderia fazer um vídeo mostrando ou até fazendo um depoimento depois de iniciado os trabalhos na máquina.

Daí alguém pode dizer:

Deixa de ser burro, Barba, tu vai ensinar a customizar o widget! É o mesmo que entregar o ouro pra quem ainda não está inscrito e ainda pode vencer. Assim tu não garante nem o décimo colocado.

Mas eu já me acostumei a não ganhar promoções desde que… desde sempre. Então vamos ao que interessa, o widget. Não dá pra eu ficar ensinando aqui o passo a passo de tudo, o que eu posso é falar sobre o meu widget. Vamos começar pelos avatares. Eu não usei nenhum elemento extra ao redor do widget, vi alguns blogueiros fazendo, como não sabia se era dentro das regras, optei por não usar. Então tudo que foi customizado está dentro do Css do Blogblogs.

O Css padrão customizado pelo Compulsivo é o seguinte:

<style type=”text/css”>
.bbw_control{font-size:70%}
.bbw_control img{display: none;}
.bbw_title,.bbw_icons,.bbw_buttons,.bbw_subtitle,.bbw_footer{display: none;}
#bbw_readers {width:285px;}#bbw_readers img{border:1px solid #000000;margin: 1px 4px 1px 4px;padding:0;}
</style>

Onde o .bbw_title mostra o header do widget, o .bbw_icons mostra os ícones para favoritos e etc, o .bbw_subtitle mostra o link para as últimas visitas, .bbw_control mostra o link para as configurações de Visibilidade, o .bbw_footer modifica o texto do footer e o #bbw_readers é o conjunto dos avatares.

Com esse script você monta um widget sem nenhum estilo, apenas os avatares sendo mostrados.

• Os meus avatares estão como ícones grandes, ou seja

http://embed.blogblogs.com.br/embed/readers?blog_id=171962&layout=GB

Eu aconselho que mesmo você usando os avatares pequenos, configurar para GB e reduzir o tamanho do quadradinho no css. Isso ajuda a qualidade da imagem quando for muito reduzida.

• As configurações estão para nenhum estilo, ou seja

http://embed.blogblogs.com.br/embed/readers?blog_id=171962&layout=GB&style=0

Isso evita qualquer interferência do layout padrão em cima do seu customizado.

• Meu rank está aparecendo, ou seja:

http://embed.blogblogs.com.br/embed/readers?blog_id=171962&layout=GB&style=0&rank=1

Usando o número zero o rank some.

• Eu mostro 35 avatares, ou seja:

http://embed.blogblogs.com.br/embed/readers?blog_id=171962&layout=GB&style=0&rank=1&n=35

Começando pelas dimensões do widget:

#bbw_readers {  background:url(‘url de uma imagem qualquer’) width:295px; }

Assim eu defino que a lagura deve ser 295px. Não usei nenhum background, você pode remover esse código ou usar um fundo editado.

Agora vamos ao header.

Você pode modificar o header original da blogblogs para melhor se adequar com as cores do seu blog. Para isso você define qual imagem quer usar no lugar da original, basta criar uma e acrescentar. Eu criei minha imagem:

#bbw_readers .bbw_title {
background:url(‘http://arteevicio.com/uploads/2009/01/bgblogblogscortado.gif’)

Adicionando o hover:

#bbw_readers .bbw_title:hover {
background:url(‘http://arteevicio.com/uploads/2009/01/bgblogblogsverde.gif’)

As posições ficam a seu critério. Para o header original não aparecer use:

#bbw_readers .bbw_title img {
display:none;
}

Agora para os ícones dos favoritos e perfil não aparecerem, use:

#bbw_readers .bbw_icons img { display:none;}

Mas daí eu adiciono o meu customizado:

#bbw_readers .bbw_icons { background:url(‘http://arteevicio.com/uploads/2009/01/adicionablogblogsazul.gif’)  }

E acrescento o hover:

#bbw_readers .bbw_icons:hover {

background:url(‘http://arteevicio.com/uploads/2009/01/adicionablogblogs.gif’)  }

Prefiro não mostrar o código das posições, aí também é facilitar demais. Eu optei por não mostrar o link dos últimos visitantes, para isso usei:

#bbw_readers .bbw_subtitle { display:none; }

E por fim um bacground para o footer:

#bbw_readers .bbw_footer { (‘http://arteevicio.com/uploads/2009/01/footerblogblogs.gif’) }

fonte 10 pixels
#bbw_readers .bbw_footer a { font-size: 10px; }

e o hover acrescentado no link
#bbw_readers .bbw_footer a:hover { font-size: 10px; color:#c92323; }

Isso é o máximo que eu posso fazer para ajudar, não sou muito bom explicando códigos, prefiro ficar nos tutoriais de design. Mas está aí. Boa sorte a todos e para mim também, é claro.