How To Add Pop Up Mail Subscription Widget On Blogger

How to add pop up subscription  widget in blogger with pics 

Hello bloggers.  In this tutorial  im going  to explain  how to add pop-up mail subscriptions  on blogger .  pop-up subscriptions  can help you to increase  your visitors  activities  in your site and pop up mail subscriptions widget will give your blog a extra professional  look.
So without  wasting  anymore  time lets start our todays tutorial. This pop up widget is very responsive, user friendly and professional looked.    

What is pop-up subscriptions widget  in blogger?  

When sometimes  you visit someone's  website,  automatically  a new floating mail subscription page come in the home page,  it’s  called pop-up subscriptions.

Why you should use pop-up subscriptions  widget  in blogger?  

• It can be the best way to increase  you blogsite traffic.

• Pop up subscription  will back your visitors  again in your site and it will decrease  your bounce rate.

• It can be increase  your 70% site follower or even more by using mail.

So lets see how to add pop up subscription  in blogger 

• 1st loging in your blogger dashboard  and click on layout  option.

• Now click on add gadget

• Click on HTML/Javascript  option 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /><style> .ABT_float_ads_main_Wrap { width: 100%; max-width: 550px; max-height: 400px; position: fixed; z-index: 98765; background: rgb(59, 89, 152); left: 50%; top: 50%; transform: translate(-50%, -100%); box-sizing: border-box; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); border-radius: 10px; text-align: center; box-shadow: 0px 0px 3px 1px black; display: none; } .ABT_float_ads_close { margin: 0 auto; text-align: center; padding: 30px 20px 30px; position: absolute; top: -45px; right: -30px; z-index: 9999999; } .ABT_float_ads_close #ABT_close_button { font-size: 25px; color: #fff; display: inline-block; background: rgb(250, 155, 57); padding: 5px; } #ABT_close_button { cursor: pointer; } #ABT_credits { font-size: 25px; color: #fff; position: absolute; bottom: 2px; right: 5px; display: inline-block; text-shadow: 0 0 3px rgba(0, 0, 0, 0.2); text-decoration: none!important; } .ABT_formWrap { background: rgb(250, 155, 57); padding: 10px; margin: 0px; width: 100%; min-width: 350px; overflow: hidden; box-sizing: border-box; border-radius: 10px; } .ABT_Heading, .ABT_Heading2 { color: #fff; font-size: 28px; font-weight: bold; text-shadow: 0px 0px 3px black; font-family: 'oswald', sans-serif; text-align: center; display: block; padding: 5px 0px; margin: 10px 0px 0px 0px; } .ABT_Heading2 { color: #fff; font-size: 18px; margin-bottom: 20px; font-style: italic; font-weight: 400; margin-top: 5px; } .ABT_Heading2 .fa-rss { color: rgb(250, 155, 57); } .ABT_Heading .fa-heart { color: rgb(227, 27, 35); } .ABT_float_ads_main_Wrap .fa-long-arrow-down { font-size: 40px; z-index: 98567; position: absolute; display: inline-block; padding: 10px; top: 80px; left: 45%; color: white; text-shadow: 0px 0px 5px black; } .ABT_formWrap .ABT_input_group { width: 100%; box-sizing: border-box; position: relative; margin: 0 auto; margin-top: 20px; border: 1px solid rgb(59, 89, 152); border-radius: 4px; } .ABT_input_group:before { color: #fff; content: "\f003"; font-family: FontAwesome; position: absolute; text-align: center; padding: 10px 12px; width: 50px; height: 100%; box-sizing: border-box; background: rgb(59, 89, 152); border: 1px solid rgb(59, 89, 152); text-shadow: 0px 0px 3px black; } .ABT_formWrap .ABT_Email { box-sizing: border-box; width: 100%; padding: 10px 0px 10px 60px; height: 100%; margin: 0px; border: none; border-radius: 4px; border: 1px solid rgb(59, 89, 152); } .ABT_formWrap .button { width: 100%; display: block; padding: 10px; box-sizing: border-box; position: relative; margin: 10px auto; margin-bottom: 20px; border-radius: 4px; background: rgb(59, 89, 152); font-size: 18px; border: none!important; cursor: pointer; text-shadow: 0px 0px 3px black; color: #fff; } .ABT_Widget_Container:before { content: ""; position: absolute; border-right: 15px solid transparent; border-left: 15px solid transparent; border-top: 15px solid rgb(59, 89, 152); border-bottom: 15px solid transparent; left: 50%; transform: translate(-50%); top: -1px; z-index: 55; } .ABT_Widget_Container{ position: relative } .ABT_formWrap, .ABT_innerForm, .ABT_Widget_Container { width: 100%; } .pulse { -webkit-animation: pulse .8s linear infinite; -moz-animation: pulse .8s linear infinite; -ms-animation: pulse .8s linear infinite; animation: pulse .8s linear infinite } .ABT_float_ads_close:before { content: ""; position: absolute; border-right: 9px solid #955f28; border-left: 5px solid transparent; border-top: 9px solid transparent; border-bottom: 5px solid #955f28; left: 6px; } @keyframes pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8) } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); transform: scale(1) } 50% { -moz-transform: scale(0.8); transform: scale(0.8) } 100% { -moz-transform: scale(1); transform: scale(1) } } @-webkit-keyframes &quot; pulse&quot; { 0% { -webkit-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(0.8); transform: scale(0.8) } 100% { -webkit-transform: scale(1); transform: scale(1) } } @-ms-keyframes &quot; pulse&quot; { 0% { -ms-transform: scale(1); transform: scale(1) } 50% { -ms-transform: scale(0.8); transform: scale(0.8) } 100% { -ms-transform: scale(1); transform: scale(1) } } @media (max-width: 650px){ #ABT_float_ads_main_Wrap{ display: none!important; } }</style>
    <div class='ABT_float_ads_main_Wrap' id='ABT_float_ads_main_Wrap'>        <span class="ABT_Heading"><i class="pulse fa fa-heart fa-lg" aria-hidden="true"></i> Loved Our Blog Posts? </span>        <span class="ABT_Heading2"><i class="fa fa-rss" aria-hidden="true"></i> Subscribe To Get Updates Directly To Your Inbox</span>        <div class='ABT_float_ads_close'>            <span id='ABT_close_button' style='float: right'>           <i id='ABT_Close_Button' class="fa fa-times" aria-hidden="true" title='close the Advertisment'></i>       </span>        </div>        <div class='ABT_Widget_Container'>            <div class="ABT_formWrap">               <form class="ABT_innerForm" action='http://feedburner.google.com/fb/a/mailverify?uri=   Techno Droid' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri= Techno Droid &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>                    <div class='ABT_input_group'>                        <input class='ABT_Email' alt="Enter your email address:" placeholder="Enter your email address:" type="email" name="email" />                    </div>                    <input type="hidden" value="AllBloggerTricks" name="uri" />                    <input type="hidden" name="loc" value="en_US" />                    <input class="button" type="submit" value="Subscribe" />                </form>            </div>        </div>        <span id='ABT_credits' style='float: right; font-size: 12px;  text-shadow: 0px 0px 3px black;'><a style='text-decoration: none!important; color: #fff;' href="http://www.allbloggertricks.com/2017/09/how-to-add-popup-email-subscription-form.html">Get This Widget</a></span>        <div style='clear:right'></div>    </div><script type="text/javascript"> window.onload = function() { if(sessionStorage.getItem('closed')){ document.getElementById("ABT_float_ads_main_Wrap").style.display = 'none'; }else{ var ABT_closeButton = document.getElementById('ABT_close_button'); var ABT_float_ads_main_Wrap = document.getElementById("ABT_float_ads_main_Wrap"); myVar = setTimeout(function() { ABT_float_ads_main_Wrap.style.display = 'block' }, 3000); ABT_closeButton.onclick = function() { if(!sessionStorage.getItem('closed')){ sessionStorage.setItem('closed', 'true'); } document.getElementById("ABT_float_ads_main_Wrap").style.display = 'none'; } } }</script>

• Replace the red colour text of this  code  and use your site name.

• Now click on save and you have successfully done.

[Note: Don't  forget  to replace the red colour  text,  remove it and use you site name ]

Conclusion : 

It was so essay  huh?  Pop pub subscription is very important  for every blog. If you face any problem  to doing it plz let me in the comment  section.  Hope you guys like.  Enjoy your new mail pop up subscription  widget.  If you like this article  than please  share with your blogger friends. Stay tune with tecno droid for more interesting  article on blogging.. Happy blogging.