How To Practise A Beautiful Pop-Up Electronic Mail Subscription Box For Bloggers
The platform that provides us alongside this stylish subscription box for blogger is Feedburner inward instance you lot exercise non get got an describe of piece of job concern human relationship you lot tin exercise 1 alongside them to live able to follow this tutorial effectively. Feedburner popular upward JQuery subscription widget nosotros volition add together inward this tutorial has a beautiful hold off as well as alongside that you lot larn your visitors attention.
Read Also:- How To Implement PrismJs Syntax Highlighting to your Blogger/BlogSpot For Better Formatting
The essence of creating this feedburner electronic mail subscription popup widget is to growth subscribers to your blog’s daily via RSS FEED.
Procedure to install electronic mail popup subscription box to your bloggers blog
Note: Before proceeding to this tutorial, brand certain you lot dorsum upward your template inward instance in that location is whatever mistake you lot tin as contrary it back.
1. Simply larn to your Blogger Dashboard>>Template>>Edit Html
2. Search for </head> tag past times pressing CTRL + F and paste </head> to discovery the tag inward your blogger template
3. Proceed past times copying as well as pasting the code below before/above </head>
1. *7 Setting this value volition displace an consequence to your cookie refreshment. In this tutorial the subscription box has been laid inward such a way that it volition seem 1 time to the visitor as well as the subscription box volition seem to the visitor 1 time to a greater extent than later the fourth dimension interval of 1 calendar week but if you lot want to display it to the visitor later 1 twenty-four hours therefore modify seven to 1.
2. Simply laid upward the popup timeout highlighted inward Green color, inward this post the default timeout is 20 minute (20000 millisecond). For instance, Setting upward popup fourth dimension out to ii infinitesimal you lot necessitate supercede 20000 to 120000.
Note:- Making the popup to seem to a greater extent than than 1 fourth dimension to the visitor or readers may annoy them, therefore leaving it to the default settings is recommended as well as displace the side past times side step
4. Proceed past times searching for </b:skin>. Simply glue the below code earlier </b:skin>.
<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 = novel 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, elevation as well as popup id
$.colorbox({width:"autopx", height:"autopx", inline:true, href:"#email-popup"});
}});</script>
How to troubleshoot cookies as well as laid timeout for popup box
1. *7 Setting this value volition displace an consequence to your cookie refreshment. In this tutorial the subscription box has been laid inward such a way that it volition seem 1 time to the visitor as well as the subscription box volition seem to the visitor 1 time to a greater extent than later the fourth dimension interval of 1 calendar week but if you lot want to display it to the visitor later 1 twenty-four hours therefore modify seven to 1.
2. Simply laid upward the popup timeout highlighted inward Green color, inward this post the default timeout is 20 minute (20000 millisecond). For instance, Setting upward popup fourth dimension out to ii infinitesimal you lot necessitate supercede 20000 to 120000.
Note:- Making the popup to seem to a greater extent than than 1 fourth dimension to the visitor or readers may annoy them, therefore leaving it to the default settings is recommended as well as displace the side past times side step
4. Proceed past times searching for </b:skin>. Simply glue the below code earlier </b:skin>.
/* Colorbox Core Style: The next CSS is consistent betwixt representative themes as well as should non live 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 next styles to modify the appearance of Colorbox. They are ordered as well as tabbed inward 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 venture #ccc; } #cboxLoadedContent { border: 5px venture #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/AVvXsEhpq2rwpRJT7aR2eCRayPiPiZTKSg6_w1esNrYZrwLmfb9UBeU1QnzGrLuL-m5wTh6hkSzZw0TkK3UZZe62UElgwR4hs217K5hhaymVWwXx8vRLmOoVQkqF8Osp75RDmfsCUJzprjH7EUUk/s32/loading.gif) no-repeat centre center; } /* these elements are buttons, as well as may necessitate to get got additional styles reset to avoid unwanted base of operations styles */#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; width: auto; background: none; } /* avoid outlines on :active (mouseclick), but save 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/AVvXsEhjPwoF1I85VaG_vNccjV2HyJiEpj6XXCkvPQaLsXlMKbwcD58EXvtD_w4LfEWerCMmLjkNzaxgIF28Uzbv6xvmpmaKBrQgi15X28RGz2zzHY0gsEqqJN2voIiOl7nABNv7JFO4TpxDoW-X/s1600/controls.png) no-repeat transcend 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/AVvXsEhjPwoF1I85VaG_vNccjV2HyJiEpj6XXCkvPQaLsXlMKbwcD58EXvtD_w4LfEWerCMmLjkNzaxgIF28Uzbv6xvmpmaKBrQgi15X28RGz2zzHY0gsEqqJN2voIiOl7nABNv7JFO4TpxDoW-X/s1600/controls.png) no-repeat transcend 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/AVvXsEhjPwoF1I85VaG_vNccjV2HyJiEpj6XXCkvPQaLsXlMKbwcD58EXvtD_w4LfEWerCMmLjkNzaxgIF28Uzbv6xvmpmaKBrQgi15X28RGz2zzHY0gsEqqJN2voIiOl7nABNv7JFO4TpxDoW-X/s1600/controls.png) no-repeat transcend 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 venture #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 venture #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 venture #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 venture #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. Proceed to Save your template to run into the consequence of the code. If the code worked, therefore Follow this lastly stride below.6. Now, find </body> tag.
7. as well as glue the below code earlier closing </body> tag.
<div style="display: none;">
<div id="email-popup" style="position: scroll; z-index: 99999;">
<div id="subscriptionwrap">
<div class="subscriptionbox">
<h4>
Do you lot desire to larn all tech as well as blogging tips from <strong>Dbencotech.com?</strong></h4>
Subscribe to Dbencotech to larn all the latest blogging tips free!<br />
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform1" method="post" onsubmit="window.open("http://feedburner.google.com/fb/a/mailverify?uri=dbencotech", "popupwindow", "scrollbars=yes,width=550,height=520");return true" target="popupwindow">
<input name="uri" type="hidden" value="dbencotech" />
<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="How To Create H5N1 Beautiful Pop-up Email Subscription Box For Bloggers" type="submit" value="SignUp" />
</form>
</div>
</div>
</div>
</div>
How to Troubleshoot Popup
Proceed past times making below changes inward the higher upward CSS as well as HTML codes.
• Simply edit the highlighted yellowish text to whatsoever you lot like. This volition seem at the transcend of the input box of the popup box.
• Also edit the highlighted code inward light-green color for width as well as elevation adjustment as you lot want for your electrical flow blog/website layout.
• Replace dbencotech alongside your Feedburner Email Feed link. You tin larn it past times visiting your feedburner describe of piece of job concern human relationship therefore navigate to Publicize as well as therefore to Email Subscriptions.
• Replace dbencotech with your feed title. This volition seem at the cease of your feed link. In my instance it is <input name='uri' type='hidden' value='dbencotech />
Read Also:- How to generate your ain favicon using your favourite image
Note: The popup volition seem solely 1 time inward week. For the popup box to seem 1 time to a greater extent than you lot necessitate to delete your browser cookie as well as as good refresh the page for it to get got effect.
Search Tags:- beautiful electronic mail subscription box for blogger,stylish electronic mail subscription widget for blogger,feedburner electronic mail subscription popup,feedburner popup blogger,stylish subscription box for blogger,blogger popup widget,pop upward newsletter blogger,subscribe box for blogger.
