Como adicionar Gadget e Widget flutuante na barra lateral do Blog

Blogger, Gadgets, Plugins para WordPress, WordPress
57
Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Um recurso tem tem sido muito usado por diversos sites e blog é o elemento de página (gadget/widget) flutuante na barra lateral (sidebar), especialmente para dar destaque a anúncios e links importantes. Este recurso é bem simples de aplicar tanto em blogs no Blogger (BlogSpot), quanto no WordPress.ORG, funcionando em qualquer navegador. O elemento só se move quando a página é rolada, acompanhando o visitante.

✅ Canal no Youtube | Inscreva-se AGORA ✅

Se você quer ver esse recurso funcionando, basta olhar aqui para nossa barra lateral do Blog e rolar a página. Note que o último widget ficará fixo e sempre visível, até o final da rolagem da tela. Vamos mostrar aqui como aplicar esse recurso em qualquer blog do Blogger ou WordPress.ORG de forma bem simples.

ATENÇÃO: Não é permitido usar este recurso com os anúncios do AdSense! As regras proíbem isso.

Como usar gadget/widget fixo na página do Blog

Primeiro vamos mostrar como funciona no Blogger, pois precisa de algumas linhas de código. Depois o do WordPress.ORG que precisa de um plugin que fará o recurso funcionar para qualquer widget que desejar aplicar.

Para o Blogger

Se você usa o Blogger (BlogSpot) para criar o seu blog, tudo o que precisa fazer é procurar por uma linha no código fonte. Abra o painel do Blogger, clique no menu “Modelo” e depois no botão “Editar HTML”. Em seguida clique no botão “Formatar modelo” para pesquisar pelas linhas. Procure por:

</head>

Se ainda não sabe como encontrar códigos no novo editor do Blogger, então leia nosso tutorial: Como encontrar códigos no novo Editar HTML do Blogger?

Imediatamente ANTES dessa linha cole o seguinte trecho, sem alterar nada nele:

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

É possível que seu template já tenha esse código inserido nele. Se for o caso, não tem problema manter um ou dois iguais. Não afeta o funcionamento de nada.

Então salve o modelo para aplicar a mudança feita.

O próximo passo já é o último. Este recurso só funciona para os gadgets inseridos com código no “HTML/JavaScript”. Tudo o que precisa fazer é ir até o menu “Layout” no painel do Blogger, escolher qual o gadget que quer fazer flutuar, como algum onde inseriu o código de fãs do Facebook.

Abra o gadget “HTML/JavaScript”, salve o conteúdo dele à parte (copiando as linhas para serem coladas onde for indicado) e cole o seguinte trecho, só modificando o que está indicado:

