How to make any blogger widget sticky?

How to make any blogger widget sticky?

How to make any blogger widget sticky?
Blogger is the major platform of blogging. Many Major blogs are still hosted on blogger. Blogger has great features which help the users to make their blogs more responsive and attractive. Previously is started the sreires of Blogger Tricks. This post is also the part of Blogger Tricks. Today i tell you How to make any blogger widget sticky?. By making any widget sticky we can get alot of useful benefits. So here is the this short trick of How to make any blogger widget sticky?.

Steps of How to make any blogger widget sticky?:

First of you should be logged in to your blogger dashboard. After logging in to your dashboard goto template>>edit html. At their find for </body> tag and paste the below piece of code above it.
<script>
//<![CDATA[
bs_makeSticky("Your_Widget_ID"); // enter your widget ID here
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var width = bs_sticky.offsetWidth;
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
            bs_sticky.style.width = width + "px";
        } else {
            bs_sticky.className = iniClass;
        }
    }
}
//]]>
</script>
<style>
.bs_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>
after pasting the above code replace the "Your_Widget_ID" with the ID your widget which you want to make sticky.
For example :Your widget Id is HTML99, then the code would be:
          bt_makeSticky("HTML99");

 How to get Widget ID

first goto dashboard and then goto layout. and then Click on Edit (any widget you want to make it sticky) (see bellow screenshot ).
How to make any blogger widget sticky?

How to make any blogger widget sticky?

After writing your blogger widget ID save your template. And you done.

From Editor's desk

Hope this tutorial will help you. If you have any question or any problem feel free to ask with us. We will try to solve out as Early as possible. And also share your thoughts with us.
How to make any blogger widget sticky? How to make any blogger widget sticky? Reviewed by Maher Afrasiab on 5:45:00 am Rating: 5

No comments:

Powered by Blogger.