How to Make Any Blogger Widget/Gadget/web element Sticky (float)

 How to Make Any Blogger Widget/Gadget/web element Sticky (float)

Sticky widgets are widgets/gadgets in a webpage which sticks to a specific portion of the page and floats (move) with the up and down scrolling of the page.

At this post I will show you how to make a sticky widget on blogger ( this is just an example, to put on any site can be done with this method, javascript and css included)

1. Get The Widget ID.

    every blogger widget have a specific id. To get this you can go to blogger dashboard then edit a gadget to make it sticky

2. Add Style

search for </style> add this style :

.frx_floating {background:#ffffff !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;}

3. Add this Script :

<script type='text/javascript'> //<![CDATA[ function frx_make_sticky(element_id) { var v_sticky = document.getElementById(element_id); var v_scroll = document.createElement("div"); v_sticky.parentNode.insertBefore(v_scroll, v_sticky); var width = v_sticky.offsetWidth; var v_Class = v_sticky.className + ' v_sticky'; window.addEventListener('scroll', v_floating, false); function v_floating() { var rect = v_scroll.getBoundingClientRect(); if (rect.top < 0) { v_sticky.className = v_Class + ' frx_floating'; v_sticky.style.width = width + "px"; } else { v_sticky.className = v_Class; } } } //]]> </script>

4. Go to end of body, search for </body>
call the script :

<script>frx_make_sticky("HTML3");</script>

5. Save Template. 

goto your blogger site and reload/refresh.

here is the video tutorial :