OnScroll Slide in Subscription Form Widget for Blogger

You may have seen that on many websites they use to show subscription forms or any advertisement on page scroll.

If you scroll down on that website you see a tiny popup window that slides in from the bottom or from left to right or vice-versa.

If you are a Blogger user, I am today having a subscription form popup widget that shows up on the page scroll.

What is subscription widget?

A subscription form on a website is a form that allows visitors to provide their contact information, such as their name and email address, in order to receive updates, newsletters, or other types of content from the website.

Typically, the subscription form will include fields for the user to enter their information, as well as a call-to-action button that triggers the submission of the form.

Once the user submits the form, their contact information is added to a database or email list, and they will receive updates or content as specified by the website.

Subscription forms are commonly used by businesses and organizations to build and maintain relationships with their audience, and to keep them informed about news and updates related to their brand or industry.

If you scroll down on a webpage then this widget will slide in from left to right and show the subscription form in which the user has to enter his or her email ID and then click the subscribe button to subscribe to the newsletters.

This is a very beautiful widget for blogger and helps you in increasing the followers of your website or blog which is powered by blogger.

If you want to install this popup widget which shows up on the page scroll you have to follow the steps which are provided below before that you can see the demo by clicking the demo button below. View Demo

After you have seen the demo now follow the steps to install this widget into your blogger blog.

Steps to Follow:

1. Go to Blogger Dashboard
2. Go to Layout Section
3. Click Add Gadget
4. Select HTML/Javascript Gadget from the list
5. Now copy the code provided below and paste it as widget content.

<style>
    :root {
        --clr1: #4e4e4e;
        --clr2: #333;
        --clr3: #efefef;
        --clr4: tomato;
        --border-radius: 7px;
        --text-radius: 50em;
    }
    .popup {
        width: 380px;
        height: 180px;
        background: var(--clr4);
        bottom: 20px;
        left: -380px;
        position: fixed;
        border-radius: 5px;
        box-shadow: 0px 25px 10px -15px rgba(0, 0, 0, 0.05);
        transition: 0.5s;
        z-index: 999;
        text-align: center;
        font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
    }
    .popup h3 {
        color: white;
        font-size: 25px;
        margin-bottom: -10px;
    }
    .popup p {
        color: white;
    }
    .popup input[type="text"] {
        height: 36px;
        border: none;
        background-color: rgb(228, 229, 230);
        font-weight: 500;
        color: rgb(122, 121, 121);
        letter-spacing: 1px;
        padding: 5px 10px;
        border-radius: 2px;
        width: 60%;
        font: 100 12px monospace;
    }
    .popup .btn,
    .popup input[type="submit"] {
        color: #fff;
        background-color: #bdc4d6;
        padding: 10px 20px;
        margin: 0;
        font-size: 14px;
        line-height: 1em;
        height: 36px;
        overflow: hidden;
        border-radius: 3px;
        border: none;
        transition: all 0.3s;
    }
    .popup .btn:hover,
    .popup input[type="submit"]:hover {
        background: #4fd1cd;
    }
    .popup .close {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 20px;
        height: 20px;
        cursor: pointer;
        z-index: 500;
    }

    .popup .ns-close {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 4px;
        top: 4px;
        overflow: hidden;
        text-indent: 100%;
        cursor: pointer;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .popup .ns-close:hover,
    .popup .ns-close:focus {
        outline: none;
    }
    .popup .ns-close::before,
    .popup .ns-close::after {
        content: "";
        position: absolute;
        width: 3px;
        height: 60%;
        top: 50%;
        left: 50%;
        background: var(--clr2);
    }
    .popup .ns-close:hover::before,
    .popup .ns-close:hover::after {
        background: #fff;
    }
    .popup .ns-close::before {
        -webkit-transform: translate(-50%, -50%) rotate(45deg);
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .popup .ns-close::after {
        -webkit-transform: translate(-50%, -50%) rotate(-45deg);
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    @keyframes bounce {
        0%,
        20%,
        50%,
        80%,
        100% {
            -moz-transform: translateY(0);
            -ms-transform: translateY(0);
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
        40% {
            -moz-transform: translateY(-30px);
            -ms-transform: translateY(-30px);
            -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
        }
        60% {
            -moz-transform: translateY(-15px);
            -ms-transform: translateY(-15px);
            -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
        }
    }
    .popup .arrow {
        position: fixed;
        bottom: 50px;
        left: 50%;
        cursor: pointer;
        margin-left: -20px;
        width: 20px;
        height: 20px;
        padding: 20px;
        z-index: 99;
        background-color: var(--clr4);
        border-radius: 50em;
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
        background-size: 20px 15px;
        background-repeat: no-repeat;
        background-position: center;
    }

    .popup .bounce {
        -moz-animation: bounce 2s infinite;
        -webkit-animation: bounce 2s infinite;
        animation: bounce 2s infinite;
    }

    @media (max-width: 728px) {
        .popup {
            width: 280px;
        }
    }
</style>
<div class="popup">
    <div class="close ns-close"></div>
    <h3>Subscribe Us</h3>
    <p>Subscribe to our newsletters to stay updated of our upcomming posts.</p>
    <form
        action="https://feedburner.google.com/fb/a/mailverify"
        method="post"
        onsubmit='window.open("https://feedburner.google.com/fb/a/mailverify?uri=SoftwebTuts", "popupwindow", "scrollbars=yes,width=550,height=520"); return true'
        target="popupwindow"
    >
        <input placeholder="example@domain.com" type="text" name="email" /><input type="submit" value="Submit" /><input name="uri" type="hidden" value="SoftwebTuts" /><input name="loc" type="hidden" value="en_US" />
    </form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    //<![CDATA[
    $(function () {
        var wrap = $(".wrap.fixed");
        $(window).scroll(function () {
            var scroll = $(window).scrollTop();
            if (scroll >= 50) wrap.addClass("sticky");
            else wrap.removeClass("sticky");
        });
    });

    $(document).ready(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
                $(".popup").css("left", "20px");
                $(".arrow").hide();
            } else {
                $(".popup").css("left", "-380px");
                $(".arrow").show();
            }
        });
        $(".close").click(function () {
            $(".popup").hide();
        });
    });
    //]]>
</script>

6. Save Theme/Template

After falling all the steps in installing this widget now you have to make some customizations in this widget's source code.

You can customize this widget according to your requirement but the main customization that you have to make is your feedburner user ID or username.

If you don't know how to get a user ID for Feedburner or a FeedBurner user name for your blog then follow the steps to get your Feedburner username.

1. Go To https://feedburner.google.com.
2. Select Your Blog From The list.
3. Now click this button shown in the image and you will get your FeedBurner URL.
4. Now copy your Username from that URL and replace it in the code above

Conclusion:

This was a guide of how to set up amazing popup subscription widget in blogger. I hope that you will like this and it will help you to get more subscribers for your blog.