Personalizando o BlogBlogs Widget

August 22nd, 2007, 7:54 am Rodrigo P. Ghedin Genéricos

Uma das jogadas mais legais que o BlogBlogs fez ultimamente foi o widget do serviço. Ele funciona mais ou menos como o do concorrente mundial do serviço, o MyBlogLog: numa parte do blog, exibe os últimos cadastrados no serviço que por ali passaram.

Além do layout padrão (um verdão bem estranho), o sistema possibilita geral um widget “limpo”, de modo que o próprio blogger, via CSS, possa adequá-lo ao seu layout. E, embora isso possa parecer mais fácil que tirar doce de criança, não é bem assim, simplesmente porque o código do widget é um JavaScript.

Já faz algum tempo que me aventurei na busca pelas classes e IDs perdidas do BlogBlogs Widget. Como? Simplesmente copiando a URL que vem incluída no JavaScript diretamente na barra de endereços do navegador. Assim, o código XHTML aparece, revelando também tudo sobre o CSS do mesmo.

Antes de mostrar a estrutura, porém, acho válido ensinar como pegar seu widget personalizável.

Entre no BlogBlogs, faça login e, no menu à esquerda, em Meus Blogs, clique em Ferramentas & Widgets. Na próxima página, em Ferramentas específicas para um de seus blog, escolha seu blog no menu de seleção. Você será levado para a tela de configuração do widget (Widget Últimos Leitores). A opção mais importante no nosso contexto é a quarta, que pergunta se você deseja usar o estilo do BlogBlogs, ou fazer o seu mesmo. Escolha a segunda (Sem estilos. Você podera customizar o Widget com um CSS em seu site.), e copie e cole o código que surge imediatamente abaixo no seu blog. Pronto!

Ou quase, já que o layout ainda não está adaptado… Mas isso será resolvido agora!

Basicamente, a estrutura é a seguinte:

<div id="bbw_readers">
Começo do código. Usando a ID bbw_readers, é possível determinar várias coisas: cor de fundo, posicionamento, tamanho etc.

<div class="bbw_title">
Dentro desta tag fica a imagem BlogBlogs (é o título do widget, por assim dizer).

<div class="bbw_icons">
Aqui temos aqueles atalhos rápidos (perfil, blogs, favoritos etc.).

<div class="bbw_rank">
O rank do blog, que só aparecerá caso você tenha optado por isso, na tela de criação do widget.

<div class="bbw_subtitle">
Subtítulo. Pelo que pude apurar, trata-se daquele “Últimos Leitores”.

<div class="bbw_control">
Os avatars dos últimos leitores.

<div class="bbw_footer">
Rodapé (onde fica escrito “Por BlogBlogs.com.br”).

Simples, não? Quem tem intimidade com CSS pode fazer miséria com isso, personalizando ao máximo o widget. Para tal, basta abrir o style.css do seu tema, e incluir as classes e ID lá, colocando seus devidos atributos.

Para facilitar a vida de todos, já que sei que não são poucos os que não sabem CSS, copio abaixo o código usado no widget aqui do BlogAjuda. Basta copiar e colar no seu style.css para surtir efeito:

.bbw_title { margin-bottom:8px; }
.bbw_icons { padding:0 20px; margin-bottom:8px; text-align:center; }
.bbw_rank { margin-bottom:4px; text-align:center; }
.bbw_subtitle { margin-bottom:8px; text-align:center; }
.bbw_control { text-align:center; margin-bottom:4px; }
.bbw_avatar { text-align:center; padding:4px; }
.bbw_footer { margin-top:8px; }

Esse código (acima, meu) não fazem nada muito espetacular. Ele só centraliza tudo, e dá espaços generosos entre os atalhos rápidos e os avatars.

Espero que tenham gostado, e até a próxima!

blogblogs, blogblogs widget, widget, personalizar, customizar, últimos, leitores, box