Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1498248146
Vida do cache: 1498291346
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Redes Sociais Widget

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, 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]



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

4 Comentários

  1. Adm. disse:

    Desculpa mais eu não entendi o porque não pegou!!!
    Adoro o seu site!!!

  2. Coca Cola disse:

    O 3° passo o CSS ficou aparecendo no topo do meu blog.

  3. Dea Carvalho disse:

    É 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.
    Mensagem de erro em XML: The reference to entity "hl" must end with the ';' delimiter.

    Tentei mil vezes já…

  4. Žéß?_?T disse:

    É um efeito bem legal, vou ver se eu consigo adicionar no meu.

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.