Colocar Gadget Flutuante no Blogger

Veja como adicionar um gadget flutuante o seu blog assim esse gadget ficará sempre visível mesmo quando os visitantes usarem a barra de rolagem esse gadget vai deslizar pela sidebar da mesma forma que o widget de botões flutuantes de rede sociais que já mostramos anteriormente. Esse tipo de widget que desliza pela pagina pode atrair a atenção dos seus visitantes e ajudá-lo a divulgar algo que você ache importante no seu blog como, por exemplo, sua pagina de fãs no Facebook ou seus artigos recomendados.

Colocar Gadget Flutuante no Blogger

Para colocar o gadget flutuante na barra lateral do blog entre na pagina modelo, faça um backup do seu template, use o crtl F para achar o HTML: </head>, cole esse código antes dele e clique para salvar:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Depois entre na pagina layout > Adicionar gadget > html/javascript e cole esse código:

<script type="text/javascript">
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
wrapperClassName: 'sticky-wrapper'
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight - windowHeight,
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
for (var i = 0; i < sticked.length; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop - s.topSpacing - extra;
if (scrollTop <= etse) {
if (s.currentTop !== null) {
s.stickyElement
.css('position', '')
.css('top', '')
.removeClass(s.className);
s.stickyElement.parent().removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.stickyElement.outerHeight()
- s.topSpacing - s.bottomSpacing - scrollTop - extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {
s.stickyElement
.css('position', 'fixed')
.css('top', newTop)
.addClass(s.className);
s.stickyElement.parent().addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
},
methods = {
init: function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);
stickyId = stickyElement.attr('id');
wrapper = $('<div></div>')
.attr('id', stickyId + '-sticky-wrapper')
.addClass(o.wrapperClassName);
stickyElement.wrapAll(wrapper);
var stickyWrapper = stickyElement.parent();
stickyWrapper.css('height', stickyElement.outerHeight());
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
className: o.className
});
});
},
update: scroller
};
if (window.addEventListener) {
window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', scroller);
window.attachEvent('onresize', resizer);
}
$.fn.sticky = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method ) {
return methods.init.apply( this, arguments );
} else {
$.error('Method ' + method + ' does not exist on jQuery.sticky');
}
};
$(function() {
setTimeout(scroller, 0);
});
})(jQuery);
</script>
<script>
$(document).ready(function(){
$("#rbtSocialFloat").sticky({topSpacing:0});
$("#topside_box").sticky({topSpacing:6});
});
</script>
<div class="sticky-wrapper" id="topside_box-sticky-wrapper" style="text-align:center;"><div id="topside_box-sticky-wrapper" class="sticky-wrapper"><div id="topside_box">
Código HTML
</div></div></div>

Aqui neste trecho final onde está escrito: Código HTML você deve trocar pelo código HTML que desejar ,por exemplo, como falamos no inicio do post pode ser a caixa de fãs do Facebook ou seus artigos recomendados, mas esse não é o gadget de posts populares, estamos falando do código do Addthis para mostrar suas postagens mais compartilhadas porque como já falamos esse código funciona somente para gadgets de HTML.

Cuidados ao Usar Gadget Flutuante no Blog

Não utilize esse código com anúncios do Google Adsense porque isso viola as regras dos anúncios. Como as Regras do Google Adsense explicam é inaceitável colocar anúncios do Google em uma "caixa flutuante" na qual os anúncios podem percorrer, se movimentar ou ser expandidos na página da web.

Sempre posicione esse gadget flutuante no final da sua barra lateral (sidebar) senão quando rolar a pagina do seu blog ele vai sobrepor ou ficar por baixo dos outros gadgets que estão abaixo dele durante a rolagem da pagina.

Veja também:
Gadget com Botões Flutuantes de Redes Sociais no Blogger
Criar e Colocar Barra de Notificação/Divulgação no Blog

Para terminar queremos agradecer o comentário feito por Aguinaldo Paladino aqui no Dicas para Blogs que nos levou a pesquisar e testar esse código.

