Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 6

How To Add Popup "Feedburner Email Subscription Form" To Blogger and

WordPress?

https://nandanistutorial.blogspot.com/2018/10/how-to-add-popup-feedburner-
email-Subscription-form.html

Subscribers are very important for any blog or website. Google Feedburner is best
way to get subscribers for your Blog or Website and it is very popular and free for
all publishers. (आआ आआ आआआआआ post आआ आआआ Blogger आआ आआआ आआ आआ आआआआ आआआआआ आआ Views
आआआआआ आआ आआआ Email Subscription Button आआआआआ आआआआआ आआ. आआआ आआआआ आ आआआ Google
Feedburner आआआआ आआआआआआ आआआआआआआआ आआ आआआआआआआआआ आआ. आआ आआ आआआआआआ आआआआआ
आआआ आआआआआआ आआ. आआ आआआआआ आआआआआआ आआआआ Feed आआआआ आआ आआआआ आआ, आआआआआ आआआ Limit
आआआआ आआ.)

Feedburner is the best platform for collecting subscribers in mailing list. Feedburner
is Google’s Product so we can trust it blindly. It has no limitations in number of
subscribers.

You can go Feedburner website for getting Feedburner default Subscription Widget
for Blogger or Wordpress , But that one is very simple look and Pop Up Feature with
Close Button is not available on that. (आआआआआ Feedburner आआ default Subscription Widget
आआआआ आी आआआआआआ आआ आआआआआ आआ आआ आआ आआआ आआआआआ आआआआ आआ. आआआआआआ आआ आआआ आआआआ
आआआ Pop-Up Email Subscription Widget with Close Button आआआआ आआ आआ आआआआ आआआआआ Load
आआआआ आआ 5 आआआआआआआ आआ आआआ User आआ आआआआआ आआआ आआ आआआ आ आआआआआआ आआ आआ आआ आआआआआ
Close Button आआ आआआआ आआआआआ आआआ आआ आआआ आआ आआआआ आआ.)

Today We are offering our Pop Email Subscription Widget with Close Button.

Features of this Pop Email Subscription Widget are as follows:

Pop up feature and Close Button :- This Pop-up email Subscription will appear in
the centre of your blog and Because of Close button you can close it anytime.
(आआ email Subscription Widget आआआआआ आआआआ blog आआ आआआआआआ आआआ आआआआ आआ आआआआआआ
आआआआ, आआ आआआ आआआ आआआआ आआ आआआ आआआआआ Close Button आआ आआ.)

Added Pulse Effect and FontAwesome Icon:- Because of FontAwesome Icon and
a Heart with Pulse Effect it looks very attractive. (FontAwesome Icon आआ आआआआआ
आआआ आआ आआआ आआ आआ आआआआ आआआआआआ आआआआआ आआ.)

Does Not affect on Blog or Website Loading Speed:- Window.onload Method (A


JavaScript Method) makes this Widget load slower (it loads after the Complete
loading of your Website) and it does not affect your blog loading speed. (आआ
आआआआ आआआआआ आआ Loading Speed आआ आआआआआआआआ आआआआ आआआआ आआ)

Timeout Delay Feature:- Because of Timeout Delay Feature in Feedburner Email


Subscription Form will appear after 5 second delay when your blog loading is
complete. If your blog or Website does not load properly, this widget will not
appear to your users. (आआ Email Subscription Form आआआआ website आआ load आआआआ आआ 5
आआआआआआआ आआ आआआ load आआआआ आआ. आआ आआआ आआआआ आआआआआआ आआआआ आआआआआ load आआआआ
आआआआ आआ आआ आआ Email Subscription Form आआ load आआआआ आआआआ.)

It is attractive and make your site or blog more professional

How to Add One Time Stylish Popup Email Subscription Box ?

Step-1 Login to your Blogger.com account and Search Layout in Left Side.
Step-2 Click on "Layout" in left side Bar, I had Highlighted Layout in yellow colour.
Step-3 Click on "Add a Gadget" which is highlighted in yellow colour.

Step-4 After Clicking on "Add a Gadget" Choose "HTML/JavaScript" from the list.