<script type="text/javascript">
//<![CDATA[
(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="height: 222px;text-align:center;"><div id="topside_box-sticky-wrapper" class="sticky-wrapper" style="height: 112px;"><div class="" id="topside_box" style="">
Cole AQUI o código do seu Gadget
</div></div></div>

Onde está marcado de vermelho “Cole AQUI o código do seu Gadget“, adicione o código que você reservou (que pode ser qualquer coisa). Salve o gadget modificado, clique no botão “Salvar organização” e veja o resultado em seu Blog.

Observe que é importante que este elemento de página seja o último da barra lateral, pois senão ele ficará sobreposto aos outros já existentes. Também só funciona em um único elemento.

Para o WordPress.ORG

Já quem usa o WordPress.ORG (com domínio e hospedagem próprios) fica fácil aplicar esse recurso de widgets flutuantes com um plugin. Aqui no [ Ferramentas Blog ] usamos o Q2W3 Fixed Widget (Sticky Widget). Bem leve e não altera nada na estrutura do seu layout.

Basta procurar por ele no menu “Plugins” ~> “Adicionar novo” ou fazer o download gratuito aqui – Baixar Q2W3 Fixed Widget.

Depois de instalado ele ira inserir uma opção “Fixed widget” em todos os widgets que você tem na sua barra lateral ou for adicionar, como na imagem de exemplo abaixo:

Fixed Widget para WordPress

Todos os elementos de página que tiveram essa opção marcada vão flutuar com a rolagem da página.

.

57 Comentários

  1. Legal esta funcionalidade, irei implantar em meu blog.
    Quanto à questão do código, Marcos, caso ele seja repetido não irá afetar na velocidade de carregamento da página? Porque seria mais um script a ser carregado.
    Elton Viana

    Responder

  4. Olá Marcos!

    No próprio título do post está escrito: “…nar Gadget e Widget flutuan…”
    Qual é a diferença dos dois? Gadget não é a mesma coisa que Widget? Ou um serve para uma coisa e outro serve para outra? Sempre pesquisei sobre isso e nunca achei a resposta… Se puder responde seria legal!

    Abraços!

    Responder

    • Caio,

      É a mesma coisa, só que no Blogger é chamado de Gadget e no WordPress é chamado de Widget. E o Blogger tb faz algumas confusões usando widget em certos lugares.

      Responder

  6. Essa funcionalidade de Widget flutuante e que acompanha a página nos dá grandes possibilidades, principalmente no Blogger para deixar os blogs/sites mais atraentes.

    Ótimo recurso Marcos!

    Responder

  8. Bom dia, Marcos! Antes de mais nada quero agradecer por tão excelentes artigos e dicas. Estou adentrando no mundo dos blogs somente agora que me aposentei, apesar de ser desenvolvedor de websites (quando se trabalha para uma empresa fica-se limitado apenas ao que ela quer, infelizmente).
    Testei várias vezes o código e não funcionou e ao reler o seu artigo tive uma dúvida com relação a isso:

    “recurso só funciona para os gadgets inseridos com código no “HTML/JavaScript””

    O gadget HTML/JavaScript é por padrão vazio, não possui código, então usei um código qualquer nele e inseri no espaço por você indicado. O código que eu inseri (botões das redes sociais) funcionou, porém o da barra flutuante lateral, não funcionou. O que pode ter ocorrido?

    Obrigado e parabéns pelo blog, é muito bom mesmo!

    Responder

  11. Pingback: Como criar um menu ou anúncio fixo/flutuante na página ao rolar a tela? - Explorando

  12. Esse gadget flutuante é uma estratégia muito boa!

    Eu utilizei no meu blog, notei de imediato um aumento do número de cliques no anúncio que tinha colocado, mas penso que não vale a pena pois fica um pouco invasivo.

    Abraço!

    Responder

  16. Olá Marcos, Gostaria de saber se tinha como determinar o local onde o gadget pare…porque eu meu blog abaixo da barra lateral tem umas coisa, esse gadget flutuante vai até em baixo num é, então o que eu queria era que ficasse apenas no espaço vazio que sobra da barra lateral, você tem alguma dica ou solução…Obrigado e parabéns pelo site e a postagem, muito boa…!!! Obrigado, abraço..!!!

    Responder

  19. Olá,

    minha versão do wordpress é 2.9.2 e esse plugin não funciona. Existe um outro plugin ou código que faça a mesma coisa e seja compatível com a minha versão de wordpress?

    Edson

    Responder

  20. Olá Marcos,

    Mais do que eu, você sabe que não é tão simples assim.
    Tanto o tema quanto os plugins podem deixar de funciona, etc. É um projeto maior.

    Por enquanto, só queria um plugin que funcionasse com a minha versão do WordPress.

    Estou tentando versões antigas desse plugin, mas até agora não funcionou.

    Vou tentar fazer manualmente.

    Obrigado pela resposta.

    Edson.

    Responder

    • Fiz manualmente, conforme está na sua postagem.
      O widget fica fixo, mas expande para a direita.
      Faltou alguma coisa?

      Edson.

      Responder

      • Edson,

        Nada mais simples que atualizar o WordPress.ORG.
        É questão de segurança para seu blog e garantia de que tudo sempre vai funcionar. Deixar seu WP desatualizado coloca seu blog em risco.

        Responder

          • Edson,

            Posso garantir para você que todos os lugares que encontrar, todas as pessoas que encontrar, vão te dizer a mesma coisa que eu: Atualizar o WordPress para a versão mais recente.

            Mas fique a vontade. O risco é por sua conta. Se encontrar alguma resposta diferente dessa, por favor, volte aqui pra me contar.

            Responder

            • Marcos,

              Sei da questão do WordPress, mas em nenhum momento essa foi a minha dúvida.

              Primeiro lhe perguntei se você conhecia um outro plugin ou código que fazia a mesma coisa desse plugin e que fosse compatível com a minha versão de wordpress?

              Você respondeu para eu trocar a versão do WordPress. Acabou não respondendo.

              Depois lhe disse que eu havia implementado o código manual, conforme está na sua postagem, mas que, embora o widget ficasse fixo, expandia para a direita.
              Perguntei se poderia ter faltado alguma coisa na minha implantação.

              Você respondeu que era fácil trocar a versão do wordpress. Acabou não respondendo novamente.

              Para seu conhecimento, muitas vezes não é tão simples assim trocar a versão do wordpress.

              Já testei a troca de versão e meu tema e vários plugins instalados vão deixar de funcionar. Tenho que trocar o tema e atualizar versões de plugins, ou até mesmo trocá-los por outros similares.

              A questão agora não é a troca do wordpress.

              Edson.

              Responder

  21. Muito bom esse tutorial. Como que eu faço para aplicá-lo direto no HTML do blogger. Eu tenho, no cabeçalho do blog uma imagem que ocupa todo o width da página e logo em seguida, alguns botões css, queria fazer esse botão ficar parado no topo assim que a página fosse descida. É possível isso aplicando esses códigos alterando alguma configuração?
    Obrigado!

    Responder

  22. Olá Marcos post muito interessante e bem explicativo, mas minha dúvida é a seguinte eu coloquei no meu blog um bloco de anúncio flutuante, e fixo na direita, inclusive escrevi um artigo passo a passo do Código para colocar anúncios Adsense, publicidade fixo no Blogger em: [link suprimido] e ainda estou em dúvida se é correto o uso desse anúncio? Poderia me dar uma ajuda?

    Responder

  27. Olá primeiramente parabéns pelo o post deu certinho aqui, agora gostaria de saber se tem algum comando que possa fazer com que ele pare de flutuar antes do footer do blog porq no meu blog tem umas coisa abaixo do footer ai o gadget fica em cima deles entende, ai gostaria de saber se tem como para ele parar antes do footer percebi q no seu site tem esse comando, muito obrigado e espero que possa mim ajudar pois gostei muito desse código vlw..Até logo!!

    Responder

  28. Olá vi que vc disse que não é permitido colocar anunciodo do google usando o flutuante na sidebar, porém, sites grade utiliza essa tecnica, como é o exemplo do ig.com, se vc prestar atenção quando rola o conteúdo para cima para ver mais informações embaixo, o anúncio acompanha.

    Responder

    • Maycon,

      Primeiro tem que saber se o banner dele que flutua realmente é um AdSense.
      A regra é clara e não pode usar banner flutuante com AdSense.

      Mas grandes portais podem ter outros acordos com o Adsense. Sabemos que há exceções para grandes empresas parceiras da Google.

      Responder

  30. Ola, todo lugar que eu procuro somente é ensinado como adicionar em blog/wp eu gostaria de acidionar no meu site, não é blogger, nem wordpress, não é cms algum.. é um site em php.

    Teria como informar onde acho tal informação, ou ensinar como faz?

    Grato

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.