12 de junho de 2017

Como fixar um gadget na sidebar do Blogger

Tags

O código que vou mostrar nesse post, vai ajudar você que quer fixar um determinado gadget na sidebar do seu blog. Mas para que ele funcione bem, eu recomendo usar ele no ultimo gadget da sua sidebar, assim não vai correr o risco dele ficar sobreposto em cima dos demais gadgets.


Você pode usar para fixar um anuncio do Adsense por exemplo, são infinitas possibilidades que você pode fazer com ele. Porém eu acho que deixar um anuncio fixo aumentaria as suas receitas com o blog.

Fixando um gadget na sidebar do blog

Então vamos lá, mas atente-se o gadget já deve estar adicionado na sua sidebar!

Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.


  1. Acesse o Painel do Blogger
  2. Vá até Tema > Editar HTML clique sobre o editor e tecle CTRL+F e procure por </body>, acima do trecho encontrado cole:
  3. 
    <script>
          //<![CDATA[
          codigosblogger_fixadorGadget("ID DO GADGET");
          function codigosblogger_fixadorGadget(elem) {
            var cb_sticky = document.getElementById(elem);
            var scrollee = document.createElement("div");
            cb_sticky.parentNode.insertBefore(scrollee, cb_sticky);
            var width = cb_sticky.offsetWidth;
            var iniClass = cb_sticky.className + ' cb_sticky';
            window.addEventListener('scroll', bs_sticking, false);
            function bs_sticking() {
              var rect = scrollee.getBoundingClientRect();
              if (rect.top < 0) {
                cb_sticky.className = iniClass + ' cb_sticking';
                cb_sticky.style.width = width + "px";
              } else {
                cb_sticky.className = iniClass;
              }
            }
          }
          //]]>
        </script>
        <style>
          .cb_sticking {background:transparent !important; position:fixed !important; top:30px; z-index:9999;  margin-top: 40px; position:relative\9 !important;}
        </style>
    
  4. Altere o trecho destacado no código "ID DO GADGET" pelo o id do gadget que você quer fixar. Um exemplo de como pegar o ID:

Pronto, uma vez alterado para o ID do seu gadget, salve e veja se funcionou.

Dúvidas? deixe um comentário abaixo

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

1 comentários

Funciona muito bem,mas o que eu gostaria e não encontrei em lugar nenhum ainda, seria o códico que fixa o wdget na sidebar e ao chegar no rodapé do site ele parar ou sumir veja o meu blog para vc ver, e se puder me ajudar com isso agradeço muito Ebrahim p. leite


Abrir lista de emoticonFechar lista de emoticon