How to Install Floating Subscription Box on Blogger

For Blogger tips, this time MIUSM TECH will share How to Install a Floating Subscription box on Blogger . As we know, the subscription box or subscription widget via email is an important part of a blog, because it will increase the number of visitors, besides that, on the other hand, posting subscribers will know directly the updates received via email.


Previously I have also shared tips on How to Create Push Notifications on Blogs with OneSignal which has more or less the same functions and benefits. Alright, here are the steps.

How to Install Floating Subscription Box on Blogger

First open the Blogger page > Click the Theme menu and click the Edit HTML button > Add this code before the code</body>

<div class='subscribebar'>
                       <div class='container text-center'>
                          Get the latest article updates from this site via email for free!
                          <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=MIUSM TECH&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
                             <div class='arlina-form-fields'>
                                <p>
                                   <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email address...&quot;;}' onfocus='if (this.value == &quot;Email address...&quot;) {this.value = &quot;&quot;;}' placeholder='Email address...' required='' type='email'/>
                                </p>
                                <p><input type='submit' value='Submit'/></p>
                                <input name='uri' type='hidden' value='MIUSM TECH'/>
                                <input name='loc' type='hidden' value='en_US'/>
                             </div>
                          </form>
                       </div>
                     <button class='closeme' title='Close this message'>&#10005;</button>
                    </div>
                    <script type='text/javascript'>
                    //<![CDATA[
                    // Floating Subscribe Box
                    $(document).scroll(function(){$(this).scrollTop()>380?$(".subscribebar").slideDown('fast'):$(".subscribebar").slideUp('fast')});$(document).ready(function(c){$(".closeme").on("click",function(c){$(".subscribebar").fadeOut("slow",function(c){$(".subscribebar").remove()})})});
                    //]]>
                    </script>

Edit the marked section and adapt it to your blog

Then select one of the CSS codes below according to your needs and add the code before code </head>

1. Subscription box Light

<style type='text/css'>
                    /* Floating Subscribe Box Light */
                    .subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.98);padding:14px 0;z-index:99;text-align:center;display:none}
                    .subscribebar form{display:inline-block;margin:0 0 0 10px}
                    .subscribebar .arlina-form-fields p{display:inline-block;margin-bottom:0}
                    .subscribebar input[type=&quot;email&quot;]{outline:none;color:#999;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:1px solid rgba(0,0,0,0.1);border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}
                    .subscribebar input[type=&quot;email&quot;]:hover{background:rgba(0,0,0,0.01);color:#333}
                    .subscribebar input[type=&quot;submit&quot;]{cursor:pointer;background-color:#2ecc71;border:1px solid #2ecc71;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}
                    .subscribebar input[type=&quot;submit&quot;]:hover,.subscribebar input[type=&quot;submit&quot;]:active{background-color:#27ae60;border:1px solid #27ae60;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}
                    .closeme{background:#fff;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:#ccc;border:2px solid;border-radius:99em;outline:none;transition:all .3s}
                    .subscribebar .closeme:hover{color:#aaa}
                    @media (max-width:767px){
                    .closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#34495e;color:#fff;box-shadow:0 2px 5px rgba(0,0,0,0.3)}
                    .subscribebar .closeme:hover{background:#2c3e50;color:#fff}
                    .subscribebar{padding:24px 10px}
                    .subscribebar form{display:block;margin:15px auto 0 auto}}
                    </style>

• Result

1. Subscription box Night

<style type='text/css'>
                    /* Floating Subscribe Box Night */
                    .subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:rgba(57,67,77,.98);color:#fff;padding:14px 0;z-index:99;text-align:center;display:none}
                    .subscribebar form{display:inline-block;margin:0 0 0 10px}
                    .subscribebar .arlina-form-fields p{display:inline-block;margin-bottom:0}
                    .subscribebar input[type=&quot;email&quot;]{outline:none;background:rgba(255,255,255,.2);color:#fff;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:0;border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}
                    .subscribebar input[type=&quot;email&quot;]:hover{background:rgba(255,255,255,.3);color:#fff}
                    .subscribebar input[type=&quot;submit&quot;]{cursor:pointer;background-color:#2ecc71;border:1px solid #2ecc71;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}
                    .subscribebar input[type=&quot;submit&quot;]:hover,.subscribebar input[type=&quot;submit&quot;]:active{background-color:#27ae60;border:1px solid #27ae60;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}
                    .subscribebar input[type=&quot;email&quot;]::placeholder{color:#fff;opacity:1}
                    .subscribebar input[type=&quot;email&quot;]:-ms-input-placeholder{color:#fff}
                    .subscribebar input[type=&quot;email&quot;]::-ms-input-placeholder{color:#fff}
                    .subscribebar .closeme{background:transparent;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:rgba(255,255,255,.15);border:2px solid;border-radius:99em;outline:none;transition:all .3s}
                    .subscribebar .closeme:hover{color:rgba(255,255,255,.3)}
                    @media (max-width:767px){
                    .subscribebar .closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#fff;color:#222}
                    .subscribebar .closeme:hover{background:#e74c3c;color:#fff}
                    .subscribebar{padding:24px 10px}
                    .subscribebar form{display:block;margin:15px auto 0 auto}}
                    </style>

• Result

1. Subscription box Gradient

<style type='text/css'>
                    /* Floating Subscribe Box Gradient */
                    .subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:#FF5722;background-image:linear-gradient(50deg,#ff4169,#8b41f6);color:#fff;padding:14px 0;z-index:99;text-align:center;display:none}
                    .subscribebar form{display:inline-block;margin:0 0 0 10px}
                    .subscribebar .arlina-form-fields p{display:inline-block;margin-bottom:0}
                    .subscribebar input[type=&quot;email&quot;]{outline:none;background:rgba(255,255,255,.2);color:#fff;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:0;border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}
                    .subscribebar input[type=&quot;email&quot;]:hover{background:rgba(255,255,255,.3);color:#fff}
                    .subscribebar input[type=&quot;submit&quot;]{cursor:pointer;background-color:#f9a93c;border:1px solid #f9a93c;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}
                    .subscribebar input[type=&quot;submit&quot;]:hover,.subscribebar input[type=&quot;submit&quot;]:active{background-color:#e49b36;border:1px solid #e49b36;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}
                    .subscribebar input[type=&quot;email&quot;]::placeholder{color:#fff;opacity:1}
                    .subscribebar input[type=&quot;email&quot;]:-ms-input-placeholder{color:#fff}
                    .subscribebar input[type=&quot;email&quot;]::-ms-input-placeholder{color:#fff}
                    .subscribebar .closeme{background:transparent;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:rgba(255,255,255,.25);border:2px solid;border-radius:99em;outline:none;transition:all .3s}
                    .subscribebar .closeme:hover{color:rgba(255,255,255,.4)}
                    @media (max-width:767px){
                    .subscribebar .closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#fff;color:#222}
                    .subscribebar .closeme:hover{background:#e74c3c;color:#fff}
                    .subscribebar{padding:24px 10px}
                    .subscribebar form{display:block;margin:15px auto 0 auto}}
                    </style>

• Result

If you have, click the Save theme button and see the results on your blog.

That's all from MIUSM TECH on How to Install a Floating Subscription box on Blogger . Hopefully useful and greetings.