Friday, September 18, 2020
Home Blogging Tips & Tweaks How to Make Any Blogger Widget/Gadget Sticky (Float)

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

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

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments