Today we are sharing an awesome Popup social Subscription box for Blogger. Using a subscription box allows your visitor to get you blog’s latest post in his inbox. It is a benefit for both visitor and the admin as the visitor would get latest updates of your post in his inbox and it would boost the pageviews of Admin’s Blog. This is a simple subscription box and you can easily add it by adding some codes in your template.
In this popup, we used JQuery to make this one time popup as you know that to appear a popup again and again is not a good idea for good SEO and through this visitor can also be disturb so you can control this popup like allow your popup to appear this after your desired days count. So all of the best features are included here. Now withou any more preface, have a look on live demo and have a look on its features list then garb the code and enjoy.
Table of Contents
Features:
1.) New Style POPUP.
2.) Easy Editing Text Option.
3.) JQuery Based POPUP.
4.) HTML, CSS, JQuery Used.
5.) 600×400 POPUP Dimention.
6.) One Time Cookies Based POPUP.
7.) POPUP With LightBox Effect.
8.) Fully Customizable.
9.) Feedburner Email Subscription Box.
10.) You Can Customize It For WordPress Too.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search </body> Code.
7.) Now Copy The Below Code And Paste It Before Code..
8.) Click “Save Template” And Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between “<body> </body>“.
3.) Save It, Now You Are Done.
<!-- Customized Subscribe Box By InfoTechBlogging And EXEIdeas Script Start -->
<style type='text/css'>
/*
Customized Subscribe Box By InfoTechBlogging And EXEIdeas (Feb 28, 2014)
Copyright (c) 2014 EXEIdeas From www.EXEIdeas.com
Shared By EXEIdeas At: www.exeideas.com/2014/02/customized-email-subscription-popup.html
*/
#itb_exe_lightbox {display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;} #itb_exe_popup {background:white;width:600px;height:400px;position:absolute;top:50%;left:50%;margin:-200px 0 0 -300px;-webkit-box-shadow: inset 0 0 50px 0 #939393;-moz-box-shadow: inset 0 0 50px 0 #939393;box-shadow: inset 0 0 50px 0 #939393;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;} #itb_exe_close {float:right;cursor:pointer;background:url('https://lh5.googleusercontent.com/-AHO5K0BLEDc/Uw1Z9kWxEXI/AAAAAAAAL00/XtDstdRGFvo/s56/Close%2520Cross.png') no-repeat;position:relative;width:56px;height:56px;margin-right:-33px;margin-top:-20px;} #itb_exe_subscribe {background-image:url('https://lh5.googleusercontent.com/-7c-KgTYfu8M/Uw1Z-I1_qlI/AAAAAAAAL08/qvQLqO9Cni4/s600/Subscribe-POPUP.png');background-repeat:no-repeat;height:400px;width:600px;} #itb_exe_subscribe .itb_exe_text {height:170px;text-align:center;padding:0px 10px;} #itb_exe_subscribe input {border:none;font-size:15px;padding:10px;text-shadow:1px 1px 0 #FFF;width:270px;color:#EE7700;font-family:Verdana,sans-serif;} #itb_exe_subscribe .submit {background:transparent;cursor:pointer;padding:0px;width:300px;margin-left:277px;margin-top:14px;height:55px;} #itb_exe_subscribe .name {background:transparent;margin:40px 0px 0px 280px;} #itb_exe_subscribe .email {background:transparent;margin:23px 0px 0px 280px;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
/*
Customized Subscribe Box By InfoTechBlogging And EXEIdeas (Feb 28, 2014)
Copyright (c) 2014 EXEIdeas From www.EXEIdeas.com
Shared By EXEIdeas At: www.exeideas.com/2014/02/customized-email-subscription-popup.html
*/
var _0x9241=["\x63\x6F\x6F\x6B\x69\x65","\x6C\x65\x6E\x67\x74\x68","\x5B\x6F\x62\x6A\x65\x63\x74\x20\x4F\x62\x6A\x65\x63\x74\x5D","\x65\x78\x74\x65\x6E\x64","\x65\x78\x70\x69\x72\x65\x73","\x6E\x75\x6D\x62\x65\x72","\x67\x65\x74\x44\x61\x74\x65","\x73\x65\x74\x44\x61\x74\x65","","\x6A\x6F\x69\x6E","\x3D","\x72\x61\x77","\x3B\x20\x65\x78\x70\x69\x72\x65\x73\x3D","\x74\x6F\x55\x54\x43\x53\x74\x72\x69\x6E\x67","\x70\x61\x74\x68","\x3B\x20\x70\x61\x74\x68\x3D","\x64\x6F\x6D\x61\x69\x6E","\x3B\x20\x64\x6F\x6D\x61\x69\x6E\x3D","\x73\x65\x63\x75\x72\x65","\x3B\x20\x73\x65\x63\x75\x72\x65","\x65\x78\x65\x63","\x28\x3F\x3A\x5E\x7C\x3B\x20\x29","\x3D\x28\x5B\x5E\x3B\x5D\x2A\x29"];jQuery[_0x9241[0]]=function (_0xcf2dx1,_0xcf2dx2,_0xcf2dx3){if(arguments[_0x9241[1]]>1&&String(_0xcf2dx2)!==_0x9241[2]){_0xcf2dx3=jQuery[_0x9241[3]]({},_0xcf2dx3);if(_0xcf2dx2===null||_0xcf2dx2===undefined){_0xcf2dx3[_0x9241[4]]=-1;} ;if( typeof _0xcf2dx3[_0x9241[4]]===_0x9241[5]){var _0xcf2dx4=_0xcf2dx3[_0x9241[4]],_0xcf2dx5=_0xcf2dx3[_0x9241[4]]= new Date();_0xcf2dx5[_0x9241[7]](_0xcf2dx5[_0x9241[6]]()+_0xcf2dx4);} ;_0xcf2dx2=String(_0xcf2dx2);return (document[_0x9241[0]]=[encodeURIComponent(_0xcf2dx1),_0x9241[10],_0xcf2dx3[_0x9241[11]]?_0xcf2dx2:encodeURIComponent(_0xcf2dx2),_0xcf2dx3[_0x9241[4]]?_0x9241[12]+_0xcf2dx3[_0x9241[4]][_0x9241[13]]():_0x9241[8],_0xcf2dx3[_0x9241[14]]?_0x9241[15]+_0xcf2dx3[_0x9241[14]]:_0x9241[8],_0xcf2dx3[_0x9241[16]]?_0x9241[17]+_0xcf2dx3[_0x9241[16]]:_0x9241[8],_0xcf2dx3[_0x9241[18]]?_0x9241[19]:_0x9241[8]][_0x9241[9]](_0x9241[8]));} ;_0xcf2dx3=_0xcf2dx2||{};var _0xcf2dx6,_0xcf2dx7=_0xcf2dx3[_0x9241[11]]?function (_0xcf2dx8){return _0xcf2dx8;} :decodeURIComponent;return (_0xcf2dx6= new RegExp(_0x9241[21]+encodeURIComponent(_0xcf2dx1)+_0x9241[22])[_0x9241[20]](document[_0x9241[0]]))?_0xcf2dx7(_0xcf2dx6[1]):null;} ;//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#itb_exe_lightbox').delay(1000).fadeIn('medium');
$('#itb_exe_close, #itb_exefan-exit').click(function(){
$('#itb_exe_lightbox').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='itb_exe_lightbox'>
<div id='itb_exe_popup'>
<div id='itb_exe_close' title='Close This POPUP'></div>
<div id='itb_exe_subscribe'>
<div class="itb_exe_text">
<br/><br/>
<span style='color:#EE7700;font-weight:bold;font-size:32px;'>Subscribe Our Free Newsletter Now!</span>
<br/><br/>
<span style='color:#8542ac;font-size:18px;font-weight:400;'>Do You Liked Our Articles And Want The New Hot One Directly Into Your Inbox So Get The Latest Post From Our Blog Straight In Your Inbox.</span>
</div>
<div class="itb_exe_form">
<input class='name' name='name' onblur='if (this.value == "") {this.value = "Your Name";}' onfocus='if (this.value == "Your Name") {this.value = ""}' size='30' type='text' value='Your Name'/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=EXEIdeas;, 'popupwindow', 'scrollbars=yes,width=565,height=265');return true' target='popupwindow'>
<input class='email' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = ""}' size='30' type='text' value='Your Email'/>
<br/>
<input name='uri' type='hidden' value='EXEIdeas'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submit' type='submit' value='' title="Subscribe Now"/>
</form>
</div>
</div>
</div>
</div>
<!-- Customized Subscribe Box InfoTechBlogging And By EXEIdeas Script End -->Customization:
1.) If You Have Any JQuery, Then Delete The Red Line.
2.) Change Blue Text With Your FeedBurner Name.
3.) Change The Black Bold Text With Your Desired Text.
4.) More Customization Available On Demand.
5.) Save And Done.
Congrats! You are done. You can see this widget appearing when you open your Blog. If you like it then share it with your friends and if you have Ask any Queries related to the Widget in Below Comments.
About the Author:
Syed Ali is a passionate blogger. He is the founder of InfoTechBlogging. He love to help other blogger in starting their blogging career. He Post blogger widgets and tutorials for newbies.
Its only working in your demo blog, please update the code.
Thanks
Code Is Updated And Fixed. Try Again…
Hmm…awesome box. Let me check in my wordpress. Thanks
Welcome here and thanks for liking our widget. Stay with us to get more like this…
Hay..you are freak man..it’s WORKING awesomely in my blog. Thanks millions. (Bookmarked)
Welcome here and thanks for liking our widget. Stay with us to get more like this…
What you mean by feedburner name is it url
2.) Change Blue Text With Your FeedBurner Name.