Popup Email Subscription Box For Blogger - Responsive

Popup Email Subscription Box For Blogger - Fully Responsive Script

i blog lam ah, i user te leh visitors te tan Email Subscribe na tur i dah ve duh anih chuan, a hnuai box ami khu i widget ah i va past dawn nia. <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(16,135,255); 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; box-shadow: 0 0 3px rgba(0, 0, 0, 1); background: rgb(16,135,255); padding: 5px; border-radius: 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(206,213,214); 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(206,213,214); } .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_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 } @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 " pulse" { 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 " pulse" { 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) } </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> Want To Stay Tuned? </span> <span class="ABT_Heading2"><i class="fa fa-rss" aria-hidden="true"></i> Subscribe Us! Don't Miss Any Update...</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> <i class="fa fa-long-arrow-down" aria-hidden="true"></i> <div class='ABT_Widget_Container'> <div class="ABT_formWrap"> <form class="ABT_innerForm" action="https://feedburner.google.com/fb/a/mailverify" class='subscribe-form' method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <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="FEEDBURNER-ID" 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;'><a style='text-decoration: none!important;color:transparent;' href="https://nickstutorials.blogspot.com">Nicks Tutorials</a></span> <div style='clear:right'></div> </div> <script type="text/javascript"> window.onload = function() { 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() { document.getElementById("ABT_float_ads_main_Wrap").style.display = 'none'; } } </script>

Where to past your code on blogspot?

easy, blogger.com ah hian login la, i blog menu ah khan layout kha click leh la, i blog sidebar ah khan add widgets tih kha i hmet leh ang a, tichuan, Html/JavaScript tih kha i thlang leh ang a, widget title kha chu dah duh lo law law mai la. chuan, content ah khan, a chunga code i copy khi i paste dawn nia, a hnu ah FEEDBURNER-ID ah khian, i feedburner Id kha i dah a ngai dawn a, hmun hnih ah thlak tur a awm khi en la. A bak chu engkim kan sawi anga i tih chuan, buaina tur a awm tawh lo ang.

Don't Have Feedburner Account?

lungngai hmarchate link[ FeedBurner ] ah hian lut la, screen instructions kha follow in, account i va siam anga, feedburner address hnuaia blogspot/xxklm tih ang lo awm kha i ID tur ania, chhin chhiah tlat la, chuan a hnu ah, publicize tih bar kha cluck la email subscription kha i click leh ang a, i enabled dawn nia. well done! kan zo e.