Como colocar Widgets flutuantes fixos na lateral do blog

Uma boa dica de otimização e até de estética para os blogs, é o uso de widgets ou gadgets  flutuantes que ficam fixos ao final da rolagem.

Quando um visitante rola para baixo o seu blog para ver mais conteúdo, a lateral sidebar acompanha a rolagem e vai amostrando os gadgets laterais, mas quando a postagem é muito longa e acabam os elementos do menu lateral, ele fica todo branco. 

Além de ficar feio, é um desperdício de espaço. O ensinarei como eliminar o espaço em branco do menu lateral do blog, fazendo com que o último banner fique fixo e sempre visível por mais que se role a página do blog.

Mas ATENÇÃO: As regras do Adsense não permitem que o anúncio fique fixo ou flutuante na sidebar ou em qualquer parte do blog, portanto nunca use esse recurso para fixar ou flutuar os banners do Adsense. Sugiro que se consulte os demais programas de afiliados para saber se eles permitem que seus banner flutuem ou fiquem fixos.

Se quiser ver um exemplo da widgets fixa funcionando veja essa postagem 7 mistérios do Corpo Humano que não tem Explicações .

Widget e Gadgets em termos de blog são a mesma coisa.

Como deixar um banner fixo na lateral do blog:

Copie e cole o código abaixo logo acima da tag </body>.
  • <script>
    // gadgets fixos estimulanet.com.com
    // Tutorial at http://www.estimulanet.com/2014/07/como-colocar-widgets-flutuantes-fixos.html
    // Free to use or share, but please keep this notice intact.
    //<![CDATA[
    bs_makeSticky("SUA_WIDGET_ID"); // enter your widget ID here
    function bs_makeSticky(elem) {
        var bs_sticky = document.getElementById(elem);
        var scrollee = document.createElement("div");
        bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
        var width = bs_sticky.offsetWidth;
        var iniClass = bs_sticky.className + ' bs_sticky';
        window.addEventListener('scroll', bs_sticking, false);
        function bs_sticking() {
            var rect = scrollee.getBoundingClientRect();
            if (rect.top < 0) {
                bs_sticky.className = iniClass + ' bs_sticking';
                bs_sticky.style.width = width + "px";
            } else {
                bs_sticky.className = iniClass;
            }
        }
    }
    //]]>
    </script>
    
    <style>
    .bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
    </style> 


Agora você deve localizar a ID HTML da widgets que você quer fixar e colocar onde está marcado em vermelho no código ("SUA_WIDGET_ID") mantendo a aspas e os parenteses.

Por exemplo, digamos que o ID widget é HTML9, em seguida, a linha 6 do código ficaria: bs_makeSticky("HTML9");

Como localizar a ID de um widget ou gadget no blogger
  • Vá no layout
  • Abra o gadget desejado
  • olhe na barra de endereço do gadets aberto e procure no final do endereço a ID



Caso não queira mexer dentro do HTML do template, o código pode ser inserido via Layout, criando uma nova widget e nela inserido o código com a ID do elemento de página que se quer fixar.

Postar um comentário

5 Comentários

  1. Incrível! O seu foi o único que deu certo no meu blog! Já estava perdendo as esperanças de conseguir rs...
    Obrigada por compartilhar!

    ResponderExcluir
  2. Ele move apenas um gadget ou a barra lateral toda? Ele para antes do footer?

    ResponderExcluir
  3. Muito bom Mesmo o unico.. continui assim amigos!
    Quem quiser ver vomo ficou de uma passadinha lá no meu site
    www.coletividade-evolutiva.com.br

    ResponderExcluir
  4. ANDRÉ SCHARTH Quero utiliza-lo nas minhas postagens mais vista, só que o problema é que ao rolar a pagina ate o final do site as postagens não para ela ultrapassa o rodapé do site, tem como você modificar o códico para ele parar de rolar ao chegar no rodapé? agradeço desde de já.

    ResponderExcluir

Os comentários são moderados, isso significa que ao clicar em enviar, eles não são publicados imediatamente, e sim após serem analisados.