Trick to Scroll Any Widget Sticky for Blog/Website

It is difficult to make visitor/reader convince to subscribe blog/website or join to social media network. But with Reminding Visitor Trick can convert visitor/reader to Join our community with certain widgets like Popup widgets, Side scrolling widgets, Sticky Bars, Floating widgets etc. It doesn’t mean that you irritate visitor/reader with popup widget without closing button. Webmasters can use both Timer popup widget or Closing button subscription widget or Joining community widget or Latest Sticky Widget Scrolling Trick to convert readers as Loyal subscribers.

Stylish Widget Generators

When a visitor/readers lands on website/blog scrolls down to view more content make them view widget scrolling or any widget to Join in Your community on adding to right or left sidebar or bottom or top along visitors scrolling down to browse more content.

Browse More Related Posts

This code is applicable to any type of widget on your blog/website simply replacing with Widget ID.
In this article we make you educate about ‘Sticky Scroll Any Widget’ to blog/website to gain more subscribers via Social media widgets. Let’s start Tutorials for creating widget to scroll.

Get More Stylish Widgets

What are the advantages for adding this code to template?
Scroll any type of widget like, menu, subscription box, ads, social media buttons, bars etc.
Remind visitor/reader to subscribe to Join in Community
Easy customization code to blog/website
Scrolls down when visitor/reader scrolls down along with content
Easy installation without disturbing to other widgets

SEO Tricks and Ranking Tips

How to Add Sticky Scroll Any Widget code to blogger?

Sign into your blogger account
From Blogger Dashboard select ‘Template’ link tab
Click on ‘Edit HTML’ and proceed
Now, Search for tag

</body>

After finding tag copy the below code and paste above to it

<script>
// Sticky widget by www.blogtariff.com
// Tutorial at http://www.blogtariff.com/2013/07/add-sticky-scroll-any-widget-to.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
ko_makeSticky("WIDGET ID"); // enter your widget ID here
function ko_makeSticky(elem) {
    var ko_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    ko_sticky.parentNode.insertBefore(scrollee, ko_sticky);
    var width = ko_sticky.offsetWidth;
    var iniClass = ko_sticky.className + ' ko_sticky';
    window.addEventListener('scroll', ko_sticking, false);
    function ko_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            ko_sticky.className = iniClass + ' ko_sticking';
            ko_sticky.style.width = width + "px";
        } else {
            ko_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

<style>
.ko_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>

Code customization:

Replace Widget ID with your any type of Widget ID (eg. HTML1 or HTML2 etc.)

Finally ‘Save Template’ and Preview your experiment
That’s done