Widget Icones sociais com Bubble Effect - Mundo Blogger
Você está em: Início 1 Redes Sociais 2 Widget 3 Widget Icones sociais com Bubble Effect 4
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]
e hospede-os no site de sua preferência. Confira lista de Sites para Hospedagem de arquivos.
No painel do Blogger, acesse o menu "modelo", clique no botão "editar html".
e Substitua a url do arquivo que você hospedou no local destacado no código:
<script src='url do Bubble_sociales' type='text/javascript'/>
$(&#39;ul#squares&#39;).imgbubbles({tooltip: true}) //add bubbles effect to UL id=&quot;squares&quot;
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>
.bubblesociales{
.bubblesociales li{
.bubblesociales li img{
.bubblesociales .tooltip{ /*estilo para o texto */
/*tamanho do icone ativo*/
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:
Cole o código a seguir logo abaixo desta linha:
<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>
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.
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]
Desculpa mais eu não entendi o porque não pegou!!!
08/03/2011 às 0:21
O 3° passo o CSS ficou aparecendo no topo do meu blog.
26/04/2010 às 5:32
É uma pena, mas assim que faço a 2ª parte >> Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.