Blogger, Feedburner Email Subscription Popup Widget

After a very long time, I got a chance to write some Javascript, jQuery, and some HTML stuff. I thought of updating my blog with a new subscription pop-up. The goal is to show a pop-up enabling the user to subscribe to my blog through email. While I have them already in a couple of places, I felt a pop-up at the center of the screen would help - to get some attention and action. Let us see how it goes.

I am sharing the code here. Feel free to use it if you are searching for something like this (but give the credits by not removing Widget by Lakshmi N).

Now coming to the widget. The following are the functionalities

1. Display a pop-up with an option to subscribe or close the widget
2. Integrate the pop-up with my feed provider (which is Google's Feedburner) so that I do not need to manage the subscriptions. It comes with a lot of security and  I can move to a different provider if there is a need.
3. Make it less annoying. Use cookies and do not display the pop-up for another N days (by setting the expiry for cookie).

While I foresee some changes on the look and feel - but the core features are almost there. I have also committed the changes to GitHub.  There are few customizations that you might need depending on your requirements and taste. Here is how I have implemented

1. HTML/CSS: If you turn on developer tools in your browser, you should see that the entire pop-up is written using HTML, CSS, and Javascript. I have used absolute positioning of the widget so that it shows up in the middle of the browser window. 
2. Images: There are two images that I have used - one for the background for the pop-up and the close button. You can customize these too for your requirements in case if you need better images
3. Display Timeout: Configure timeout duration after which you want the pop-up to be displayed. The display of the pop-up will be delayed for such duration after document.ready(). This should be lesser duration.
4. Cookie Expiry Timeout: This is the duration after which the popup will again appear. This can be any precision (it can be from milliseconds to year). In order for this logic to kick-in, the user should have clicked "close". Ideally, this should be longer duration.
5. JQuery: I have used JQuery, so ensure that you load jQuery in section and add/update document.ready(). I have used one already on my blog from Google CDN.
6. Other Platforms: I have tested this on my blog (blogger) and not tested on other blogging platforms. But I believe it should work. Give it a try :-)
7. Questions: If you have any questions or the stuff is not working, use the comments section to reach out to me. I try my best to support.

Here is my gist (If you remove the credits, it is mere copying and if you give credits it will be termed as normal usage. Be happy that I do not ask for money or bitcoins :-)).

First Online Utility - jQuery, CSS and HTML

Not much of JavaScript has been written, but it works like a wonder. I tried to put together a simple utility - a popup that will greet the users who visit my blog.

The tiny widget has following features.

• it asks for the user to subscribe through email and get connected by RSS/Twitter.
• it displays the popup bit graphically - slides down and up
• it uses cookie and remembers the users' choice.
• it pops up after X minutes of page refresh (X is configurable)

and it looks like

I used pure HTML, CSS and jQuery to develop the simple widget. The app is half done and i have hosted it in another blog where i test apps before going to production.  Hopefully the widget should go live in a week or so. Meanwhile, let me know if you need this app for your blog/website. BTW, this comes free with source code (kind of open source)

All credits should go to jQuery.

And it feels like

Please follow the link to see the apps written using jQuery. Junkyard Apps.