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 ?

Go to Design > Edit HTML.

Now Search for Body Tag in your blog.

<body>

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



<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'/>

</b:section>

</div>

Now,Get the Email Subscription Box Code form Feed Burner.

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Esw7EPKyOtIAywBhoUDcq8DGcRjPw0OXEZMf0iEKLzUIm7KpEj71e0P7gPdga4oCD4tG0JdXkcGJP_s7n2H1hvlP7JIut1y3xCb10jj1xN53EV27SClSDc_f3U70C268G4oPvVP2flkO/s1600/Subscribe+our+mailing+List.PNG" width="510" height="350"/>

<form style="border:0px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogKnol', '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.

Now Click on Edit Button on Top second HTML Widget and Paste down the Below code in it.

<div style="padding-top:15px;">

<a id="EPEntryButton" onclick="document.getElementById("HTML28").style.display="none";document.getElementById("HTML29").style.display="none"">ENTER</a>

</div><div id="EPDarkLayer"></div>



<style>

#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('http://www.ferdychristant.com/blog//resources/Fun/$FILE/shadedbutton11.gif');

border:solid 0px #fff;

color:#fff;

cursor:pointer;

font-size:15px;

padding:5px;

text-decoration:none;

}

#EPGrab {color:white;padding-top:10px;}

</style>





<script type="text/javascript">

YourBlogUrl="http://blogknol.blogspot.com/"; //enter your blog url here

fromInternal=document.referrer.search(YourBlogUrl); //check come from where

getDarkLayer=document.getElementById("EPDarkLayer").style;

getHTML29=document.getElementById("HTML29").style;

getHTML28=document.getElementById("HTML28").style;

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

}

else

{ //if visitor comes from internal page

getHTML28.display="none"; //hide HTML gadget

getHTML29.display="none"; //hide message

}

</script>

Now Save it and Refresh your Blog. :)

Terimakasih anda telah membaca artikel tentang How To Add Lightbox Email Subscription Box For Blog. Jika ingin menduplikasi artikel ini diharapkan anda untuk mencantumkan link https://kadangkumatmyblog.blogspot.com/2011/08/how-to-add-lightbox-email-subscription.html. Terimakasih atas perhatiannya.

kadang - kumat myblog

Related Posts