34 comentários :

  1. muito bom essa dica vou colocar no meu blog será muito util,

    ResponderExcluir
  2. Fabiano, se eu fizer esse mesmo procedimento usando só o css position:fixed
    faz o mesmo efeito, ele fica paradinho na sidebar, será que tambem fere as diretrizes do adsense?

    ResponderExcluir
  3. Monique não pode usar o adsense fixo do jeito que falou isso também seria uma especie de caixa flutuante

    ResponderExcluir
  4. legal o problema meu seria tipo, como faço para aparecer apenas 1 vez por cada ip, pq fica chato toda pagina aparecer isso me explica por favor vlw

    ResponderExcluir
  5. não tenho códigos para fazer aparecer apenas uma vez em cada ip, mas vou pesquisar se é possível fazer isso no blogger

    ResponderExcluir
  6. por favor tenta achar agradeceria muito se ensina-se
    e tambem agradeço pelo belo trabalho que voce aprendi muitas coisas aqui =]

    ResponderExcluir
  7. oi não consegui colocar gadget, compliquei, porque tirei as propagandas e não sei como voltar. Obrigada pela paciencia.

    ResponderExcluir
  8. Maria da Conceição

    se você mexeu nos códigos e gerou um erro o melhor a fazer seria retirar o código por completo e depois colocar novamente.

    achar erros dentro dos códigos pode ser bem difícil porque são detalhes as vezes um sinal ou letra errado.

    ResponderExcluir
  9. ola amigo .vc sabe me falar porque o blogger as vezes fica parado. sem nenhuma visitinha.isso e só comigo ou e normal tem dia que anda tem dia que fica parado.não sei se e na configuração.grato

    ResponderExcluir
  10. adolfo
    isso depende de cada blog, mas use o contador de visitas do google analytics para medir as visitas e outras estatísticas do blog

    veja aqui algumas dicas sobre como desenvolver seu blog:
    3 Passos para Começar a Ganhar Dinheiro na Internet com Blogs

    ResponderExcluir
  11. Fabiano coloquei o script no bloco de notas e salvei no formato .JS (hospedei no Google Sites) e a parte do HTML no gadget mas não funcionou, você sabe porque?

    ResponderExcluir
  12. qual o endereço do script que hospedou?

    depois no seu blog tem que colocar o código deste script desta forma:

    < script type="text/javascript" src="endereço do script" >< /script >

    ResponderExcluir
  13. Hospedei no Google Sites e Google Code

    http://sites.google.com/site/plantaohiphop/arquivos/widget-fixed.js
    http://plantaohiphop.googlecode.com/files/widget-fixed.js

    ResponderExcluir
  14. entrei no seu site, achei seu endereço de email ......@r7.com.

    eu fiz umas modificações no arquivo do link que você mostrou e mandei para seu email então faça o teste com esse arquivo.

    ResponderExcluir
  15. Esse negócio é genial, pena que use jQuery. Estou tentando me livrar dessas paradas para fazer meus layouts o mais simples quanto possível. Vou tentar fazer que nem a Monique ali e colocar position:fixed pra ver no que dá. (:

    ResponderExcluir
  16. Fiz o procedimento certim mais o Widget continua rolando junto com a pagina :/ http://www.humorcreia.com.br/

    ResponderExcluir
  17. entrei na sua pagina e não vi o código

    use o código no ultimo gadget de html/javascript da sidebar

    ResponderExcluir
  18. Olá, muito boa postagem parabéns, gostaria de saber se tem como editar o código pra parar de sobrepor outro gadgets, porque eu coloquei um gadget no final da sidebar como dito aqui, mas abaixo de tudo do blog tem se eu não mim engano o nome é FOOTER, que acho que é um rodapé e nele tem vários outros gadget, ai quando o gadget flutuante passa por cima dos outros abaixo fica meio feio por cima e outros por baixo, ai gostaria de saber se tem como deixar o gadget só na barra lateral sem passar pra o footer ou parar de sobrepor...dez de já agradeço e espero poderem mim ajudar, preciso disso urgente...fui em outros sites e não mim ajudaram, talvez porque o comentário foi grande ou sei lá, espero ter entendido isso tudo, muit obrigado e parabéns...!!!

    ResponderExcluir
  19. xGamesFilmes AEM

    entendi sua duvida e vou pesquisar sobre isso, mas por enquanto não tenho o código para corrigir o problema do gadget sobrepondo o rodapé do blog

    ResponderExcluir
  20. Não tem problema amigo, quando você conseguir você diz, eu espero vlw.. pelo menos respondeu meu comentário, diferente de outros sites, parabéns e continue assim brother..!!! Vlw..

    ResponderExcluir
  21. bem legal, vou tentar por no meu blogger http://comofazercroches.blogspot.com.br/

    ResponderExcluir
  22. Oi Fabiano!
    Fiz tudo certinho e não funcionou. Pode me ajudar, por favor?
    Obrigada!

    ResponderExcluir
    Respostas
    1. o gadget flutuante tem que ser o ultimo da sidebar.

      mas se baixou o template pronto e ele tiver muitas alterações pode ser que o código não funcione por causa de uma destas modificações e neste caso é bem difícil achar o problema. (não vale a pena mexer em todo template por causa de um gadget)

      Excluir
  23. Sim, ele já estava no último.
    Entendi, obrigada pela ajuda.

    ResponderExcluir
  24. ótimo tutorial Fabiano, Muito Obrigado!!! agora, em que parte do código eu ajusto o espaçamento entre o topo e o gadget? Eu quero separar o gadget do topo por alguns pixels... Empurrar ele um pouco mais para baixo na hora dele flutuar....

    ResponderExcluir
    Respostas
    1. quase no final do código tem o trecho:

      "topside_box-sticky-wrapper" style="text-align:center;"

      coloque depois da palavra center: padding-top:20px e ajuste este valor para o espaço que desejar. Fica deste jeito:

      "topside_box-sticky-wrapper" style="text-align:center;padding-top:20px"

      mas o espaço aparecerá o tempo todo não somente quando flutuar.

      Excluir
  25. Olá, eu fiz e deu tudo certo, porém a minha sidebar é transparente e o fundo do meu blog é cinza, e quando o gedget se movimenta, fica um quadrado branco no lugar dele, ou seja, só o que se movimenta é o meu código que no caso é uma imagem, e fica feio aparecendo que a imagem sai do gedget para correr com a página. Poderia me ajudar com isso por favo???

    ResponderExcluir
  26. Excelente, vou implementar no meu blog. Valeu.

    ResponderExcluir
  27. muito bom essa dica vou colocar no meu blog será muito bom valeuuuu

    ResponderExcluir
  28. Excelente, vou fazer no meu blog. Valeu em obridaro

    ResponderExcluir
  29. o google chrome ta bloqueando esse script por ser hospedado em http e não https

    ResponderExcluir
    Respostas
    1. para usar este script teria que salvar e hospedar num site com https.
      fora isso acho que não tem o que fazer.

      o Chrome cada vez mais começará a exibir aviso em sites sem o https.

      Excluir