Monday, 23 November 2015

Two Styles Email Subscription Popup Box For Blogger

Pop Up Email Subscription Form For Blogger is a blogger widget using jquery. In this widget the form is created bycss3 with a auto check feature and the pop up is created using jQuery. We hope this form helps you to increase your blog readers. Now we can see how to Add The Add Pop Up Email Subscription Form For Your blog. Before that you need to see a live demo for better understanding what we are talking about.you can see the live demo by clicking the floating email icon on the left side of the demo page.

Two Styles Email Subscription Popup Box For Blogger

As always I have kept the installation extremely easy,you just have to copy and paste the code after replacing my feedburner username with yours.
For First Type popup box
Steps 1
  • Login to your blogger account.
  • Got to Template section - then click on Edit HTML button.
  • Click anywhere inside the code area, then press the CTRL + F keys and search for this code
  • Add the below line of code before </head> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Steps2
  • Go to Layout >> Add A Gadget, then choose HTML/JavaScript
  • Paste this code inside it.
<style>

#backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; background-color: transparent;       background:rgba(0, 0, 0, 0.5);z-index:999; }

#popupContact{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:350px; width:500px; background:#FFFFFF; border:4px solid #ddd; z-index:999; padding:8px; font-size:13px; }

#popupContactClose{    background:url(http://3.bp.blogspot.com/-V2A37T0PQ24/U3IuYpfg4DI/AAAAAAAAC_8/YzHEp7rFzSc/s1600/close.PNG) no-repeat;    width:25px;    height:29px;    display:inline;    z-index:3200;    position:absolute;    top:-15px;    right:-16px;    cursor:pointer;    text-indent: -99999px;}

#description {    color: #AAAAAA;    font-family: times New Roman;    font-size: 25px;    font-style: italic;    line-height:30px; }

#description img {    float: left;    height: 80px;    padding: 0 25px 0 10px;    width: 80px; }

#btntfollowForm {  padding: 15px; }

#btntfollowForm img {  border:none; }

#btntfollowForm p {  margin: 0 0 10px;}

#btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 10px;        margin-bottom: 20px; padding: 10px 5px 10px 25px;  border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box;   -moz-box-sizing : content-box;       box-sizing : content-box; -webkit-border-radius: 3px;    -moz-border-radius: 3px;         border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;         box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear;    -moz-transition: all 0.2s linear;      -o-transition: all 0.2s linear;   transition: all 0.2s linear; }

#btntfollowForm input:not([type="checkbox"]):active,

#btntfollowForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;         box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;} 

#btntfollowForm .button input{    background: none repeat scroll 0 0 #3D9DB3;    border: 1px solid #1C6C7A;    border-radius: 3px 3px 3px 3px;    box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2;    color: #FFFFFF;    cursor: pointer;    font-family: 'Arial Narrow',Arial,sans-serif;    font-size: 24px;    margin-bottom: 10px;    padding: 8px 5px;    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);    width: 30%;    float: right; }

#btntfollowForm .button input:hover{    background: #4ab3c6; text-decoration: none; }

#btntfollowForm .button input:active,

#btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87);   -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;    -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;         box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }

