How to add sticky widget sidebar

As far as blogging is concern, the widgets that  floats or stick on a blog or websites have high click through and conversion rate than static objects/widgets. That is why many websites out there make use of floating elements throughout their websites.

From the image above you could see i have floated my facebook like box to gain more facebook likes.
Without wasting time lets learn how to get this done on your blogger dashboard.

Visit Blogger Dashboard >> Template >> Edit HTML and search for </body>

Now paste the below code just above/before

</body>

<script> // Sticky widget by TechBlogNG.Com // Tutorial at //techblogng.com/how-to-floatstick-blogger-widgets/ // Free to use or share, but please keep this notice intact. //<![CDATA[ bs_makeSticky(“HTMLID“); // 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>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<script> // Sticky widget by Asvadekdaily.blogspot.Com // Tutorial at https://asvadekdaily.blogspot.Com/how-to-add-sticky-widget-sidebar.html // Free to use or share, but please keep this notice intact. //<![CDATA[ bs_makeSticky(“HTMLID“); // 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>

វីធីទី ២

<!-- End sticky widgets -->
<script>
//<![CDATA[
HG_makeSticky("HTML2"); // enter your widget ID here
function HG_makeSticky(elem) {
    var HG_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    HG_sticky.parentNode.insertBefore(scrollee, HG_sticky);
    var width = HG_sticky.offsetWidth;
    var iniClass = HG_sticky.className + ' HG_sticky';
    window.addEventListener('scroll', HG_sticking, false);
    function HG_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            HG_sticky.className = iniClass + ' HG_sticking';
            HG_sticky.style.width = width + "px";
        } else {
            HG_sticky.className = iniClass;
        }
    }
}
//]]>
</script>
 
<style>
.HG_sticking {background:#ffffff !important; position:fixed !important; top:0; z-index:2; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative9 !important;}
</style>

<!-- End sticky widgets -->

How to Customize ==> Just change HTMLID highlighted in the code with your widget ID and save your template.
Visit your Blog and see the Magic but incase you have any problem just drop a comment and I would reply you as soon as possible.