Add One Time Email Subscription Pop Up Form To Blogger

One Time Email Subscription Pop Up Form For Blogger. Now a days One time Email Subscription Pop Up Form is very popular as this this type of widget increase your subscribers, you might have seen this type of widget when you land on some website or blog  and after a few seconds a form appears asking for your Email to subscribe.They have install this type of widget just to increase there subscribers and this widget also attains a good traffic to your blog as your subscribers increases. One thing more about this widget, that it only pop up at one time, the cookies of this widget is stored in the browser of your readers so that when your visitors visit again to your website or blog, the widget will not appear.

Pop Up Subscription Box Demo



LIVE DEMO


How To Add One Time Email Subscription Pop Up Form To Blogger

  • Go to Blogger Dashboard 
  • Click on DropDown Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML --> Proceed --> Expand Widget Templates
  • Press Ctrl + F and search the code shown below

]]></b:skin>

  • Now Paste the following code Above / Before ]]></b:skin>
/*Start Subscription Pop Up by mybloggertools.org*/ #popupContactClose{ cursor: pointer; text-decoration:none; } #backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; background:#000000; border:1px solid #cecece; z-index:1; } #popupContact{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:384px; width:408px; background:#FFFFFF; border:2px solid #cecece; z-index:2; padding:12px; font-size:13px; } #popupContact h1{ text-align:left; color:#6FA5FD; font-size:22px; font-weight:700; border-bottom:1px dotted #D3D3D3; padding-bottom:2px; margin-bottom:20px; } #popupContactClose{ font-size:14px; line-height:14px; right:6px; top:4px; position:absolute; color:#6fa5fd; font-weight:700; display:block; } /*End Subscription Pop Up by mybloggertools.org */
  • Now Find the code shown below using [ctrl+F]
</head>
  • Now Paste the following code Above / Before </head> 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/> <script src='http://dinhquanghuy.110mb.com/jquery.cookie.js' type='text/javascript'/> <script type='text/javascript'> var popupStatus = 0; //loading popup with jQuery magic! function loadPopup(){ centerPopup(); //loads popup only if it is disabled if(popupStatus==0){ $(&quot;#backgroundPopup&quot;).css({ &quot;opacity&quot;: &quot;0.7&quot; }); $(&quot;#backgroundPopup&quot;).fadeIn(&quot;slow&quot;); $(&quot;#popupContact&quot;).fadeIn(&quot;slow&quot;); popupStatus = 1; } } //disabling popup with jQuery magic! function disablePopup(){ //disables popup only if it is enabled if(popupStatus==1){ $(&quot;#backgroundPopup&quot;).fadeOut(&quot;slow&quot;); $(&quot;#popupContact&quot;).fadeOut(&quot;slow&quot;); popupStatus = 0; } } //centering popup function centerPopup(){ //request data for centering var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var windowscrolltop = document.documentElement.scrollTop; var windowscrollleft = document.documentElement.scrollLeft; var popupHeight = $(&quot;#popupContact&quot;).height(); var popupWidth = $(&quot;#popupContact&quot;).width(); var toppos = windowHeight/2-popupHeight/2+windowscrolltop; var leftpos = windowWidth/2-popupWidth/2+windowscrollleft; //centering $(&quot;#popupContact&quot;).css({ &quot;position&quot;: &quot;absolute&quot;, &quot;top&quot;: toppos, &quot;left&quot;: leftpos }); //only need force for IE6 $(&quot;#backgroundPopup&quot;).css({ &quot;height&quot;: windowHeight }); } //CONTROLLING EVENTS IN jQuery $(document).ready(function(){ if ($.cookie(&quot;anewsletter&quot;) != 1) { //load popup setTimeout(&quot;loadPopup()&quot;,5000); } //CLOSING POPUP //Click the x event! $(&quot;#popupContactClose&quot;).click(function(){ disablePopup(); $.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 }); }); //Click out event! $(&quot;#backgroundPopup&quot;).click(function(){ disablePopup(); $.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 }); }); //Press Escape event! $(document).keypress(function(e){ if(e.keyCode==27 &amp;&amp; popupStatus==1){ disablePopup(); $.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 }); } }); }); </script>
  • Now Find the code shown below using [ctrl+F]
</body>
  • Now Paste the following code Above / Before </body>
<div id='popupContact'> <a id='popupContactClose'>x</a> <h1>Get Our Latest Updates Via Email</h1> <p id='contactArea'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=latesthack&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:1px solid #ccc;padding:3px;text-align:center;' target='popupwindow'><p>Enter your email address:</p><p><input name='email' style='width:140px' type='text'/></p><input name='uri' type='hidden' value='latesthack'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/><p>Delivered by <a href='http://feedburner.google.com' target='_blank'>FeedBurner</a> ! Get This <a href='http://mybloggertools.org' rel='nofollow' target='_blank'>Mybloggertools.org</a></p></form></p> </div> <div id='backgroundPopup'/>
  • Replace latesthack with your feed burner username

Like it? Share it.

No Comments

Click to Add a New Comment

  • If you're asking a question click on Subscribe By Email link, on the comment form, to be notified of replies.
  • Do NOT add links to the body of your comment as they will not be published.
  • Only the comments posted in ENGLISH will be approved.
  • If you have a problem check first the comments , maybe you will find the solution there.

Subscribe to: Post Comments ( Atom )