make blogger widgets sticky widget

How to Make Any Blogger Widget/Gadget Sticky (Float)

Blogging Tips & Tweaks Coding & Programming Tips & Tweaks

Sticky widgets as it is popularly known 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 said page. It is very important to know that every feature in a Blogger blog which has a widget ID can be made to be sticky (float). So if you have installed a widget in your Blogger blog and want to make it sticky (float), then follow the simple procedure below;

Getting the ID Of the Widget/Gadget:

As I said earlier, every feature in a Blogger blog which has an ID can be made to be sticky (float). So the first thing we need to do is locate the Widget ID of the widget/gadget. To do this,

  • Go to Layout in your Blogger Dashboard and locate the widget/gadget you want to make sticky.
  • Now click on the Edit link below it.
  • On the pop up page that will appear, click inside the page’s address bar and move the text input cursor to the end of the widget’s URL link. What we are looking for is widgetId of the widget, which should be the last text after the = sign. Simply note it down or just copy it to notepad because you will need it later. In the image below, you can see that in my case, the widgetId I am looking for is shown to be Text1.

widgetId

Making The Widget/Gadget Sticky (Float):

  • After you must have taken note of the ID of the widget, then click on Template >>> Edit HTML.
  • In the Edit HTML page, search for ]]></b:skin> and paste the below CSS code just above/before it.
/* EdHelper Sticky Widget */

.EH_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;}
  • Next search for </body> and just before/above it, paste the below script.
<script>

// Sticky widget

// Educative Helper Tutorial

//<![CDATA[

EH_makeSticky("Text1");

function EH_makeSticky(elem) {

    var EH_sticky = document.getElementById(elem);

    var scrollee = document.createElement("div");

    EH_sticky.parentNode.insertBefore(scrollee, EH_sticky);

    var width = EH_sticky.offsetWidth;

    var iniClass = EH_sticky.className + ' EH_sticky';

    window.addEventListener('scroll', EH_floating, false);

    function EH_floating() {

        var rect = scrollee.getBoundingClientRect();

        if (rect.top < 0) {

            EH_sticky.className = iniClass + ' EH_floating';

            EH_sticky.style.width = width + "px";

        } else {

            EH_sticky.className = iniClass;

        }

    }

}

//]]>

</script>
  • Replace Text1 which is located at EH_makeSticky(“Text1”); in the script with the widgetId you copied or saved earlier (i.e. the ID of the widget you want to make sticky).
  • Finally click on Save Template and you should now see your widget/gadget floating as you scroll up or down your Blogger page.

I hope that was helpful.

 

Leave a Reply

Your email address will not be published. Required fields are marked *