Lets Talk About: CSS Code To Make Gadget Sticky/Float In Blogger

Tags

Alright today we are going to be learning something different, though is being around for a while but for the new bloggers who are still looking for a way to redesign their blog to their taste am sure you will find this post useful if not now may be later. And as usual am heading straight to the point without wasting much time. 

You all will agree with me that making a gadget sticky or floating simply means to make it fixed in a position when page is scrolled down and this can be achieve with the help of java-script. (Am sure those that love placing Adsense by side will love this possibly by fixing it visitors may be force to click on them lol....) 

But the true remains that gadgets 're made to sticky to provide visitors a good user experience such as a menu either on top or by the side which floats with user so now he doesn't need or have to scroll up again and again to navigate your blog.  Again some gadgets are also made sticky such as email subscription or Ads widget. Like i did mention above either to more subscribers or more clicks respectively. So if you are ready to implement this code  to make any of your widget sticky then come along: 

Here is how to make a gadget sticky or float in blogger. Please remember to backup your template before you start that way you are sure if you are not happy with the out come result you can go back to your formal setting. Alright below is the step's to follow.

Step 1: Go to blogger dashboard and navigate to layout.

Step 2: Add a gadget or edit an existing gadget which you want to make sticky.

Step 3: Copy its ID as shown in below image:

Step 4: Go to template and search for </BODY> by using Ctrl+F.

Step 5: Copy below code and paste it just above </BODY>.

<style>.sticker {background:#F5F5F5;position:fixed; top:0px; z-index:99;}</style>
<script>
//<![CDATA[
bs_makeSticky("HTML4"); 
function bs_makeSticky(elem) {
    var sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    sticky.parentNode.insertBefore(scrollee, sticky);
    var width = sticky.offsetWidth;
    var iniClass = sticky.className + ' sticky';
    window.addEventListener('scroll', sticker, false);
    function sticker() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            sticky.className = iniClass + ' sticker';
            sticky.style.width = width + "px";
        } else {
            sticky.className = iniClass;
        }
    }
}
//]]>
</script>

 Step 6: Replace HTML4 with your gadget's ID which you found in step 3.

Step 7: Click on save template and you are done. 

Go back and refresh your blog page you will see the change. That's is not all.

(1). To change background color or your floating widget replace #F5F5F5 with desired color code.

(2). To Change the height of your floating widget(height from top) make changes in top:0px;

I sincerely hope this post was a bit of help to you. If you still have question or comment use the comment box and i will do my best to answer you good luck.

Lets Talk About It! Join Me Please
EmoticonEmoticon