Monday, May 4, 2020

How to add Popup Subscribe Form to Blogger site



1. Login / SignUPto Feebburner website https://feedburner.google.com/




2. Enter your Blogger URL and click Next

3. Enter Feed Title, usually it will automatically pull from your Blogger Title. However, if you want to change/customize the Feed Title, you can enter here.



4. Click Next and Next to complete FeedBurner Feed to make it Live.


5. Click on Next or you can directly click on "Skip directly to feed management".

6. Click on Publicize tab.



7. Select Email Subscription and Click Activate.



8. Copy the Form Code  from here.



9. Login to your Blogger account.



10. Click on Layout in the Blogger Dashboard



11. Click on Add Gadget in the Column


12. Then click + symbol just beside HTML/JavaScript



13. Copy the below code and replace the highlighted code with your copied Form code.

Code Start--

<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: 300px; position: fixed; z-index: 98765; background: rgb(255, 255, 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: 10px; right: 500px; z-index: 9999999; } .ABT_float_ads_close #ABT_close_button { font-size: 20px; color: #000; display: inline-block; box-shadow: 0 0 3px rgba(0, 0, 0, 1); background: rgb(255 255, 255); padding: 5px; border-radius: 5px; } #ABT_close_button { cursor: pointer; } #ABT_credits { font-size: 30px; color: #fff; position: absolute; bottom: 12px; right: 5px; display: inline-block; text-shadow: 0 0 3px rgba(0, 0, 0, 0.2); text-decoration: none!important; } .ABT_formWrap { background: rgb(255, 255, 255); padding: 10px; margin: 0px; width: 100%; min-width: 350px; overflow: hidden; box-sizing: border-box; border-radius: 10px; } .ABT_Heading, .ABT_Heading2 { color: #000; font-size: 18px; font-weight: bold; font-family: 'Times New Roman', Times, serif; text-align: center; display: block; padding: 5px 0px; margin: 10px 0px 0px 0px; } .ABT_Heading2 { color: #000; font-size: 18px; margin-bottom: 20px; font-style: italic; font-weight: 400; margin-top: 5px; } .ABT_Heading2 .fa-rss { color: rgb(255, 255, 255); } .ABT_Heading .fa-heart { color: rgb(227, 27, 35); } .ABT_float_ads_main_Wrap .fa-long-arrow-down { font-size: 80px; z-index: 98567; position: absolute; display: inline-block; padding: 10px; top: 60px; 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, 100); 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, 100); border: 1px solid rgb(59, 89, 100); 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, 100); } .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, 100); 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 &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) }
    </style>
    <div class='ABT_float_ads_main_Wrap' id='ABT_float_ads_main_Wrap'>
        
        <span class="ABT_Heading2"><i class="fad fa-file-certificate"></i>Subscribe VirtualVemula To Get Updates To Your Inbox</span>
        <div class='ABT_float_ads_close'>
            <span id='ABT_close_button' style='float: center'>
           <i id='ABT_Close_Button' class="fa fa-times" aria-hidden="true" title='Close'></i>
       </span>
        </div>
        <div class='ABT_Widget_Container'>
            <div class="ABT_formWrap">
<!-- change here -->

               <form style="border:1px solid #000;padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=virtualvemula/MNTy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="virtualvemula/MNTy" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /></form>

<!-- change here -->
            </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="https://abhyasanalearning.blogspot.com/2020/05/how-to-add-popup-subscribe-form-to.html">Get This Widget</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>

Code End --

14. Enter the above copied code to your HTML/JavaScript

No comments:

Post a Comment