Friday, August 11, 2017
How To Add Pop Up FeedBurner Subscription Widget on Blogger Blogs
How To Add Pop Up FeedBurner Subscription Widget on Blogger Blogs
Popup Email Subscribe box for Blogger - is a blogger widget using jquery. This subscription form created with css3 and jquery. In this tutorial, I shared how to add pop-up email subscription box for your Blogspot blog.
By adding this widget, you should easily increase your blog, readers. Its a better way for increase blog readers. I hope this fresh pop up email subscribe box help you to increase blog readers. Now, lets start the tutorial.
Go to blogger dashboard > Template > Edit HTML and past the below CSS Code before </style>
| #sub-box {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;} #boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);} #boxview {background:#fff;border:2px solid #000000;width:400px;height:250px;position:absolute;top:33%;left:30%;} #closebox {float:right;cursor:pointer;position:absolute;right:-6px;top:-4px;} #closebox:before {content:"Close";padding:5px 8px;background:#fff;color:black;font-weight:normal;font-size:12px;font-family:Open sans;} #boxlink,#boxlink a.visited,#boxlink a,#boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;} #subscribe-box {width:400px;height:250px;background-color:#02BA74;} #subscribe-box p {font-family:'Open Sans';font-size:18px;color:#fff;line-height:5px;padding:10px 20px 0px 20px;margin:0;} #subscribe-box .emailfield {padding:0px 20px 10px;} #subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:25px;font-size:13px;font-family:'Open Sans';width:93.6%;border:0;transition:all 0.4s ease-in-out;} #subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;} #subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:normal;font-size: 10px;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.2s ease-in-out;} #subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;} #subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;} |
Now Save Template.
<script type=text/javascript>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// Pengaturan cookie
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === number) {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), =,
options.raw ? value : encodeURIComponent(value),
options.expires ? ; expires= + options.expires.toUTCString() : , // use expires attribute, max-age is not supported by IE
options.path ? ; path= + options.path : ,
options.domain ? ; domain= + options.domain : ,
options.secure ? ; secure :
].join());
}
// cookie
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp((?:^|; ) + encodeURIComponent(key) + =([^;]*)).exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type=text/javascript>
jQuery(document).ready(function($){
if($.cookie(popup_facebook_box) != yes){
$(#sub-box).delay(3000).fadeIn(fast);
$(#closebox, #boxclose).click(function(){
$(#sub-box).stop().fadeOut(fast);
});
}
});
</script>
<div id=sub-box>
<div id=boxclose>
</div>
<div id=boxview>
<div id=closebox>
</div>
<div id=subscribe-box>
<center><p>Subscribe for Latest Update</p></center>
<div class=emailfield>
<form action=http://feedburner.google.com/fb/a/mailverify?uri=trickzbuzzz method=post onsubmit=window.open('http://feedburner.google.com/fb/a/mailverify?uri=trickzbuzzz, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true target=popupwindow>
<input type=text name=name onblur=if (this.value == "") {this.value = "Your Name";} onfocus=if (this.value == "Your Name") {this.value = "";} value=Your Name/>
<input type=text name=email onblur=if (this.value == "") {this.value = "Your Email";} onfocus=if (this.value == "Your Email") {this.value = "";} value=Your Email/>
<input name=uri type=hidden value=YOUR-USER-NAME/>
<input name=loc type=hidden value=en_US/>
<input class=submitbutton type=submit value=Subscribe Now!/>
</form>
</div></div>
</div>
</div>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// Pengaturan cookie
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === number) {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), =,
options.raw ? value : encodeURIComponent(value),
options.expires ? ; expires= + options.expires.toUTCString() : , // use expires attribute, max-age is not supported by IE
options.path ? ; path= + options.path : ,
options.domain ? ; domain= + options.domain : ,
options.secure ? ; secure :
].join());
}
// cookie
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp((?:^|; ) + encodeURIComponent(key) + =([^;]*)).exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type=text/javascript>
jQuery(document).ready(function($){
if($.cookie(popup_facebook_box) != yes){
$(#sub-box).delay(3000).fadeIn(fast);
$(#closebox, #boxclose).click(function(){
$(#sub-box).stop().fadeOut(fast);
});
}
});
</script>
<div id=sub-box>
<div id=boxclose>
</div>
<div id=boxview>
<div id=closebox>
</div>
<div id=subscribe-box>
<center><p>Subscribe for Latest Update</p></center>
<div class=emailfield>
<form action=http://feedburner.google.com/fb/a/mailverify?uri=trickzbuzzz method=post onsubmit=window.open('http://feedburner.google.com/fb/a/mailverify?uri=trickzbuzzz, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true target=popupwindow>
<input type=text name=name onblur=if (this.value == "") {this.value = "Your Name";} onfocus=if (this.value == "Your Name") {this.value = "";} value=Your Name/>
<input type=text name=email onblur=if (this.value == "") {this.value = "Your Email";} onfocus=if (this.value == "Your Email") {this.value = "";} value=Your Email/>
<input name=uri type=hidden value=YOUR-USER-NAME/>
<input name=loc type=hidden value=en_US/>
<input class=submitbutton type=submit value=Subscribe Now!/>
</form>
</div></div>
</div>
</div>
Note: YOUR-USER-NAME replaces with your Feedburner username.
Thats it. Now refresh your page and see a result. If you found any problem then inform me comment section and if you think our post is helpful then do not forget to share with others. Thanks...
download file now
