Modal popup subscription widget for blogger

You will find many blogger widgets on internet that may be beautiful but not much beautiful like blogger widgets that are provided on this website.

I have created many interesting blogger widgets for you guys if you just have to search for any widget for blogger don't waste your time anywhere else search it here and if you want more blogger widgets subscribe to the newsletter of this blog.


Notifying your visitors about your new posts is very good technique to increase your views and earnings you can do that by turning your visitors into your subscribers.

To turn your visitors into your subscribers, you will need to have subscription form on your website.

Don't worry about that this post will full fill all your needs.

Today I am having a popup subscription form widget for blogger.

It is very beautiful blogger widget after installing this widget your visitors can subscribe to the newsletters of your blog and get updates of all your upcoming posts.

This blogger widget also supports cookies.

Using cookies it stores user data locally on their computer and this popup modal window is shown once and then cookie will be created and this popup will not be shown again for the whole day.

So if you want to create this is modal popup subscription widget in blogger you have to follow the steps provided below as before.

Steps to make Modal Popup Subscription widget in blogger:

1. Go To Blogger Dashboard
2. Then Go to Theme / Template
3. Click Edit HTML Button
4. Now search for </head>

To Search anything in blogger Press Ctrl + F and type or paste the term to search in search bar.

5. Now copy the code provided below and paste if just before the code we founded in step 4.

.modalDialog{position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.88); z-index: 99999; -webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in;}.modalDialog:target{opacity: 1; pointer-events: auto;}.modalDialog:target > div{margin: 8% auto;}.modalDialog > div{-webkit-transition: all 100ms ease-in; -moz-transition: all 100ms ease-in; transition: all 100ms ease-in; width: 600px; position: relative; margin: 5% auto; background: #fff; min-height: 200px;}h2.ldemo{display: block; border-bottom: 1px solid #d9e0e2; font-weight: 400; text-align: center; padding: 10px;}h2.signup{background: #00aa9f; border-bottom: 1px solid #008d84; font-weight: 400; text-align: center; padding: 10px; color: #fff; font-size: 18px;}.close{position: absolute; top: 10px; right: 15px; width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 13px; background: #00b140; border-radius: 100px; font-weight: 400;}.close:hover{text-decoration: none;}.close:hover{color: #555;}.newsletter-sm{background: #fff; margin: 0; padding: 50px; width: 500px;}.newsletter-sm h3{color: #00b140; font-size: 30px; font-weight: 800; text-align: center; margin-bottom: 10px; font-family: ubuntu; letter-spacing: -1px;}.newsletter-sm p{font-size: 14px; color: #555; line-height: 20px; margin: 0;}.newsletter-sm .newsletter-input-sm{border: 1px solid #ddd; font-size: 14px; width: 70%; background-color: #fff; text-align: center; color: #999; padding: 19px; border-radius: 3px 0px 0px 3px;outline:none; font-family: ubuntu;}.newsletter-sm .newsletter-sm-bot , .removebutton{padding: 40px; position: relative;outline:none;}.newsletter-sm .newsletter-button-sm, .removebutton{text-align: center; cursor: pointer; font-weight: 700; font-size: 14.5px; color: #fff; border: none; background-color: #00b140; padding: 20px; border-radius: 0px 3px 3px 0px; overflow: hidden; margin: 0 -20px -20px;}.FollowByEmail .follow-by-email-inner .follow-by-email-address{height: 40px !important; border: none; padding: 5px; width: 96%;outline:none; margin-bottom: 5px; background: #eae9e9; font-family: "Roboto", sans-serif;}.FollowByEmail .follow-by-email-inner .follow-by-email-submit{height: 40px !important; width: 100%; margin-left: 0; background: #f1ae28; font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 0; font-family: "Roboto", sans-serif;}

Change #00b140 color code to your color code whatever your scheme is.
6. Now search for </body> and copy code provided below and paste it before this tag.

<button class='removebutton' onclick="eraseCookie('seen')">Remove Cookie</button><div class="modalDialog" id="signup"> <div> <a class="close" href="#close" style="color: #fff;" title="Close" ><i class="fa fa-times"></i ></a> <div class="newsletter-sm"> <h3><i class="fa fa-envelope-o"></i> Subscribe for latest update</h3> <p style="text-align:center"> Sign up here with your email address to receive our all news and updates about blogger in your inbox. Its free. </p><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Raufgraphics', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" > <div class="newsletter-sm-bot"> <input class="newsletter-input-sm" name="email" placeholder="Enter Your Email" type="text"/> <button class="newsletter-button-sm" type="submit">Subscribe</button> </div><input name="uri" type="hidden" value="Raufgraphics"/> </form> </div></div></div>
<script>
document.querySelector('.close').onclick=function (){document.querySelector('.modalDialog').style.display='none';}
var days=1;var advert=document.getElementById('signup');if (readCookie('seen')){advert.style.display='none';}else{advert.style.display='block'; createCookie('seen', 'yes', days);}function createCookie(name,value,days){if (days){var date=new Date();date.setTime(date.getTime()+(days*24*60*60*1000));var expires="; expires="+date.toGMTString();}else var expires="";document.cookie=name+"="+value+expires+"; path=/";}function readCookie(name){var nameEQ=name + "=";var ca=document.cookie.split(';');for(var i=0;i < ca.length;i++){var c=ca[i];while (c.charAt(0)==' ') c=c.substring(1,c.length);if (c.indexOf(nameEQ)==0) return c.substring(nameEQ.length,c.length);}return null;}function eraseCookie(name){createCookie(name,"",-1);}
</script>

Replace Raufgraphics in above code with your feedburner id. Replace 1 in above code with the number of days this popup will be shown again.

You are all done you have just created a modal popup subscription widget for blogger and if you like this widget and if you want to get more widgets for blogger or if you want anything else you must subscribe to the newsletters of this blog.

source:raufgraphics.com