Professional Documents
Culture Documents
How To Add Popup "Feedburner Email Subscription Form" To Blogger and WordPress?
How To Add Popup "Feedburner Email Subscription Form" To Blogger and WordPress?
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.
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 आआ आआआआआ
आआआ आआ आआआ आआ आआ आआआआ आआआआआआ आआआआआ आआ.)
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.
<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 " pulse"
{ 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 " pulse" { 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
('http://feedburner.google.com/fb/a/mailverify?uri=Nandanistutorial',
'popupwindow',
'scrollbars=yes,width=550,height=520');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
For Video Tutorial Watch and Subscribe our Youtube Channel Nandani's Tutorial
(https://www.youtube.com/channel/UC_e1Gm7-a_l6bRzrwEflhWA)