How To Add Lightbox Email Subscription Box For Blog

       Getting more subscribers to own blog is quite Good sound for Bloggers.But We could't forcibly subscribe our readers .Then  Light box email Subscribe is the best way to force your readers to subscribe to your new letter ,when they enter to your website itself..
So you can ensure your readers are passed through your subscription box. As more force you can provide better offers to them like free E-book , CD's etc .

Click here to See an Working Example of it.

As per my experience i got Good amount of subscribers to bloggerhacking for last few days.!
But it quite distracting to bloggers some time,so i recommend you to apply these light-box effect for a month or max 6 months .

How to Add this to My Blog ?

  1. Sign in to Blogger and Select relevant blog from dashboard that you wish to apply this. 
  2. Go to Design  >  Edit HTML.

  3. Now Search for Body Tag in your blog.
  4. If you are using Third Party Templates,then Search for below Code.

    Or else you using Blogger Designer Template Code
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

  5. Then Copy down the Below code and paste it after the above Code Step 5(Body Tag).

    <!-- Lightbox Email Subscription Box - Start -->
    <div id='welcome-wrapper'>
    <b:section class='emailsub' id='emailsub' showaddelement='no'>
    <b:widget id='HTML29' locked='false' title='' type='HTML'/>
    <b:widget id='HTML88' locked='false' title='' type='HTML'/>
    <!-- Lightbox Email Subscription Box End -->
  6. Now,Get the Email Subscription Box Code form Feed Burner.  
  7. Then go to Page Elements where new two HTML widgets has been added.Click on the Top HTML Widget and Paste down the Email Subscription Code on it .

    <img src="" width="510" height="350"/>
    <form style="border:0px solid #ccc;padding:3px;text-align:center;" action="" method="post" target="popupwindow" onsubmit="'', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:240px" name="email"/><input type="hidden" value="BlogKnol" name="uri"/><input type="hidden" name="loc" value="en_US"/> <input type="submit" value="Subscribe" /></p></form>

    The First Red Color is the Image appeared above to he Subscription Box.You can replace it ith your image URL.
    Te Blue Colored text is code of Email Subscription Box.
  8. Now Click on Edit Button on Top second HTML Widget and Paste down the Below code in it.

  9. <div style="padding-top:15px;">
    <a id="EPEntryButton" onclick="document.getElementById(&quot;HTML28&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;HTML29&quot;).style.display=&quot;none&quot;">ENTER</a>
    </div><div id="EPDarkLayer"></div>
    <!-- CSS part -->
    #welcome-wrapper{width:40%;margin:0 auto;height:0px;text-align:center;}
    /* Email Subscribe Box  widget */
    #HTML29, #EPEntryButton, #EPGrab {position:relative;z-index:510;top:100px;}
    #HTML29 {background-color:#fff;border:solid 10px white;color:#222;display:none;padding:15px;}
    #HTML28 {z-index:499;display:none;}
    /* DarkLayer div */
    #EPDarkLayer {background-color:#000;opacity:0.6;filter:alpha(opacity=60);top:0px;left:0px;/*bs-aewp*/z-index:500;position:fixed;}
    /* Entry button */
    #EPEntryButton {background: transparent url('$FILE/shadedbutton11.gif');
    border:solid 0px #fff;
    #EPGrab {color:white;padding-top:10px;}
    <!--[if IE 6]>
    #EPDarkLayer {position:absolute;}
    <!-- Javascript part -->
    <script type="text/javascript">
    YourBlogUrl=""; //enter your blog url here; //check come from where
    if (fromInternal == -1)
    { //if visitor comes from external page
    getDarkLayer.width=screen.availWidth+"px"; //set DarkLayer width
    getDarkLayer.height=screen.availHeight*2+"px"; //set DarkLayer height
    getHTML28.display="block"; //show DarkLayer
    getHTML29.display="block"; //show message
    { //if visitor comes from internal page
    getHTML28.display="none"; //hide HTML gadget
    getHTML29.display="none"; //hide message
    <!-- Lightbox Email Subscription Box End -->
  10. Now Save it and Refresh your Blog. :)

By : Hasi Haseeb


  1. awesome nice i implement this cool subscription box in my blog
    Lightbox email subscription box blog

    Thanks,Now Look every day in your Feed status,number of email Subscribers increases a lot.!


Type your Comment Here...!