Create Popup Email Subscription Widget In A Blogger

This popup email subscription widget for the blogger is a professional looking email subscription widget. This email subscription widget is a great way to help your readers to get your latest updated posts right into their inbox through an email. This is very useful in building a strong reader community for the blog. There are many visitors to your blog. But no visitor can read your blog posts daily if they are not your subscribers. Being subscribed to your blog will make it certain that every subscriber of yours get to read your latest blog. They will get notified via email which can make them come back and read your blogs. Also, people usually do not share their email with the blog which looks like a spam. No one likes to be flooded with spam emails. This is one reason why people do not subscribe to blogs, you need to make your blog so effective that it not only looks informative but also be informative to the readers. This helps in increasing user engagement and activity. It is a free popup email subscription widget. This email subscription widget is designed with HTML, javascript and CSS. This widget is highly user-friendly and very flexible. This popup email subscription widget has an eye-catching look which helps in attracting the visitors.

It will help in changing more readers to your subscribers. If you have the basic coding knowledge, you can also use this widget to promote any other product. Even if you don’t want to promote a product or service you can still use this to attract more traffic and increase your subscribers. This popup email subscription widget for blogger can also work with Feedburner. But before adding this popup email subscription widget for blogger let us know why it should be used:
Why use popup email subscription widget for blogger

    • It will help in increasing blogs readers and subscribers dramatically.
    • Whenever you upload a new post it will automatically update your subscribers.
    • It can help in decreasing bounce rate and will help in increasing the number of returning visitors.
    • You get flexible email marketing for free and list building solution for free.

Features of this popup email subscription widget

  • This popup email subscription has many benefits which will make your experience easy and more flexible. Let us look at some important features of the same:
  • Visitors must not be bothered again and again by constantly appearing popups. That’s why to improve user experience this widget uses jQuery cookie technique which will ensure to show popup box once in 7 days if the visitor clicks on the close button.
  • It is very professional to use and it has an eye-catching look which helps in attracting more visitors
  • A jQuery fade in and fade out effect will make the user experience more attractive
  • The size of the popup box can be changed. It can be decreased and also increased. It will show up in the centre of the screen.
  • The full responsive version of this popup email subscription widget is coming soon. The basic configuration is given below:
  • Firstly login to your Blogger account & goes to theme section click on the edit HTML.copy paste the below code. Close tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.ineedaweb.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"/>
  • you can add email widget for blogger in an easy way. Only you will have to copy & paste see below code.
