FIXAR UM GADGET NO BLOGGER

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 no 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
2Vá até Tema > Editar HTML clique sobre o editor e tecle CTRL+F e procure por </body>, acima do trecho encontrado cole:

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

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.

Por: codigosblogger

Clique em "Leia Mais".