If You Want Adsense Approval for your blog JOIN US Adsense Ready theme Now!

How to Install Floating Subscription Box on Blogger

How to Install Floating Subscription Box on Blogger EMAIL subscription box for 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>


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>


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>


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.

About the Author

Hi Greetings! thanks for reaching here, We are so delighted to welcome you on board. Your intelligence and energy make you an asset to your family and love ones.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.