Update:- 16-04-2019
Colorbox Plugin CSS (Created by Jackle) Code Added and some bug fixes.
Update:- 23-04-2019
1. Documentation Updated for editing Popup width and height.
2. Popup Auto Time out feature added (self closed after 10 second).
3. and some bug fixes according readers feedback.
if you see any bug in the code below please let us know in the comment box below or send us a note via our contact form.
How to install email popup subscription box
Before you edit any template it's better to keep a Template Backup.
1. Go to your Blogger Dashboard>>Template>>Edit Html
2. Find following code in your template.
</head>
3. and paste the following code before/above </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var setDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + setDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();//set timeout for closing the popup
setTimeout(function () { $.fn.colorbox.close(); }, 20000);//color box width, height and popup id
$.colorbox({width:"autopx", height:"autopx", inline:true, href:"#email-popup"});
}});</script>
Troubleshoot cookies and set timeout for popup box
1. *7 Setting this value will effect cookie refreshment. I have set the Subscription box to appear once to the visitor and Subscription box will appear again after 1 week. If you want to display after a 1 day then set 7 to 1.
2. Set the popup timeout highlighted in Green color, the default timeout is 20 second (20000 millisecond). For example, Setting up popup time out to 1 minute you need replace 20000 to 60000.
Note:- Showing twice will must annoy your readers, So Leave it By Default and follow the next step.
4. Now Search for </b:skin>. ( Note:- Click the black arrow to expand the code. )
/* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */#colorbox, #cboxOverlay, #cboxWrapper {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
overflow: hidden;
}
#cboxOverlay {
position: fixed;
width: 100%;
height: 100%;
}
#cboxMiddleLeft, #cboxBottomLeft {
clear: left;
}
#cboxContent {
position: relative;
}
#cboxLoadedContent {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#cboxTitle {
margin: 0;
}
#cboxLoadingOverlay, #cboxLoadingGraphic {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
cursor: pointer;
}
.cboxPhoto {
float: left;
margin: auto;
border: 0;
display: block;
max-width: none;
-ms-interpolation-mode: bicubic;
}
.cboxIframe {
width: 100%;
height: 100%;
display: block;
border: 0;
}
#colorbox, #cboxContent, #cboxLoadedContent {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
} /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */#cboxOverlay {
background: #000;
}
#colorbox {
outline: 0;
}
#cboxContent {
margin-top: 20px;
background: #000;
}
.cboxIframe {
background: #fff;
}
#cboxError {
padding: 50px;
border: 1px solid #ccc;
}
#cboxLoadedContent {
border: 5px solid #e9e9e9;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius: 4px;
background: #fff;
box-shadow: 3px 3px 3px #fff;
}
#cboxTitle {
position: absolute;
top: -20px;
left: 0;
color: #ccc;
}
#cboxCurrent {
position: absolute;
top: -20px;
right: 0px;
color: #ccc;
}
#cboxLoadingGraphic {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwLU5h_m5jZrpJAJeiMF_BPSmxpfR51dF1K-UK9iJ_syqGlI-sc3cosDsrCSxCNuB8RhTZZFQhmt5RNFJ0eY3ejPdAFrw41HbkQh76ZPGCvUU9OCef3HLezITchip8NJzH3XQ3-x3OcGcd/s32/loading.gif) no-repeat center center;
} /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
border: 0;
padding: 0;
margin: 0;
overflow: visible;
width: auto;
background: none;
} /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
outline: none;
}
#cboxSlideshow {
position: absolute;
top: -20px;
right: 90px;
color: #fff;
}
#cboxPrevious {
position: absolute;
top: 50%;
left: 5px;
margin-top: -32px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglP38UKeqgPgBcllQSz6Z85h_uuC8TTVQfUS1mX37L03M_fAYzgzFpRsOIM3vHg1xVvvwNizCFZyvqeDmdve5aQ8oWFITqsjIJYNtmhIlBa1DHx-9cuXr74ZHfg37bvrTkghbPB7afH69m/s1600/controls.png) no-repeat top left;
width: 28px;
height: 65px;
text-indent: -9999px;
}
#cboxPrevious:hover {
background-position: bottom left;
}
#cboxNext {
position: absolute;
top: 50%;
right: 5px;
margin-top: -32px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglP38UKeqgPgBcllQSz6Z85h_uuC8TTVQfUS1mX37L03M_fAYzgzFpRsOIM3vHg1xVvvwNizCFZyvqeDmdve5aQ8oWFITqsjIJYNtmhIlBa1DHx-9cuXr74ZHfg37bvrTkghbPB7afH69m/s1600/controls.png) no-repeat top right;
width: 28px;
height: 65px;
text-indent: -9999px;
}
#cboxNext:hover {
background-position: bottom right;
}
#cboxClose {
position: absolute;
top: 5px;
right: 5px;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglP38UKeqgPgBcllQSz6Z85h_uuC8TTVQfUS1mX37L03M_fAYzgzFpRsOIM3vHg1xVvvwNizCFZyvqeDmdve5aQ8oWFITqsjIJYNtmhIlBa1DHx-9cuXr74ZHfg37bvrTkghbPB7afH69m/s1600/controls.png) no-repeat top center;
width: 38px;
height: 19px;
text-indent: -9999px;
}
#cboxClose:hover {
background-position: bottom center;
}#subscriptionwrap {
width: 600px; height: 190px;
background: #e9e9e9;
padding: 15px;
margin: 14px;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
}.subscriptionbox h4 {
font-size: 30px;
font-family: 'Verdana', Arial;
font-variant: small-caps;
margin: 0 auto;
text-align: center;
line-height: 30px;
color: #333;
font-weight: 600;
text-shadow: 1px 1px 5px #333;
text-decoration: none !important;
}.subscriptionbox p {
font-family: geogia;
font-style: italic;
font-size: 26px;
text-align: center;
margin: 0px;
line-height: 30px;
margin-top: 25px;
border-bottom: 1px solid #333;
color: #454545;
padding-bottom: 20px;
}.emailbutton1 {
background: #f7f8f9;
background: -webkit-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: -moz-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: -o-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: -ms-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f7f8f9",endColorstr="#e9e9e9",GradientType=0 );
border: 1px solid #ddd;
-webkit-border-top-right-radius: 4px;
-moz-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-webkit-box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
color: #888 !important;
text-shadow: 0 1px 0 #fff;
line-height: 1.5;
top: 0px;
margin: 10px 0 0 -15px;
cursor: pointer;
padding: 18px 15px 15px 15px !important;
font-size: 14px;
font-weight: bold;
text-decoration: none !important;
}.emailbutton1:hover {
background: #f1f1f1;
background: -webkit-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: -moz-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: -o-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: -ms-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f1f1f1",endColorstr="#e0e0e0",GradientType=0 );
text-decoration: none !important;
}.emailinput1 {
width: 490px;height: 37px; padding-right: 30px !important;
float: left;
margin: 10px 0 0 0px;
padding: 8px 40px 8px 10px;
border: 1px solid #d2d2d2;
background: #fff;
font-family: georgia;
font-style: italic;
font-size: 16px;
color: #949494;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-decoration: none!important;
}
5. Save your template and you are done second last step! Visit your blog to see it working just perfectly? if everything is working fine then Follow the final step below.
6. Now finally find the following code.
</body>
7. and paste the following code before closing </body> tag.
<div style='display:none'>
<div id='email-popup' style='position:scroll; z-index:99999;'>
<div id='subscriptionwrap'>
<div class='subscriptionbox'>
<h4>Ready To Be Make <strong>Elegant Blog</strong></h4>
<p>Subscribe to My Blogger Tricks to enjoy Free Tricks</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform1' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=mybloggertricks", "popupwindow", "scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
<input name='uri' type='hidden' value='mybloggertricks'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailinput1' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input class='emailbutton1' title='' type='submit' value='SignUp'/>
</form>
</div>
</div>
</div>
</div>
Troubleshoot Popup
Now you need to make these changes in the above CSS and HTML codes.
- Edit the highlighted yellow text to anything you like. It will appear at the top of the input box.
- Edit the highlighted code in green color for width and height adjustment as you wish for your current blog/website layout.
- replace mybloggertricks with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
- Replace mybloggertricks with your feed title. It appear at the end of your feed link. In my case it is <input name='uri' type='hidden' value='mybloggertricks />
Save your template and you are all set!
Visit your blogs and see it popping up just fine! Remember that the popup will show only once in week. To see it again you will first need to delete your browser cookie and then refresh the page to see it appearing again. I just hope you would find this tutorial easy, Please let me know if you need further help. Stay updated by subscribing our email news feed or join us on Facebook by pressing like button.
Image Credit:- FreeDigitalPhotos.net
