O widget do Blogblogs é uma ferramenta que qualquer pessoa pode colocar em seu blog ou site. E com ela você mostra aos visitantes de seu site quem foram os últimos visitantes/leitores. Nesse tutorial, em agradeciomento ao iPod que ganhei do blogblogs, vou tentar ensiná-los a customizar o seu widget para deixar do seu gosto e com a cara de seu blog.
Vou considerar que antes de começar a customizar o seu widget, você já o tenha instaldo e funcionando no seu blog. Se não sabe tudo está explicado no site do BlogBlogs.
Entendendo o Widget
Ele é composto por uma div geral (bbw_readers) dividido em 5 sub-classes (bbw_title, bbw_icons, bbw_rank, bbw_subtitle, bbw_footer), as quais cada uma possui uma parte dele inserido com suas respectivas informações/funcionalidades.
Sendo exibido da seguinte maneira ( em imagem ):
bbw_readers
+—bbw_title
+—bbw_icons
+—bbw_rank
+—bbw_subtitle
+—users
+—bbw_footer
Apartir disso com um simples css você pode esconder itens, mudar de posição e colocar algumas firulas. Porém vamos além de css, vamos colocar efeitos em javascript através do jQuery.
jQuery
O jQuery é uma bliblioteca javascript muito famosa e poderosa, que possui infinitos recursos facilitando bastante a nossa vida. Eu acho ela uma das bibliotecas com mais recursos e mais simples de mexer. E para quem quiser saber mais é so acessar o site deles aqui ou baixar e colocar em seu site.
Considerações
Aqui eu vou mostrar todos os exemplos utilizando a tag: jQuery, mas você pode usar tanto a jQuery como a $, mas para evitar conflitos em sites que utilizem mais de uma biblioteca js eu aconselho a usar a tag jQuery.
Ao invés de usar:
$("#div").html();
Aconselho a usar:
jQuery("#div").html();
Segundo, você pode tanto colocar tudo em um arquivo .js separado ou simplesmente colocar tudo no <head> de sua página.
Em arquivo .js separado use:
jQuery(document).ready(function(){ //Funcionalidades aqui... });
Utilizando diretamente no <head> da página:
<script type="text/javascript"> jQuery(document).ready(function(){ //Funcionalidades aqui... }); </script>
Todos os exemplos mostrados devem ser colocados onde possui o comentário “//Funcionalidades aqui…”
Exemplos de funcionalidade
Vamos lá, ao trabalho. O primeiro exemplo, pode tanto ser feito em javascript como somente em css (vou mostrar sem mexer com css), que é colocar uma borda em volta de cada leitor mostrado. Para isso vamos precisar utilizar os selectors do jQuery, se não sabe o que é, aprenda aqui.
Para selecionar os leitores então fazemos assim, selecionamos a div do widget:
jQuery("#bbw_readers")
mas não é a div que queremos, e sim os leitores, que estão como links “soltos” na div. Para seleciona-los:
jQuery("#bbw_readers a")
agora então podemos colocar o que queremos, que é a borda:
jQuery("#bbw_readers a").css("border","2px solid red");
Juntando todo o código, temos:
jQuery(document).ready(function($){ jQuery("#bbw_readers a").css("border","2px solid red"); });
Apartir disto podemos colocar qualquer tipo de style em CSS e efeito que o javaScript/jQuery nos permitir.
A Mágica
Como o efeito principal do meu widget é a opção de mostrar/esconder os leitores, vamos aprender como fazer “a mágica” do widget.
O primeiro passo é colocar todos os leitores dentro de uma div separada que irá fazer todo o trabalho para nós. Como os links/leitores estão “soltos” na div do widget, para colocar todos eles em uma outra div vamos fazer o seguinte:
Selecionar todos os links da div “bbw_readers”, cada link desse representa um leitor, cada usuário que visitou o blog.
jQuery("#bbw_readers > a")
Através da função “wrapAll” do jQuery, todos eles serão colocados dentro da div que estamos criando, que no caso é a div “bbw_users”:
jQuery("#bbw_readers > a").wrapAll("<div class='bbw_users'></div>");
Agora que todos os usuários já estão dentro da div que queremos, basta nós colocarmos o css da div para esconder o que não queremos.
Para mostrar somente a primeira linha de leitores, vamos colocar o seguinte CSS na div:
//Fixa a altura no tamanho das imagens. jQuery(".bbw_users").css("height","35px"); //Coloca o "overflow" na div, para não ultrapassar os 35px e esconder o restante jQuery(".bbw_users").css("overflow","auto"); //Retira a barra de rolagem da div jQuery(".bbw_users").css("overflow-x","hidden");
Agora só falta criar o link, onde desejar, chamando a seguinte função para colocar o efeito da div aparecer e desaparecer.
var changeBlogBlogs = function(){ if(jQuery(".bbw_users").height() == "35") {jQuery(".bbw_users").animate({ height : "140px"},1500);} else {jQuery(".bbw_users").animate({ height : "35px"},1500);} }
Um exemplo seria:
<a onclick="changeBlogBlogs()" href="#blogblogs">Mostrar todos os leitores</a>
Quem quiser visualizar o meu aqui estão meu javascript e css completos.
Aqui termina a primeira parte do tutorial, fiz ele correndo um pouco e espero que não tenha erros, em breve faço a continuação deste post e utilizando mais recursos. Agradeço ao blogblogs por estar entre os 10 primeiros. Espero que gostem e qualquer dúvida podem enviar comentários, email ou qualquer mídia social por ai.