.btntFollowFooter {  color:#222;  text-align: center;    font: 10px Tahoma, Helvetica, Arial, Sans-Serif;    padding: 7px 0;    margin-top: 80px;    text-shadow: 0px 2px 3px #555;    position: absolute;    width: 500px; }

.btntFollowFooter a {    color: #222;    text-decoration: none; }

.btntFollowFooter a:hover {    color: #fff; }

<!--[if lt IE 7]>

#btnt-container a.btntCloseImg {    background:none;    right:-14px;    width:22px;    height:26px;     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://3.bp.blogspot.com/-V2A37T0PQ24/U3IuYpfg4DI/AAAAAAAAC_8/YzHEp7rFzSc/s1600/close.PNG',sizingMethod='scale'); }

#btntfollowForm  input{ padding: 10px 5px 10px 32px;    width: 93%; }

#btntfollowForm  input[type=checkbox]{ width: 10px; padding: 0;}

<![endif]-->

</style>

<div id="backgroundPopup">

<div id="popupContact">

<a href="" id="popupContactClose">x</a>

<div id="btntfollowForm">

<img alt="Subscribe" border="0" float="center" src="http://2.bp.blogspot.com/-74BRtm82chU/U3IkWoqLESI/AAAAAAAAC_k/Fl5GWfxK84o/s1600/Subscribe+Via+Email.PNG" />

<div id="description">

<img alt="email" border="0" src="http://1.bp.blogspot.com/-MtuD6J3TCkU/U3IlM3m2t_I/AAAAAAAAC_s/mT_YKzqTw54/s1600/Mail.PNG" />Get latest Blogger Widgets, Plugins and much more straight into your INBOX for free. Just Enter your email address, Verify and join our Newsletter...</div>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=alltechpeoplecom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input name="email" placeholder="Enter Your Email..." required="required" type="text" /><input name="uri" type="hidden" value="alltechpeoplecom" /><input name="loc" type="hidden" value="en_US" />

<div class="button">

<input type="submit" value="Subscribe" /></div>

</form>

</div>

<div class="btntFollowFooter">

Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a> | powered by <a href="http://www.alltechpeople.com/" rel="dofollow" target="_blank">alltechpeople</a></div>

</div>

</div>





<script src="http://yourjavascript.com/24315621361/jquery.cookie.js" type="text/javascript">

</script>

<script type="text/javascript">

     var popupStatus = 0;

//this code will load popup with jQuery magic!

function loadPopup(){

    //loads popup only if it is disabled

    if(popupStatus==0){

        $("#backgroundPopup").fadeIn("slow");

        $("#popupContact").fadeIn("slow");

        popupStatus = 1;

    }

}



//This code will disable popup when click on x!

function disablePopup(){

    //disables popup only if it is enabled

    if(popupStatus==1){

        $("#backgroundPopup").fadeOut("slow");

        $("#popupContact").fadeOut("slow");

        popupStatus = 0;

    }

}



//this code will center popup

function centerPopup(){

    //request data for centering

    var windowWidth = document.documentElement.clientWidth;

    var windowHeight = document.documentElement.clientHeight;

    var popupHeight = $("#popupContact").height();

    var popupWidth = $("#popupContact").width();

    //centering

    $("#popupContact").css({

        "position": "absolute",

        "top": windowHeight/2-popupHeight/2,

        "left": windowWidth/2-popupWidth/2

    });

    //only need force for IE6  

    $("#backgroundPopup").css({

        "height": windowHeight

    });

  

}

//CONTROLLING EVENTS IN jQuery

$(document).ready(function(){

    if ($.cookie("anewsletter") != 1) {  

        //centering with css

        centerPopup();

        //load popup

        loadPopup();  

    }      

    //CLOSING POPUP

    //Click the x event!

    $("#popupContactClose").click(function(){

        disablePopup();

        $.cookie("anewsletter", "1", { expires: 7 });

    });

    //Press Escape event!

    $(document).keypress(function(e){

        if(e.keyCode==27 && popupStatus==1){

            disablePopup();

            $.cookie("anewsletter", "1", { expires: 7 });

        }

    });

});

</script>
For Second Type popup box
  • Got to Template section - then click on Edit HTML button.
  • Add the below line of code before </head> tag.
  • <link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
  • Now you need to add the CSS code to your template.Find out this code ]]:</b:skin> and just before this code,paste the whole CSS code given below.
  • /*----- Email Subscription Popup Box Coded by www.alltechpeople.com -----*/
    #twist-blogger-subbox {
      display: none;
      background: rgba(0,0,0,0.5);
      width: 100%;
      height:100%;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index:99999999;
    }
    #twist-blogger-subbox .popup-box {
      padding: 0;
      margin: 0 auto;
      max-width: 600px;
      border-radius: 1px;
      border: 2px solid #F5F500;
      background: #3A3939 url('http://3.bp.blogspot.com/-7TLWGdsIYRg/VSYZtpMVpgI/AAAAAAAAA7A/eTPibGVJ4Mg/s1600/64.png');
      background-repeat: no-repeat;
      background-position: 100% 45%;
      position:relative;
      top:25%;
      z-index:0;
    }
    #twist-blogger-subbox .popup-box .exit-button-subbox {
      float: right;
      cursor: pointer;
      position: absolute;
      right: 0px;
      top: 0px;
      margin-top: 2px;
      margin-right: -2px;
    }
    #twist-blogger-subbox .popup-box .exit-button-subbox:before {
      content: "X";
      padding: 5px 8px;
      background: #FFFFFF;
      color: #000000;
      font-weight: normal;
      font-size: 12px;
      text-shadow: 0px -1px #000;
      font-family: sans-serif;
      border: 4px solid #F5F500;
      border-radius: 50px 0px 50px 50px;
    }
    /*--Main Headline Style - www.alltechpeople.com--*/
    #twist-blogger-subbox .popup-box .tagline {
      padding: 0;
      line-height: 2em;
      font-size: 26px;
      height: 50px;
      font-weight: normal;
      font-family: "Oswald",sans-serif;
      text-shadow: 0px -1px 0px #F5F500;
      color: #3A3939;
      text-align: center;
      background: #FFFF00;
      border-right: 7px solid #F5F500;
      border-left: 7px solid #F5F500;
      border-bottom: 15px solid #3A3939;
    }
    /*--Paragraph Style - www.twistblogger.com--*/
    #twist-blogger-subbox .popup-box p {
      font-family: "Oswald",sans-serif;
      font-size: 15px;
      color: #EFEFEF;
      text-shadow: 1px -1px 0px #000;
      line-height: 35px;
      padding: 10px 110px 0px 20px;
      text-align: left;
      letter-spacing: 0.5px;
      margin: 0;
    }
    #twist-blogger-subbox .popup-box .rssform {
      padding: 15px 20px;
      margin: 15px 0px 0px 0px;
    }
    /*-- Button Style - www.alltechpeople.com --*/
    #twist-blogger-subbox .popup-box .rssform .button {
      cursor: pointer;
      margin: 0px 0px 0px 5px;
      border: none;
      overflow: hidden;
      width: 35%;
      height: 37px;
      background-color: #FF0;
      font-size: 14px;
      font-weight: normal;
      color: #121212;
      letter-spacing: 0.5px;
      text-transform: uppercase!important;
      font-family: "Oswald";
      float: right;
    }
    #twist-blogger-subbox .popup-box .rssform .button:hover {
      background: #FFE800;
      padding: 7px;
      border: 1px solid #fff;
    }
    #twist-blogger-subbox .popup-box .rssform .email-bg {
      background: #FFE url('http://1.bp.blogspot.com/-h7L136qj408/VSYZtr7vDNI/AAAAAAAAA7E/F3W4M51n1mk/s1600/1envelope.png') no-repeat 5px 8px !important;
      padding-left: 30px;
    }
    #twist-blogger-subbox .popup-box .rssform input {
      padding: 8px;
      font-size: 13px;
      font-family: Oswald;
      font-weight: normal;
      display: inline-block;
      width: 60%;
      height: 37px;
      text-transform: uppercase;
      outline: none !important;
      border: none;
      border-radius: 1px;
      box-sizing: border-box !important;
    }
  • Now just find out this closing </body> tag which is at the end of your template code and paste the HTML codejust before this closing tag after making required changes.
  • <div id='twist-blogger-subbox'>
                <div class='popup-box'>
    <div class='exit-button-subbox'></div>
                <div class='tagline'>
                Wait! Leech off my best
                </div>
                     <p>Get latest Blogger Widgets, Plugins and much more straight into your INBOX for free. Just Enter your email address, Verify and join our Newsletter!</p>
                <div class='rssform'>
                <form action='http://feedburner.google.com/fb/a/mailverify' method='post' target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=alltechpeoplecom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                <input type='text' class='email-bg' name='email' placeholder='Enter your email address... :)' />
                <input type="hidden" value="alltechpeoplecom" name="uri"/>
                <input type="hidden" name="loc" value="en_US"/>
                <input value="alltechpeoplecom" class="button" type="submit" />
                </form>
                </div>
    </div>
    </div>
    <script type='text/javascript'>
    jQuery(document).ready(function($){
    if($.cookie('feedburner_popup_box') != 'yes'){
    $('#twist-blogger-subbox').delay(25000).fadeIn('medium');
    $('.exit-button-subbox, .button').click(function(){
    $('#twist-blogger-subbox').stop().fadeOut('medium');
    });
    }
    $.cookie('feedburner_popup_box', 'yes', { path: '/', expires: 15 });
    });
    </script>
  • Change my Feedburner address Alltechpeople to yourblog's address.
  • Change the delay time which is 25 seconds by default(I made it default :p) to your own. To change it, just modify the value of 25000 where 1000 value = 1 second
  • Save template
  • That's It
I hope this widget really help you to increase your blog readers.Very soon I will release an another widget based on this style with the one time pop up feature.So stay tuned by subscribing to our blog. Feel free to share your opinion about this widget through comments. Thanks for visiting.

Rishi yadav is the founder of MyTechTalk.A Popular tech blog dediceted for Geeks and blogger You Can Follow Me on Facebook Or You Can Connent With Me On Twitter @alltechpeople Email:mytechtalk99@gmail.com

2 comments

I seriously love your website.. Excellent colors &
theme. Did you build this web site yourself?
Please reply back as I'm looking to create my very own site and would
like to learn where you got this from or just what the theme is
called. Cheers!

my web-site: Home Wealth Profits Review

hi admin first nce post
my question is when i change the url of website subscribe cannot show the email my blog url is
http://www.ibuildblog.com


EmoticonEmoticon