OnScroll Slide in Subscription Form Widget for Blogger

OnScroll Slide in subscription form widget for blogger

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

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

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

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's has to enter his or her email ID and then click the subscribe button to subscribe to the newsletters of your blog.

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

If you want to install this popup widget which shows up on 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 a widget content.
  6. <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;
    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;
      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>
    $(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" )
            $('.popup').css( "left", "-380px" );
  7. 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 customise this widget according to your requirement but the main customisation that you have to make is your feedburner user ID or username.

If you don't know how to get user ID for feedburner or 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 image and you will get your feedburner URL.
  4. How to Get Feedburner User ID
  5. Now copy your Username from that URL.

I hope that you will like this amazing popup subscription form widget and me help you a lot.


The time comes to wind up this article by saying that this was source code of this amazing popup subscription widget for blogger. I hope that you will like this and it will help you to get more subscribers for your blog.

Post a Comment

Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.

Recent Comments

{getWidget} $results={3} $label={comments} $type={list}