Como destacar um gadget ao rolar a página

Olá amigos Mult-focos, vamos ensinar hoje uma pequena mágica de como destacar um gadget ao rolar a página.

Explico você tem um gadget, por exemplo, de redes sociais e gostaria que ele ficasse sempre em destaque sobre os outros gagets, mas ele é fixo então você vai usar este código para fazer esta mágica. Observe no DEMO que o gadget, DEMO do gadget de rede social Rotatório ao rolar a página vai se manter na mesma lugar.

DEMO

É muito simples copie o código abaixo faça a seguinte modificação, onde esta escrita WIDGET ID vai mudar para o id do seu gadget, não sabe achar o ID de uma gadget, aprenda aqui.

<span id="preserve3b28163eca3046248d420ee2b731eff1" class="wlWriterPreserve"><script> //www.mult-focos.com // Livre para usar ou compartilhar, mas por favor, mantenha este aviso intacto. //<![CDATA[ ko_makeSticky("WIDGET ID"); // digite o seu ID Widget aqui function ko_makeSticky(elem) { var ko_sticky = document.getElementById(elem); var scrollee = document.createElement("div"); ko_sticky.parentNode.insertBefore(scrollee, ko_sticky); var width = ko_sticky.offsetWidth; var iniClass = ko_sticky.className + ' ko_sticky'; window.addEventListener('scroll', ko_sticking, false); function ko_sticking() { var rect = scrollee.getBoundingClientRect(); if (rect.top < 0) { ko_sticky.className = iniClass + ' ko_sticking'; ko_sticky.style.width = width + "px"; } else { ko_sticky.className = iniClass; } } } //]]> </script></span> <style> .ko_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>

Depois deste processo usando Ctrl+F procure no modelo do seu blogger, em editar HTML pela tag </body> acima dela coloque o código já modificado visualize se estiver tudo OK salve e depois faça seu comentário logo ai embaixo.