A subscribe box in your blog lets your visitors subscribe to your future posts. This is why subscribe box is one of the main gadget in your blog. This gadget is very useful as it delivers your blog content directly to your users and makes sure you get traffic on your blog.
The above screenshot shows how it will appear on your blog.
Talking about this gadget, this subscription box gadget will pop out whenever someone visits your blog. This is a one time pop up box which will appear only once in a few days. I know it becomes irritating to the users when they see a pop up box on every page of your blog.
People don't wanna see pop up box on every page and if you've any pop up box which will appear on every page load then you should remove it as it will affect your traffic. Pop up gadgets are cool but they should be used carefully as they have bad impact too.
Features
- Automatic pop up box
- Nice design
- One time pop up only
- Will appear in the middle of the homepage
- Easy to install
Just follow these steps to install this cool gadget
Steps to follow
- Open blogger
- Go to 'Layout' and click on 'add a gadget'
- Copy this code and paste in that gadget and click on save
<style>
#backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; background-color: transparent; background:rgba(0, 0, 0, 0.5);z-index:999; }
#popupContact{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:350px; width:500px; background:#FFFFFF; border:4px solid #ddd; z-index:999; padding:8px; font-size:13px; }
#popupContactClose{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrO0LWb2gRdom8iGftq-IBmufnX0eP2foIpJa8L6uqQnJ-rrpXZ3L1rJBDRMYkLu9z5d2PVdCBh2zII4_6f6rUIaihrtRNGnz72LrJorabmLLfZyvQqz8ttaUzPzftaUDk-YE0xWZoSig-/s1600/close.PNG) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer; text-indent: -99999px;}
#description { color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; line-height:30px; }
#description img { float: left; height: 80px; padding: 0 25px 0 10px; width: 80px; }
#followForm { padding: 15px; }
#followForm img { border:none; }
#followForm p { margin: 0 0 10px;}
#followForm input:not([type="checkbox"]){ width: 93%; margin-top: 10px; margin-bottom: 20px; padding: 10px 5px 10px 25px; border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
#followForm input:not([type="checkbox"]):active,
#followForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;}
#followForm .button input{ background: none repeat scroll 0 0 #3D9DB3; border: 1px solid #1C6C7A; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2; color: #FFFFFF; cursor: pointer; font-family: 'Arial Narrow',Arial,sans-serif; font-size: 24px; margin-bottom: 10px; padding: 8px 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); width: 30%; float: right; }
#followForm .button input:hover{ background: #4ab3c6; text-decoration: none; }
#followForm .button input:active,
#followForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
.FollowFooter { color:#222; text-align: left; font: 7px Tahoma, Helvetica, Arial, Sans-Serif; padding: 7px 0; margin-top: 70px; text-shadow: 0px 2px 3px #555; width: 500px; }
.FollowFooter a { color: #222; text-decoration: none; }
.FollowFooter a:hover { color: #000; }
<!--[if lt IE 7]>
#container a.CloseImg { background:none; right:-14px; width:22px; height:26px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrO0LWb2gRdom8iGftq-IBmufnX0eP2foIpJa8L6uqQnJ-rrpXZ3L1rJBDRMYkLu9z5d2PVdCBh2zII4_6f6rUIaihrtRNGnz72LrJorabmLLfZyvQqz8ttaUzPzftaUDk-YE0xWZoSig-/s1600/close.PNG',sizingMethod='scale'); }
#followForm input{ padding: 10px 5px 10px 32px; width: 93%; }
#followForm input[type=checkbox]{ width: 10px; padding: 0;}
<![endif]-->
</style>
<div id="backgroundPopup">
<div id="popupContact">
<a href="" id="popupContactClose">x</a>
<div id="followForm">
<img alt="Subscribe" border="0" float="center" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigJcIlQZRegLhj4QBQr2_S0bec9kZdQkvSE1ZHipclKMVx0yguuND_IMDeIP0SVCA0FL4_gosSxSCkFHj8z4GUrMFKPehc66LMtVgKT2kcTYnI70mnKXhe2KK2wPpdEKJTy52-S0BmfWhZ/s1600/Subscribe+Via+Email.PNG" />
<div id="description">
<img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglr59dFQPgBvyUEqtS9OAXqGbsPkaWhNCtSf0SlcMu1azQfKWsyS2EV5QWnGzWzZmn-zYvoEL4tag-mTl3PEhJ24YvMZ7AGE4GVz4SsRorqWX3Z6TPSn_ZEAj4pp8YEk-ymh0QloPhgbH0/s1600/newsletter.png" />Subscribe to get the most recent posts directly in your inbox</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEED-NAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" placeholder="Enter your email here" required="required" type="text" /><input name="uri" type="hidden" value="YOUR-FEED-NAME" /><input name="loc" type="hidden" value="en_US" />
<div class="button">
<input type="submit" value="Subscribe" /></div>
</form>
</div>
<div class="FollowFooter">
<a href="http://www.tutesinside.net/2016/10/add-pop-up-subscribe-box-in-blogger.html" target="_blank">Get Widget</a></div>
</div>
</div>
<script src="http://yourjavascript.com/24315621361/jquery.cookie.js" type="text/javascript">
</script>
<script type="text/javascript">
var popupStatus = 0;
//this code will load popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//This code will disable popup when click on x!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//this code will center popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie("anewsletter") != 1) {
//centering with css
centerPopup();
//load popup
loadPopup();
}
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
}
});
});
</script>
Customise
Please change the feed name (Important)
YOUR-FEED-NAME
The name of your feed can be found in feed URL like http://feeds.feedburner.com/feedname the highlighted text is the feed name.
The easy way to get your feed name is by adding a blogger gadget named 'Follow by Email' and then there you can see your feed name.
This gadget is set to appear once only. Please don't worry if you can't see second time. You can check if this gadget is working or not by opening your blog in 'Incognito Mode'
Don't you wanna leave a thanks note in comment?
0 comments:
Don't forget to check 'Notify me' box to get notification of reply.