Widget Icones sociais com Bubble Effect

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

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, 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 template: Papyro Dark.

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.

[becape]Lembrando que, é sempre bom fazer um backup do seu Template, antes de realizar quaisquer alterações, para evitar transtornos, se algo sair errado.[/becape]

1º Passo:

Faça download deste arquivo
e hospede-os no site de sua preferência. Confira lista de Sites para Hospedagem de arquivos.

2º Passo:

No painel do Blogger, acesse o menu “modelo”, clique no botão “editar html”.
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='url do Bubble_sociales' 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 no menu “modelo”, entre novamente 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.
Acesse novamente o menu “modelo”, entre na edição HTML do seu template, clique em “expandir modelos de widgets” e procure pela tag:

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-IMAGEM-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-IMAGEM-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-IMAGEM-ICONE-FACEBOOK'/></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-IMAGEM-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-URL-IMAGEM-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-IMAGEM-ICONE-ORKUT'/></a></li>
</ul>
</b:if>

Se preferir, veja neste post outras opções de local mais adequado para colar o código.
Confira algumas sugestões de ícones sociais 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.

 
[alerta]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. Para melhor entendimento, leia este artigo: Por que alguns scripts não funcionam no meu blog.[/alerta]

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn