I got a request from Anmoldeep Singh, he wanted my previous post - Fresh Flat Email Subscription Box to be in pop up form similar to what I implemented on my previous theme.
For this widget to work you need to add a link that will serve as the button or handler for the popup.
Add the following code anywhere you want it to be displayed.
e.g. inside your nav menu
Save your Template
Do some adjustments to fit your need.
And voila! I hope you guys like it! Until next time. Happy Blogging! :)
Introduction
Yes, as the title suggests it is a PURELY CSSed Pop up email subscription box not only for Blogger but for almost all types of platform as long as you have access to feedburner. This widget is a combination of my previous post email subscription box and a simple and cool pop up widget built with CSS. Make sure to follow the steps to get it working!External Scripts
FontAwesome (?)Live Demo
DemoHTML
Go to Blogger » Template » Backup your Template » and Edit HTML Add the following code before </body><div class='modalDialog' id='signup'>
<div><a class='close' href='#close' title='Close'><i class='fa fa-times'/></a>
<div class='signup-container'>
<div class='newsletter-sm'>
<i class='fa fa-envelope-o enve'/>
<h3>Subscribe to Newsletter</h3>
<p style='text-align:center'>Sign up with your email address to receive news and updates straight in your inbox.</p>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=MyBloggerAide', '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='MyBloggerAide'/>
</form></div></div></div></div>
Add the following code anywhere you want it to be displayed.
e.g. inside your nav menu
<a href='#signup'>Signup</a>
CSS
Copy and paste the code before ]]></b:skin>.enve{background:#00aa9f;color:#fff;width:50px;height:50px;display:block!important;line-height:50px!important;text-align:center;font-size:24px!important;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;margin:0 auto}.newsletter-sm{background:#fff;width:100%;margin:0;padding:20px;box-sizing: border-box;}.newsletter-sm h3,.newsletter-sm p{color:#555;font-family:"Maven Pro",sans-serif}.newsletter-sm h3{font-weight:400;text-align:center;margin-bottom:10px;font-size:24px}.newsletter-sm p{font-size:14px;line-height:20px}.newsletter-sm .newsletter-input-sm{border:0;box-sizing: border-box;padding:5px 10px;width:360px;float:left;height:40px;color:#555;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.newsletter-sm .newsletter-sm-bot{background:#00aa9f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXMlsW_3fpLJcfhz1yQFkEH-mKElrFm45XIQAq48CO3wSQPGioLJvdy3E-r2TZM_Lic1-YaEs0igHLxpvuRNoqfMv-2_hxHWglaptUOHYl6_pL3V69k5UuCZg-jrUHBwPuffzcByT_imI/s1600/bg.png) no-repeat;box-sizing: border-box;padding:20px;margin:0 -20px -20px;height:80px}.newsletter-sm .newsletter-button-sm{float:right;height:40px;display:inline-block;font-size:14px;box-sizing: border-box;padding:5px 10px;position:relative;color:#fff;text-align:center;background:#00aa9f;border:1px solid #fff;cursor:pointer;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.modalDialog{position:fixed;font-family:Arial,Helvetica,sans-serif;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.6);z-index:99999;opacity:0;-webkit-transition:opacity 200ms ease-in;-moz-transition:opacity 200ms ease-in;transition:opacity 200ms ease-in;pointer-events:none}.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:500px;position:relative;margin:5% auto;background:#fff;min-height:200px}h2.signup{background:#00aa9f;border-bottom:1px solid #008d84;font-weight:400;text-align:center;box-sizing: border-box;padding:10px;color:#fff;font-size:18px}.close{color:#888;position:absolute;top:1px;right:1px;width:30px;height:30px;line-height:30px;text-align:center;font-size:16px}.close:hover{text-decoration:none;color:#555}
Final Words
Replace MyBloggerAide with your feedburner url.Do some adjustments to fit your need.
And voila! I hope you guys like it! Until next time. Happy Blogging! :)
Rate This Article
Thanks for reading: Pure CSS Pop Up Email Subscription Box For Blogger, Stay tune to get latest Blogging Tips.