Step-5 Now copy this Below Code and Paste it in the empty box of the
"HTML/JavaScript" section. and Save it. And at Last Click on "Save Arrangement"
option in Right Side TOP in Layout Section.

HTML/JavaScript Code: Copy this Code paste in your Blog or Website


HTML/JavaScript Widget.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-


awesome/4.7.0/css/font-awesome.min.css" />

<style>
.ABT_float_ads_main_Wrap { width: 100%; max-width: 550px; max-height: 400px;
position: fixed; z-index: 98765; background: rgb(59, 89, 100); left: 50%; top: 50%;
transform: translate(-50%, -100%); box-sizing: border-box; box-shadow: 0 0 3px
rgba(0, 0, 0, 0.2); border-radius: 10px; text-align: center; box-shadow: 0px 0px 3px
1px black; display: none; } .ABT_float_ads_close { margin: 0 auto; text-align: center;
padding: 30px 20px 30px; position: absolute; top: -70px; right: 30px; z-index:
9999999; } .ABT_float_ads_close #ABT_close_button { font-size: 30px; color: #fff;
display: inline-block; box-shadow: 0 0 3px rgba(0, 0, 0, 1); background: rgb(59, 89,
100); padding: 5px; border-radius: 5px; } #ABT_close_button { cursor: pointer; }
#ABT_credits { font-size: 30px; color: #fff; position: absolute; bottom: 2px; right:
5px; display: inline-block; text-shadow: 0 0 3px rgba(0, 0, 0, 0.2); text-decoration:
none!important; } .ABT_formWrap { background: rgb(250, 155, 200); padding: 10px;
margin: 0px; width: 100%; min-width: 350px; overflow: hidden; box-sizing: border-
box; border-radius: 10px; } .ABT_Heading, .ABT_Heading2 { color: #fff; font-size:
18px; font-weight: bold; text-shadow: 0px 0px 3px black; font-family: 'Times New
Roman', Times, serif; text-align: center; display: block; padding: 5px 0px; margin:
10px 0px 0px 0px; } .ABT_Heading2 { color: #fff; font-size: 18px; margin-bottom:
20px; font-style: italic; font-weight: 400; margin-top: 5px; } .ABT_Heading2 .fa-rss {
color: rgb(250, 155, 200); } .ABT_Heading .fa-heart { color: rgb(227, 27, 35); }
.ABT_float_ads_main_Wrap .fa-long-arrow-down { font-size: 40px; z-index: 98567;
position: absolute; display: inline-block; padding: 10px; top: 80px; left: 45%; color:
white; text-shadow: 0px 0px 5px black; } .ABT_formWrap .ABT_input_group {
width: 100%; box-sizing: border-box; position: relative; margin: 0 auto; margin-top:
20px; border: 1px solid rgb(59, 89, 100); border-radius: 4px; }
.ABT_input_group:before { color: #fff; content: "\f003"; font-family: FontAwesome;
position: absolute; text-align: center; padding: 10px 12px; width: 50px; height: 100%;
box-sizing: border-box; background: rgb(59, 89, 100); border: 1px solid rgb(59, 89,
100); text-shadow: 0px 0px 3px black; } .ABT_formWrap .ABT_Email { box-sizing:
border-box; width: 100%; padding: 10px 0px 10px 60px; height: 100%; margin: 0px;
border: none; border-radius: 4px; border: 1px solid rgb(59, 89, 100); }
.ABT_formWrap .button { width: 100%; display: block; padding: 10px; box-sizing:
border-box; position: relative; margin: 10px auto; margin-bottom: 20px; border-
radius: 4px; background: rgb(59, 89, 100); font-size: 18px; border: none!important;
cursor: pointer; text-shadow: 0px 0px 3px black; color: #fff; } .ABT_formWrap,
.ABT_innerForm, .ABT_Widget_Container { width: 100%; } .pulse { -webkit-
animation: pulse .8s linear infinite; -moz-animation: pulse .8s linear infinite; -ms-
animation: pulse .8s linear infinite; animation: pulse .8s linear infinite } @keyframes
pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform:
scale(1); -ms-transform: scale(1); transform: scale(1) } 50% { -webkit-transform:
scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform:
scale(0.8); transform: scale(0.8) } 100% { -webkit-transform: scale(1); -moz-
transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform:
scale(1) } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); transform:
scale(1) } 50% { -moz-transform: scale(0.8); transform: scale(0.8) } 100% { -moz-
transform: scale(1); transform: scale(1) } } @-webkit-keyframes &quot; pulse&quot;
{ 0% { -webkit-transform: scale(1); transform: scale(1) } 50% { -webkit-transform:
scale(0.8); transform: scale(0.8) } 100% { -webkit-transform: scale(1); transform:
scale(1) } } @-ms-keyframes &quot; pulse&quot; { 0% { -ms-transform: scale(1);
transform: scale(1) } 50% { -ms-transform: scale(0.8); transform: scale(0.8) } 100% {
-ms-transform: scale(1); transform: scale(1) }
</style>
<div class='ABT_float_ads_main_Wrap' id='ABT_float_ads_main_Wrap'>
<span class="ABT_Heading"><i class="pulse fa fa-heart fa-lg" aria-
hidden="true"></i> Nandani Tutorial आआ Subscribe आआआआ आआ आआआआआ Post आआआआ
आआआआ आआ Inbox आआआ आआआआआ</span>
<span class="ABT_Heading2"><i class="fa fa-rss" aria-hidden="true"></i>
Subscribe Nandani Tutorial To Get Updates To Your Inbox</span>
<div class='ABT_float_ads_close'>
<span id='ABT_close_button' style='float: right'>
<i id='ABT_Close_Button' class="fa fa-times" aria-hidden="true" title='close
the Advertisment'></i>
</span>
</div>
<div class='ABT_Widget_Container'>
<div class="ABT_formWrap">
<form class="ABT_innerForm"
action='http://feedburner.google.com/fb/a/mailverify?uri=Nandanistutorial'
class='subscribe-form' method='post' onsubmit='window.open
(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Nandanistutorial&apos;,
&apos;popupwindow&apos;,
&apos;scrollbars=yes,width=550,height=520&apos;);return true'
target='popupwindow'>
<div class='ABT_input_group'>
<input class='ABT_Email' alt="Enter your email address:"
placeholder="Enter your email address:" type="email" name="email" />
</div>
<input type="hidden" value="Nandanistutorial" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="button" type="submit" value="Subscribe" />
</form>
</div>
</div>
<span id='ABT_credits' style='float: right; font-size: 12px; text-shadow: 0px 0px
3px black;'><a style='text-decoration: none!important; color: #fff;'
href="https://nandanistutorial.blogspot.com">Get This Widget</a></span>
<div style='clear:right'></div>
</div>
<script type="text/javascript">
window.onload = function() {
var ABT_closeButton = document.getElementById('ABT_close_button');
var ABT_float_ads_main_Wrap =
document.getElementById("ABT_float_ads_main_Wrap");
myVar = setTimeout(function() {
ABT_float_ads_main_Wrap.style.display = 'block'
}, 3000);
ABT_closeButton.onclick = function() {
document.getElementById("ABT_float_ads_main_Wrap").style.display =
'none';
}
}
</script>

Customization:
Pink Colour highlighted text is responsible for font-awesome style-sheet.

Bright Green highlighted text is Feedburner Address, Just Change all Bright Green
Highlighted text With your Feedburner Address

Like & Follow our Facebook Page on Nandani's Tutorial (


https://www.facebook.com/nandanitutorial/) at facebook.

Visit Nandani tutorial (https://nandanistutorial.blogspot.com/) for all important


Informations and Study Materials for Central Govt jobs & State Govt Jobs & SSC
CGL CHSL MTS, IBPS, RRB, RRC, Group-D exams, Indian Railways, DSSSB, DRDO,
IB, KVS, Bank PO, TET, Bank Clerk, SSC CPO, ISRO and other Competitive Exams.
follow us on Telegrams at Nandani's Tutorial (https://t.me/nandanistutorial).

For Video Tutorial Watch and Subscribe our Youtube Channel Nandani's Tutorial
(https://www.youtube.com/channel/UC_e1Gm7-a_l6bRzrwEflhWA)

You might also like