Widget Icones sociais com Bubble Effect

O Efeito Bolha (Bubble Effect), permite que uma imagem se expanda quando passamos o mouse sobre ela.
Este efeito funciona á base do JQuery, e pode ser aplicado em diversas imagens.
Com este script, as imagens vão aumentando de tamanho com uma animação suave em efeito bolha quando você passar o mouse sobre ela. Quando você mover o mouse para fora, ela voltará ao tamanho original com a mesma animação.
Com base neste javascript, eu apliquei este efeito em icones para compartilhar artigos nas redes sociais, que podem ser instalados no rodapé dos posts.
Eu achei muito interessante este efeito, tanto que estou utilizando-o no meu outro blog, e se você quiser conferir um demonstrativo, verifique a lista de ícones que aparecem no rodapé das postagens logo abaixo da linha de "marcadores", no meu outro blog: Universo Sombrio, visualize qualquer postagem que você verá como fica este efeito.



Para o funcionamento deste efeito é necessário utilizar dois arquivos javascript, sendo que um deles será necessário que você copie, salve e hospede em site externo.
Quer instalar no seu blog também?
Então veja como proceder.

1º Passo:

Copie o código contido neste arquivo.txt
e hospede-os no site de sua preferência. Confira lista de Sites para Hospedagem de arquivos.

2º Passo:

Copie o código abaixo e cole-o antes de </head>
e Substitua a url do arquivo que você hospedou no local destacado no código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://url do bubble_effect.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
  $(&#39;ul#squares&#39;).imgbubbles({tooltip: true}) //add bubbles effect to UL id=&quot;squares&quot;
})
</script>

3º Passo:

Volte na aba "design", entre na edição HTML do seu template, não precisa clicar em "expandir modelos de widgets" e procure pela tag ]]></b:skin>
e cole logo ABAIXO dela:

.bubblesociales{
list-style-type:none;
margin:0;
padding:0; }

.bubblesociales li{
display:inline-block;
zoom:1;
*display:inline;
position:relative;
width: 45px;
height:45px;
}
.bubblesociales li img{
position:absolute;
width: 45px;
height: 45px;
left:10px;
top:0;
border:0;
}
.bubblesociales .tooltip{ /*estilo para o texto */
position:absolute;
font:bold 12px Arial;
padding:2px;
width:100px;
text-align:center;
background-color:#fff;
}

#squares li{
width: 45px;
height:40px;
}
/*tamanho do icone ativo*/
#squares li img{
width: 35px;
height: 35px;
}

4º Passo:

Incluir os icones no rodapé dos posts.
Volte na aba "layout", entre na edição HTML do seu template, clique em "expandir modelos de widgets" e procure pela tag
<div class='post-footer-line post-footer-line-2'>

Dependendo de seu modelo de template, as linhas acima poderão estar da seguinte maneira:
<p class='post-footer-line post-footer-line-2'/>

Cole o código a seguir logo abaixo desta linha:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul class='bubblesociales' id='squares'>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'><img alt='Assine o Feed' rel='nofollow' src='URL-ICONE-FEED'/></a></li>
<li><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Envie no Twitter' rel='nofollow' src='URL-ICONE-TWITTER'/></a></li>
<li><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Envie no Facebook' rel='nofollow' src='URL-ICONE-FACEBOOK'/></a></li>
<li><a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title' target='_blank'><img alt='Envie no GoogleBuzz' src='URL-ICONE-GOOGLEBUZZ'/></a></li>
<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Compartilhe no Delicious' rel='nofollow' src='URL-ICONE-DELICIOUS'/></a></li>
<li><a expr:href='&quot;http://digg.com/submit?phase=3&amp;url=&quot; + data:post.url' target='_blank'><img alt='Adicione ao Digg' rel='nofollow' src='URL-ICONE-DIGG'/></a></li>
<li><a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Recomende no Technorati' rel='nofollow' src='URL-ICONE-TECHNORATI'/></a></li>
<li><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Adicione ao Stumbleupon' rel='nofollow' src='URL-ICONE-STUMBLEUPON'/></a></li>
<li><a expr:href='&quot;http://promote.orkut.com/preview?nt=orkut.com&amp;du=&quot; + data:post.url + &quot;&amp;tt=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Promova no Orkut' src='URL-ICONE-ORKUT'/></a></li>
</ul>
</b:if>

Confira algumas sugestões de ícones sociais e ícones do Google Buzz para download.
Escolha os icones que mais lhe agrada, hospede-os no seu site preferido e adicione o endereço dele nos locais indicados no código acima.
No 4º passo, você só precisará editar os endereços das suas imagens ícones, os links para envio já estão configurados automaticamente.

A funcionalidade deste script pode variar de acordo com o template.

Templates que possuem muitos scripts, acabam gerando "conflitos" entre si. Caso este script não funcione em seu blog, faça uma avaliação de quais realmente são mais necessários.