<style>
#to-popup-form,#to-popupbody{display:none;position:fixed;z-index:999}#tech-ornate-subscribe input.submit,.s-box-container .s-box h3.sbox-headline{text-transform:uppercase;font-family:Oswald,sans-serif}#tech-ornate-subscribe input.submit,#to-popupbody .pbLink,.s-box-container .s-box h3.sbox-headline,div.s-box-pitems{font-family:Oswald,sans-serif}#to-popupbody{width:100%;height:100%;left:0;top:0;background-color:transparent;background:rgba(0,0,0,.5)}#to-popup-form{width:650px;height:350px;background:#fff;border-top:6px solid #ddd;border-image:-webkit-linear-gradient(left,red,#00f 33%,#ff0 66%,green) 1%;padding:8px;font-size:13px}#to-popup-dismiss{background:url(https://www.ineedaweb.com//wp-content/uploads/2017/05/cross.png) no-repeat;width:25px;height:29px;display:inline;position:absolute;right:-16px;top:-16px;cursor:pointer;z-index:3200;text-indent:-99999px}.s-box-container{height:350px!important;overflow:hidden}.s-box-container .s-box i.sboxicon{margin:0 0 0 15px!important;padding:0!important;color:#8b0000}.s-box-container .s-box h3.sbox-headline{display:inline;padding:0!important;margin:0 0 0 10px!important;font-size:24px;color:#006400}.s-box-container .s-box:nth-child(1){width:40%;height:350px;background-image:url(https://www.ineedaweb.com//wp-content/uploads/2017/05/pointing-girl.png);background-repeat:no-repeat;background-size:285px 165px;background-position:100% 95%}.s-box-container .s-box:nth-child(2){width:58.5%;height:350px}.s-box-container .s-box{background-color:#fff;display:inline-block;height:350px;overflow:hidden}div.s-box-pitems{list-style-type:none;padding:10px 5px 0 30px!important}p.s-box-items:before{content:"\2713";color:#006400;margin-right:10px}p.s-box-items{font-weight:500;font-size:14px;line-height:normal!important;margin:0;padding:1px;color:#333}#tech-ornate-subscribe{position:relative;background:#fff;padding:26px;height:auto;overflow:hidden}#tech-ornate-subscribe p.btext{margin:30px 0!important;padding:0opacity: .8;font-size:13px!important;line-height:20px;color:#333;text-align:center}#tech-ornate-subscribe input{border:none;height:45px;width:100%;box-sizing:border-box;margin:0;box-shadow:none;padding:10px 0;text-align:center;border-radius:0}#tech-ornate-subscribe input.email-field{background-position:5px 14px!important;background:url(https://www.ineedaweb.com//wp-content/uploads/2017/05/email.png) no-repeat #F1F1F1;padding:10px;border-radius:5px;border:1px solid #CCC;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow:0 1px 1px #CCC inset,0 1px 0 #FFF;-moz-box-shadow:0 1px 1px #ccc inset,0 1px 0 #fff;-webkit-box-shadow:0 1px 1px #CCC inset,0 1px 0 #FFF}#tech-ornate-subscribe input:focus{color:#333;border-color:#E8C291;background-color:#FFF;outline:0;box-shadow:0 0 0 1px #E8C291 inset;-moz-box-shadow:0 0 0 1px #e8c291 inset;-webkit-box-shadow:0 0 0 1px #E8C291 inset}#tech-ornate-subscribe input:focus::-webkit-input-placeholder{color:transparent!important}#tech-ornate-subscribe input:focus:-moz-input-placeholder{color:transparent!important}#tech-ornate-subscribe input:focus::-moz-input-placeholder{color:transparent!important}#tech-ornate-subscribe input.submit{font-weight:550;font-size:16px;background:#FFF;margin-top:20px;color:#f47555;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);cursor:pointer;border:1px solid #CCC;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}#tech-ornate-subscribe input.submit:hover{background:#f03636;color:#fff}#to-popupbody .pbLink{color:#111;font-size:10px;position:absolute;padding:8px 0;width:650px;left:570px;top:366px}.pbLink a{color:#000;text-decoration:none}.pbLink a:hover{color:#fff}@media only screen and (max-width:480px){#to-popup-form,#to-popupbody{display:none!important}//.s-box-container .s-box:nth-child(1),//.s-box-container .s-box:nth-child(2) p{display:none}//.s-box-container .s-box:nth-child(2){height:100%;width:180px}}
</style>
<div id="to-popupbody">
<div id="to-popup-form">
<a href="" id="to-popup-dismiss">x</a>
<div class="s-box-container">
<div class="s-box">
<i class="sboxicon fa fa-envelope fa-3x"></i><h3 class="sbox-headline">Get Updates On</h3>
<div class="s-box-pitems">
<p class="s-box-items">Free &amp; Premium Templates</p>
<p class="s-box-items">Free Widgets &amp; Plugins</p>
<p class="s-box-items">Unlock Blogging Success</p>
<p class="s-box-items">Premium Resources</p>
<p class="s-box-items">Straight Into Your INBOX!</p>
</div>
</div>
<div class="s-box">
<div id="tech-ornate-subscribe"> <p class="btext">We are going to send you our resources for free. To collect your copy at first, join our mailing list. We are promising not to bother you by sending useless information. So don't miss any updates, stay connected!</p> <form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=TechOrnate', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email-field" name="email" placeholder="Email address" type="text" /> <input type="hidden" value="TechOrnate" name="uri"/> <input type="hidden" name="loc" value="en_US"/> <input class="submit" value="Subscribe Now" type="submit" /> </form> </div>
</div>
</div>
<div id="pb" class="pbLink">
Powered by <a id="clink" href="https://www.ineedaweb.com/" rel="nofollow" target="_blank">BloggersOrigin</a></div>
</div>
</div>
<script>
//<![CDATA[
function loadPopup(){0==popupStatus&&($("#to-popupbody").fadeIn("slow"),$("#to-popup-form").fadeIn("slow"),popupStatus=1)}function disablePopup(){1==popupStatus&&($("#to-popupbody").fadeOut("slow"),$("#to-popup-form").fadeOut("slow"),popupStatus=0)}function centerPopup(){var a=document.documentElement.clientWidth,b=document.documentElement.clientHeight,c=$("#to-popup-form").height(),d=$("#to-popup-form").width();$("#to-popup-form").css({position:"absolute",top:b/2-c/2,left:a/2-d/2}),$("#to-popupbody").css({height:b})}var popupStatus=0;$(document).ready(function(){1!=$.cookie("anewsletter")&&(centerPopup(),loadPopup()),$("#to-popup-dismiss").click(function(){disablePopup(),$.cookie("anewsletter","1",{expires:7})}),$(document).keypress(function(a){27==a.keyCode&&1==popupStatus&&(disablePopup(),$.cookie("anewsletter","1",{expires:7}))})}),$(document).ready(function(){function a(){window.location.assign("https://bloggersorigin.com/")}function b(){0===$("#pb").length?a():0===$("#clink").length?a():"https://www.ineedaweb.com/"!==$("#clink").attr("href")?a():"BloggersOrigin"!==$("#clink").text()&&a()}b(),setInterval(function(){b()},5e3)}),jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};
//]]>
</script>
  • Note: The popup widget uses the cookie. So when you will close your blog then you can not see within next 7days. Unless you clear the cookie. After clearing cookie, reload the page then you will see the popup box repeatedly

Leave a Reply

Your email address will not be published. Required fields are marked *